I have following code the view to list the cities that exist for all conferences stored in a database.
For example, if there are 2 conference entries in the database and one has the city Newcastle, another has the city Leeds it should show in this modal Newcastle and Leeds -
<ul class="modal-list">
@foreach($cities as $city)
<li class="col-lg-4 col-md-6 col-sm-12">
<a class="" name="city" id="{{$city}}">{{$city}}</a>
</li>
@endforeach
</ul>
When the user click in some city it appears this error:
jquery.min.js:4 GET http://proj.test/conferences/where/city/Newcastle 500 (Internal Server Error)
When the user clicks in some city is done an ajax request to get the conferences that have the column "city" equal to the city clicked by the user:
$("a[name='city']").on('click', function(){
var city = $(this).attr("id");
$.ajax({
url: '{{ route('city.conferences',null) }}/' + city,
type: 'GET',
success:function(result){
console.log(result)
alert(result);
$('#conferences').empty();
var newConferences='';
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newEvens += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
' +
' <div class="card box-shaddow">
' +
' <img class="card-img-top" src='+ conference.image +' alt="Card image cap">
' +
' <div class="card-body">
' +
' <p class="font-size-sm"><i class="fa fa-calendar" aria-hidden="true"></i> '+conference.start_date+'</p>
' +
' <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>
' +
' <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.place+', '+conference.city+'</p>
' +
' </div>
' +
' <div class="card-footer d-flex justify-content-between align-items-center">
' +
' <a href="' + url + '" class="btn btn-primary text-white">More</a>' +
' <span class="font-weight-bold font-size-sm"></span>
'
' </div>
' +
' </div>';
});
$('#conferences').html(newConferences);
},
error: function(error) {
console.log(error.status)
}
});
});
Route:
ConferenceController getConferencesOfCity route:
Route::get('conferences/where/city/{slug}','ConferenceController@getConferencesOfCity')->name('city.conferences');
ConferenceController getConferencesOfCity method:
public function getConferencesOfCity(Request $request)
{
$conferences = Conference::whereCity('city', DB::raw($request->slug))->get();
return response()->json($conferences);
}
Do you know why I see the error?
There are a few things to change here:
1) You need to pass the variable slug that you're getting from the route into the constructor of the function. Request isn't needed since you're not doing anything else with it.
2) You're already using whereCity
, so don't pass in the column name
3) DB::raw
is really only needed for more complicated queries or passing in mysql functions
public function getConferencesOfCity($slug)
{
$conferences = Conference::whereCity($slug)->get();
return response()->json($conferences);
}