I have problems with ajax in Laravel 7

Question

I have the following ajax code for a select input:

$("#franchise").change(function() {
    //alert( $( "#franchise" ).val() );
    var f = $( "#franchise" ).val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type: 'POST',
      url  : "{{ route('ajax.series') }}",
      data : ({franchise : f}),
      dataType: 'JSON',
      success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});

And I also the following route:

Route::post('ajax/series', 'AjaxController@series')->name('ajax.series');

I have the following code in AjaxController:

public function series(Request $request)
{
    $id = $request->input('franchise');//I get the id data from select input
    $series = Serie::where('franchise_id',$id)->get();
    return view('ajax.series', ['series' => $series]);
}

But when I do the select event nothing happens.

I know that the change event works because I check it only with an alert so the problem may be the ajax. What's the problem?

score 1 · Answer 1 · answered Oct 26 '20 at 05:34

$("#franchise").change(function() {
    //alert( $( "#franchise" ).val() );
    var f = $( "#franchise" ).val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type: 'POST',
      url  : 'ajax/series',
      data : ({franchise : f}),
      dataType: 'JSON',
      success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});

score 0 · Answer 2 · answered Oct 26 '20 at 05:42

just move your below code in document ready function

$.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
});

add {{ csrf_field() }} in your common layout file

make sure your js code is in the same file not external js then use below js code

$("#franchise").change(function() {
    //alert( $( "#franchise" ).val() );
    var f = $( "#franchise" ).val();
    $.ajax({
      type: 'POST',
      url  : "{{ route('ajax.series') }}",
      data : ({franchise : f}),
      dataType: 'JSON',
      success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});

score 0 · Answer 3 · answered Oct 26 '20 at 05:59

Your controller and route code are perfectly fine but your javaScript code has a little problem here, in laravel there is no need to add an ajax header field for CSRF token you can add CSRF token as the body of ajax like you have added franchise and the code will work absolutely fine.

I have written the code for you to give it a try.

    $('#franchise').change(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "{{ route('ajax.series') }}",
            data: {
                franchise: $(this).val(),
                _token: $('meta[name="csrf-token"]').attr('content'),
            },
            success: function(response) {
                $("#series").html('').append(response);
            }
        });
    });

I have problems with ajax in Laravel 7

3 Answers3