Ajax Laravel return view 500 Error

Question

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');
                }
            }
        });

You said "When I try to return back to my edit view I get this error in the console" try clicking on the post request and what do you see under preview? — haakym
1. You haven't done what I have said in my first comment. 2. As I said in our chat the other day "... your editProduct method returns a view, if you're using it for ajax don't return a view, return json data" chat.stackoverflow.com/transcript/message/31766104#31766104 - hope that's clear. — haakym
hmm ok, so I cannot return a view with ajax. But how do I use that json data further? — utdev
See my answer. I think you need to read up the docs on how an ajax request works then you will understand why you can't return it a view. Think about why you're using a ajax request, it's so you don't need to go away from the current page/i.e. the current view - so why would you pass it back a view. Returning a view is for when you're NOT using ajax. You want to return json so your $.ajax success method can do something with it. — haakym

haakym haakym · Accepted Answer · 2016-07-20T09:59:30

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
}

Ajax Laravel return view 500 Error

2 Answers