CODEWITHSUNDEEP
javascriptphpjqueryajaxlaravel
Jack Perry
Jack Perry

Reputation: 321

Laravel Routes with AJAX file

I'm new to Laravel and I'm trying to learn how to create a dynamic drop down box where the 2nd drop down box will change depending on what is selected in the 1st one.

Here is my form code inside my blade file:

{!! Form::open(array('url'=>'', 'files'=>true)) !!}
    <label>Select a Cinema:</label><br>
    <select id = "cinema" name = "cinema">
        @foreach ($cinemas as $cinema)
            <option value="{{$cinema->id}}">{{$cinema->name}}</option>
        @endforeach
    </select>
    <br>
    <label>Select a session:</label>
    <br>
    <select id = "sesh" name = "sesh">
        <option value=""></option>
    </select>
    <br>
    <label>Number of tickets:</label><br>
    <select id = "count" name ="count">
        @for ($i = 1; $i < 10; $i++)
            <option value="{{$i}}">{{$i}}</option>
        @endfor
    </select>
    <br><br>
    <input type="submit" value="Submit">
{!!Form::close()!!}

Here is my AJAX code (also inside the blade file but in <script> tags:

<script>
  $('#cinema').on('change', function(e){
    console.log(e)
    window.alert("On Change");
    var cinema_id = e.target.value;



  //ajax
  $.get('/ajax-subcat?cinema_id=' + cinema_id, function(data){
    //success data
    console.log(data);
    window.alert("On Success");
    $('#sesh').empty();
    $.each(data, function(index, subcatObj){
      $('#sesh').append('<option value=""' + subcatObj.id +'">'+subcatObj.name+'</option>');
    });
  });
  });

</script>

And finally here is my route:

Route::get('/ajax-subcat', function(){
   $cinema_id = Input::get('cinema_id');
    $sessions = Session::where('cinema_id', '=', $cinema_id)->get();
    return Response::json($sessions);
});

So this code is not generating any data and is instead giving me a 404 error.

I have verified that the AJAX code does go inside the "change" function, through alerts, however it is not showing the 2nd alert. In my limited understanding, I feel like there may be an issue in my routes file? As if the route file is returning data, the next function in AJAX should be running.

One thing I don't understand in the routes code is what Input::get('cinema_id') is doing. I think it's grabbing what the user input in the drop down box?

Upvotes: 2

Views: 1998

Answers (4)

Shalini
Shalini

Reputation: 104

Change

uploadUrl: '{{route("product/create")}}',

to

uploadUrl: '{{url("product/create")}}',

and add this in ajax

headers: {
    'X-CSRF-Token':{{ csrf_token() }},
},

Upvotes: -1

Matt Catellier
Matt Catellier

Reputation: 858

Seems like theres a few things going on here. It's important to separate what is happening on the on the server with Laravel, and in the client with your Javascript.

SERVER
Sends the form with data in it. Any blade syntax you use like this.

@foreach ($cinemas as $cinema)
   <option value="{{$cinema->id}}">{{$cinema->name}}</option>
@endforeach

Is rendered on the server before it is sent to the client. That is how the first drop down is being populated with data when you load the page.

CLIENT

Looks like your using AJAX to make request based on users selection from the first drop down. This line:

$.get('/ajax-subcat?cinema_id=' + cinema_id, ...

Is going build request to your Route::get('/ajax-subcat', ... along with a query string. ?cinema_id=1. Input::get('cinema_id'); should take the value of the query string (1).

It looks like you've set up the the route correctly so I'm thinking its a problem with var cinema_id = e.target.value;. I'd check it's value before the request is made and make sure it lines up with the value that your query on the server is going to need.

The value of var cinema_id on the client, is going to be the value of $cinema_id on the server for your query.

Hope this helps,

Matt

Upvotes: 0

Komal
Komal

Reputation: 2736

Add header in your ajax call

headers : {
    'csrftoken' : '{{ csrf_token() }}'
}

Upvotes: 0

Mahfuzul Alam
Mahfuzul Alam

Reputation: 3157

Since it's giving 404 error, I hope using full url will solve this. Use 

//ajax
$.get('{{ url('/ajax-subcat') }}?cinema_id=' + cinema_id, function(data){
    //success data

Upvotes: 1

Related Questions