У меня есть меню, которое показывает только 6 категорий.При нажатии на категорию делается ajax-запрос на получение всех сообщений по выбранной категории.
Но есть также ссылка «Все категории», при нажатии на которую отображается модальный со всеми категориями.Когда категория в модале нажата, я хочу превратить этот пункт в меню в активный элемент.Но он не работает с "$('#showCategories').addClass('active'); ". Вы знаете почему?
<ul class="Categories__Menu">
@foreach($categories->take(6) as $category)
<li class="active">
<a href="#" name="category" id="{{$category->id}}" href="#">{{$category->name}}</a>
</li>
@endforeach
<li><a data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">All Categories</a></li>
</ul>
Модальный код, который показывает все категории:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-body">
<ul class="modal-list row">
<li class="col-lg-4 col-md-6 col-sm-12">
<a class="">All Categories</a>
</li>
@foreach($categories as $category)
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ $category->image }}"/>
<a name="category" id="{{$category->id}}">{{$category->name}}</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
jQuery:
$(function() {
$("a[name='category']").on('click', function(){
$('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
$('#categoriesModal').modal('hide');
$('#showCategories').addClass('active');
var category_id = $(this).attr("id");
$('.Categories__Menu li').removeClass('ative');
$(this).parent('li').addClass('ative');
$.ajax({
url: '{{ route('category.posts',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#posts').empty();
var newPosts='';
var placeholder = "{{route('posts.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, post) {
var url = placeholder.replace(1, post.id).replace('demo-slug', post.slug);
newPosts += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <div class="card box-shaddow">\n' +
' <img class="card-img-top" src='+ post.image +' alt="Card image cap">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title h6 font-weight-bold text-heading-blue">'+post.title+'</h5>\n' +
' </div>\n' +
' </div></div>';
});
$('#posts').html(newPosts);
},
error: function(error) {
console.log(error.status)
}
});
});
});