Question posted in
You can find the official documentation here.

I have problems with ajax in Laravel 7 – Jquery ajax

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?

Tags:

3

Answers


  1. 0 
    $("#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);
      }
    });
});
    Login or Signup to reply.
  2. 0

    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);
      }
    });
});
    Login or Signup to reply.
  3. 0

    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);
            }
        });
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search