Ajax call to trigger a controller function - ajax

Question

I am new to laravel and haven't got much experience with AJAX either. I've been struggling with a problem for a few days now and I hope someone can point me in the right direction.
I'm using Chart.js and the Google Maps API in one view. Everything initialises fine so no issues there. I've plotted a few markers on the map and loaded a dataset in Chart.js. I want to load a new data set in Chart.js when a marker is clicked. I'm trying to call a controller function with another dataset by using AJAX. No errors are returned, the console log from the AJAX call is working but the function in the MapController is not being called.
I tried to do a POST on the /map route with Postman and that seems to work ok.
AJAX call in the View
$.ajax({
url: "/map",
type: "POST",
data: "",
headers: {"X-CSRF-TOKEN": $("meta[name="csrf-token"]").attr("content")},
success: console.log("AJAX END")
});
Route
Route::post('/map', 'MapController#NewChart');
Controller function
public function NewChart()
{
echo "<script>console.log('NewChart function called');</script>";
$chart = new chart;
$chart->labels(['Q1', 'Q2', 'Q3', 'Q4']);
$chart->dataset('2019', 'line', [100, 10, 4, 10]);
$chart->dataset('2018', 'line', [5, 5, 5, 5]);
return view('map', ['chart' => $chart]);
}
The console log from the NewChart function is not being triggered so the AJAX call never reaches the function.
I hope someone can tell me what I am doing wrong here.

Answer 1

Please try using the following structure for your ajax request:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "/map",
type: 'POST',
data: {},
success: function (data) {
console.log("AJAX END");
}
});
And maybe there is just a problem with your debug "<script>console.log('NewChart funtion called');</script>" but everything is working fine. Just try to use the data that is returned.
success: function (data) {
$('#someDiv').html(data);
}