John Doe 2 John Doe 2 - 4 months ago 33
Ajax Question

Ajax Laravel return view 500 Error

I am getting each slider value in slide (Jquery Ui Slider) via Ajax to my Controller.

The Slider + Ajax looks like this:

$("#sliderNumCh").slider({
range: "min",
min: 0,
max: 20,
step: 1,
value: numbersOfChapters,
change : function(e, slider){
$('#sliderAppendNumCh').empty();
var sliderValue = slider.value;
var getSliderVal = document.getElementById('sliderValue').value = sliderValue;
var getPrId = document.getElementById('editId').value;

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'post',
url: "{{ Route('editProductPost', $product->id) }}",
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
data: {
value: getSliderVal,
productId : getPrId
},
success: function (option) {
console.log(getSliderVal);
}
});
},
});


Thus I do have this in my head:

<meta name="csrf-token" content="{{ csrf_token() }}">


My route looks like this:

Route::post('edit/{productID}', ['as' => 'editProductPost', 'uses' => 'ProductController@editProductPost']);


And in my Controller method I call it like this:

public function editProductPost(Request $request)
{
$sliderValue = $request->get('value');
Log::info($sliderValue);

return view('productRom.edit', [
'sliderValue' => $sliderValue
]);
}


Log::info($sliderValue) tells me that I do get the correct slider value on each slide.

When I try to return back to my edit view I get this error in the console:


POST http://localhost/myApp/public/product/edit/73 500 (Internal
Server Error)


How can I solve this?

Edit

Since I have this line in my view:

<form action="{{ route($route) }}"...>


The route variable was not defined so I added this in my return statement.

return view('productRom.edit', [
'sliderValue' => $sliderValue,
'route' => 'editProductPost'
]);


The error is gone but when I try to access the
$sliderValue
variable like this:

<p>{{ isset($sliderValue) ? $sliderValue : "nothing" }}</p>


it prints me
nothing


Edit

Controller:

public function editProductPost(Request $request)
{

return response()->json([
'sliderValue' => $request->get('value')
]);
}


View(ajax):

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'post',
url: "{{ Route('editProductPost', $product->id) }}",
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
data: {
value: getSliderVal,
productId : getPrId
},
success: function (response) {
// check it has some data
if (response.length) {
// spit it out
console.log(response);
} else {
console.log('nothing returned');
}
}
});

Answer

Your controller method should look like this:

public function editProductPost(Request $request)
{
    return response()->json([
        'sliderValue' => $request->get('value')
    ]);
}

You shouldn't be returning a view to a ajax request.

Your ajax success method should look like this (for example):

// first arg is the data returned by the controller method
success: function (response) {
    console.log(response);
}

and it should ouput something like this:

{
    'sliderValue': 4
}