datatables ajax routes not working on local network - ajax

Question

My problem occur in a specific case,
I'm using laravel 7, trying to make small contacts list datatable using ajax CRUD operations .
On localhost every thing is OK but when I deploy it to local network I get (404 not found ajax response)
may controller code:
public function index(Request $request)
{
$cities = State::where("country_id",223 )->get();//223 turkey
$countries = [];
$countries = Country::all(); //select('name')->get()
$datasources = [];
$datasources = DB::table('contacts')->select('data_source')->distinct()->get()->toArray();
$contact_types = [];
$contact_types = DB::table('contacts')->select('contact_type')->distinct()->get()->toArray();
$data = DB::table("contacts")
->leftjoin("countries","contacts.country","=","countries.id")
->leftjoin("states","contacts.city","=","states.id")
->select("contacts.*", "countries.name as countryname", "states.name as statename")
->latest()->get();
if ($request->ajax()) {
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'edit';
$btn = $btn.' delete';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('contacts.contactAjax')->with([ 'contacts'=>$data,
'countries'=> $countries,
'cities'=> $cities,
'datasources'=> $datasources,
'contact_types'=> $contact_types]); //,compact('contacts'));
}
and here may whole view code:
#extends('contacts.layout')
#section('content')
<div class="container">
<h1>Arabist CRM </h1>
<a class="btn btn-success" href="javascript:void(0)" id="createNewContact"> Add contact</a>
<button id="btn-export">EXCEL</button>
{{--onclick="exportTableToExcel('tbl_contacts','conts.xlsx')" <a class="btn btn-success" href="javascript:exportTableToExcel('tbl_contacts','contacts.xlsx')" id="xlsx-export"> excel</a> --}}
<table class="table table-bordered data-table" id="tbl_contacts">
<thead>
<tr>
<th style="padding:10pt 20pt 2pt 2pt; background-image:none;" width="20pt">No</th>
<th style="min-width:75pt; padding:10pt 20pt 2pt 2pt; background-image:none;" width="10%">name</th>
<th style="min-width:50pt; padding:10pt 20pt 2pt 2pt; background-image:none;" width="10%">company</th>
{{-- <th width="10%">birth</th>
<th>الجنس</th> --}}
<th style="min-width:75pt; padding:10pt 20pt 2pt 2pt; background-image:none;" >email</th>
<th style="min-width:50pt; padding:10pt 20pt 2pt 2pt; background-image:none;">phone</th>
<th style="min-width:120pt; padding:10pt 20pt 2pt 2pt; background-image:none;" width="15%">notes</th>
<th style="min-width:40pt; padding:10pt 20pt 2pt 2pt; background-image:none;">contact type</th>
<th style="min-width:40pt; padding:10pt 20pt 2pt 2pt; background-image:none;">city</th>
<th style="min-width:65pt; padding:10pt 20pt 2pt 2pt; background-image:none;">address</th>
<th style="min-width:80pt; padding:10pt 20pt 2pt 2pt; background-image:none;" width="8%" style="min-width:100px">control</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="ajaxModel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modelHeading"></h4>
</div>
<div class="modal-body">
<form id="contactForm" name="contactForm" class="form-horizontal">
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">company</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="company_name" name="company_name" placeholder="Enter Name" value="" maxlength="50" >
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">email</label>
<div class="col-sm-12">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Name" value="" >
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">phone</label>
<div class="col-sm-12">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Enter Name" value="" maxlength="50" required="required">
</div>
</div>
<div class="form-group">
<label for="contact_type" class="col-sm-2 control-label">type</label>
<div class="col-sm-12">
<input class="form-control" type="text" list="contact_types" name="contact_type" id="contact_type" placeholder="type" />
<datalist name = "contact_types" id = "contact_types" >
#foreach ($contact_types as $ctp)
<option >{{ $ctp->contact_type }}</option>
#endforeach
</datalist>
</div>
</div>
<div class="form-group" style="display:none;">
<label for="country" class="col-sm-2 control-label" >country</label>
<div class="col-sm-12">
<select class="form-control input-sm" name="country" id="country">
<option value="">--select--</option>
#foreach ($countries as $cnt)
#if($cnt->id == 223 )
<option value="{{ $cnt->id }}" selected>{{$cnt->name}}</option>
#else
<option value="{{ $cnt->id }}">{{$cnt->name}}</option>
#endif
#endforeach
</select>
</div>
</div>
<div class="form-group" style="display:none;">
<label for="city" class="col-sm-2 control-label">city</label>
<div class="col-sm-12">
<select class="form-control input-sm" name="city" id="city">
<option value="">--select--</option>
#foreach ($cities as $cnt)
#if($cnt->id == 3703 )
<option value="{{ $cnt->id }}" selected>{{$cnt->name}}</option>
#else
<option value="{{ $cnt->id }}">{{$cnt->name}}</option>
#endif
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">address</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="address" name="address" placeholder="Enter address" maxlength="50" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">notes</label>
<div class="col-sm-12">
<textarea id="notes" name="notes" required="" placeholder="Enter Details" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
more details
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
var table = $('#tbl_contacts').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('ajaxcontacts.index') }}",// "{{ route('ajaxcontacts.index') }}",{{ url('ajaxcontacts.index')}}
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'company_name', name: 'company_name'},
{data: 'email', name: 'email'},
{data: 'phone', name: 'phone'},
{data: 'notes', name: 'notes'},
{data: 'contact_type', name: 'contact_type'},
{data: 'statename', name: 'city'},
{data: 'address', name: 'address'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$('#btn-export').click(function () {
exportTableToExcel("tbl_contacts","fuc.xlsx");
});
$('#createNewContact').click(function () {
$('#saveBtn').val("create-contact");
$('#id').val('');
$('#contactForm').trigger("reset");
$('#modelHeading').html("Create New Contact");
$('#ajaxModel').modal('show');
});
$('body').on('click', '#moreDetails', function () {
var id = $('#id').val();
alert("id: "+ id);
window.location.href = "contacts" +'/' + id +'/edit';//"{{ route('contacts.index') }}"
//$.get("{{ route('contacts.index') }}" +'/' + id +'/edit')
});
$('body').on('click', '.editContact', function () {
var id = $(this).data('id');
//alert("id: "+ id);
$.get( "{{ route('ajaxcontacts.index') }}" + "/" + id +"/edit", function (data) {
//alert("data.name: " + data.name)
$('#modelHeading').html("Edit Contact");
$('#saveBtn').val("edit-user");
$('#ajaxModel').modal('show');
$('#id').val(data.id);
$('#name').val(data.name);
$('#company_name').val(data.company_name);
$('#email').val(data.email);
$('#phone').val(data.phone);
$('#notes').val(data.notes);
$('#contact_type').val(data.contact_type);
$('#data_source').val(data.data_source);
$('#country').val(data.country);
$('#city').val(data.city);
$('#address').val(data.address);
})
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Sending..');
$.ajax({
data: $('#contactForm').serialize(),
url: "{{ route('ajaxcontacts.store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
$('#contactForm').trigger("reset");
$('#ajaxModel').modal('hide');
table.draw();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('save changes');
}
});
});
$('body').on('click', '.deleteContact', function () {
var id = $(this).data("id");
confirm("Are You sure want to delete !");
$.ajax({
type: "DELETE",
url: "{{ route('ajaxcontacts.store') }}"+'/'+id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
</body>
#endsection
and web.php routes
Route::resource('ajaxcontacts','ContactAjaxController')->Middleware('isAdmin');
Route::get('ajaxcontacts/index', 'ContactAjaxController#index');

Answer 1

The issue is that you are calling a route from your ajax code, but you have not set up a named route within your web.php route file.
When you use the route() method, Laravel looks for a named route. You call this method several times in your blade file here:
"{{ route('ajaxcontacts.index') }}"
To Fix just name the route in your web.php file:
Route::get('ajaxcontacts/index', 'ContactAjaxController#index')->name('ajaxcontacts.index');