У меня есть ссылка "Показать города", при нажатии на которую появляется модальное изображение с некоторыми городами:
<a class="city" id="showCities"
data-toggle="modal" data-target="#modal2" href=""> Show cities</a>
Когда пользователь нажимает на город внутри модального окна, модальное окно закрывается и в "#conferences "div - это конференции, для которых столбец" город "в таблице конференций равен выбранному городу.Это нормально работает с запросом ajax.
Сомнение:
Я сомневаюсь, потому что я хотел бы повторно использовать эту часть кода, запрос ajax, дляавтозаполнение поискового ввода с идентификатором "#search".Когда пользователь пишет, например, «Ne» в этом автозаполнении ввода, появляется Newcastle.Это работает нормально.
Но когда пользователь щелкает в Ньюкасле, в div "#conferences" должны появиться конференции, в которых столбец города называется "Newcastle".В этой части я сомневаюсь в том, как повторно использовать код почтового запроса AJAX при нажатии на город внутри модального окна.Знаете ли вы, как этого добиться?
Когда пользователь нажимает на «Ньюкасл», он перенаправляется на «http://proj.test/conferences/where/city/Newcastle", и появляется конференция, где городом является Ньюкасл (в данном случаеесть только 1):
[{"id":2,"name":"conf test","city":"Newcastle",...}]
Но то, что должно произойти, - это конференции, где столбец города Ньюкасл появляется в разделе #conferences.
AutoCompleteController:
class AutocompleteController extends Controller
{
public function index(){
return view('autocomplete.index');
}
public function search(Request $request){
$search = $request->term;
$conferences = Conference::where('name', 'LIKE', '%'.$search.'%')->get();
$cities = Conference::where('city', 'LIKE', '%'.$search.'%')->get();
$data= [];
foreach ($conferences as $key => $value){
$data[] = ['category'=> 'Conferences', 'value' => $value->name, 'url' => 'conference/'.$value->id.'/'.$value->slug];
}
foreach ($cities as $key => $value){
$data[] = ['category'=> 'Cities', 'value' => $value->city, 'url' => 'conferences/where/city/'.$value->city];
}
return response($data);
}
}
Автозаполнение Jquery:
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category bg bg-light-gray2 h6 font-weight-bold text-heading-blue'>"
+ item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
$("#search").catcomplete({
source: "{{ URL::to('autocomplete-search') }}",
select: function(event, ui) {
window.location.href = ui.item.url;
}
Модальный режим, который появляется при нажатии Show citis:
<div class="modal fade bd-example-modal-lg" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<ul class="modal-list row">
@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>
</div>
</div>
</div>
</div>
div #conferences ", которые показывают конференции, результаты:
<div class="row" id="conferences">
@foreach(conferences as $conference)
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<img class="card-img-top" src="{{$conference->image}}" alt="Card image cap">
<div class="card-body">
<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>
@endforeach
</div>
jQuery AJAX-запрос:
$("a[name='city']").on('click', function(){
$('#showCities').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
var city = $(this).attr("id");
$.ajax({
url: '{{ route('city.conferences',null) }}/' + city,
type: 'GET',
success:function(result){
console.log(result)
$('#conferences').empty();
var newConferences='';
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
$('#modal2').modal('hide');
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>\n' +
' <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.city+'</p>\n' +
' </div>\n' +
' </div>\n';
});
$('#conferences').html(newConferences);
},
error: function(error) {
console.log(error.status)
}
});
});