Блог

Итак, у меня есть проект в Laravel, я добавил фильтры, и он отлично фильтрует продукты. Однако, когда товары фильтруются, мои кнопки добавления в корзину перестают отвечать. После проверки отображаемого кода в браузере я понял, что JS не был загружен. Однако, если я вручную обновлю страницу (или обновлю в коде с location.reload() помощью), тогда это сработает. Однако я хочу избежать ручного обновления, потому что тогда я потеряю класс цвета, добавленный к кнопке, чтобы показать, что ее активный фильтр.

Ниже приведен код для моего файла продукта, который загружает продукты в цикл for из контроллера:

products.blade.php

 <div class="container">

    <!--Grid row-->
    <div class="row">
    @foreach ($products as $p)
            <div class="col-lg-3">
                <div class="container">
                    <form action="{{ route('cart.add', $p->id) }}" data-id="{{ $p->id }}" id="addtocart">
                        <div class="row">
                            <h5>{{ $p -> name }}</h5>
                            <button type="button" id="submit" class="button has-shadow is-danger submit is-small">
                                    Add to Cart
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        @endforeach
    </div>

    <div class="container">
        {{ $products ->appends($request->query()) -> links() }}
    </div>

</div>
                  
  

products_show.blade.php — Где находится JS и куда загружается указанный выше файл. Проблема возникает после $('body').on('click', '.btn-filter' вызова.

 @extends ('layouts.app')

@section ('content')

    <div class="box text-right">
        <div class="row">
            <button type="button" name="filter[]" value="Jackets" id="filterJackets" class="button is-info btn-filter">Jackets</button>
            <button type="button" name="filter[]" value="Hoodies" id="filterHoodies" class="button is-info btn-filter">Hoodies</button>
        </div>
    </div>

    <section class="products">
        @include('product.products')
    </section>

@endsection


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $(document)
                .ajaxStart(function () {
                    $("#modal").show();
                })
                .ajaxStop(function () {
                    $("#modal").hide();
                });
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            // Pagination
            $('body').on('click', '.pagination a', function(e) {

                var url = $(this).attr('href');

                $.ajax({
                    url : url
                }).done(function (data) {
                    $('.products').html(data);
                }).fail(function () {
                    alert('Products could not be loaded.');
                });

                window.history.pushState("", "", url);
            });



            // Add to cart
            $(".submit").click(function (e) {
                e.preventDefault();
                var p_id = $(this).closest("form").data('id');
                var product_id = $("#product_id").val();
                
                var url = $(this).closest('form').attr('action');

                $.ajax({
                    url:url,
                    method:'POST',
                    data:{
                        product_id:product_id
                    },
                    success:function(response){
                        console.log("added to cart success");
                    },
                });
            });



            $('body').off('click', '.btn-filter', function(e) {
                $(this).removeClass("is-success");
            });

            $(".btn-filter").hover(function(){
                $(this).addClass("is-danger");
            }, function(){
                    $(this).removeClass("is-danger");
            });



            var filters = [];

            $('body').on('click', '.btn-filter', function(e) {
                e.preventDefault();
                $(this).toggleClass('is-success');

                filters = []; // reset
                
                $('button[name="filter[]"]').each(function()
                {
                    if ($(this).hasClass("is-success")) {
                        filters.push($(this).val());
                    }
                });

                var url = '{{ route('products.type') }}' '?filter[storage]=' filters

                $.ajax({
                    url : url
                }).done(function (data) {
                    $('.products').html(data);
                }).fail(function () {
                    alert('Products could not be loaded.');
                });

                window.history.pushState("", "", url);

            });

        });
    </script>
  

Я не уверен, имеет ли значение php-код, потому что проблема здесь в том, что кнопка добавления в корзину JS не вызывается, но здесь это так или иначе:

 public function filterByType(Request $request){
        $products = QueryBuilder::for(Auth::user()->products())
            ->allowedFilters(['type'])->paginate()
            ->appends(request()->query());

        // Check if request is from ajax
        if ($request->ajax()) {
            return view('product.products', ['products' => $products])->render();
        }

        return view('product.products_show', compact('products'));

    }
  

Спасибо.

Итак, я нашел способ сделать это, однако есть ли лучшее решение или способ исправить мою проблему? И то, что я здесь сделал, плохо?:

Я добавил location.reload() в конец btn-filter щелчка, который перезагрузит страницу, поскольку перезагрузка страницы устраняет проблему для меня.

Затем я добавил приведенный ниже код в начало скрипта:

 var window_url = window.location.href;
var url_filter_params = window_url.substr(window_url.indexOf("=")   1)
var filter_params_array = url_filter_params.split(',');

$('button[name="filter[]"]').each(function()
{
    if ($.inArray($(this).val(), filter_params_array) >= 0){
        $(this).addClass('is-success');
    }
});
  

Это в основном возвращает URL-адрес, анализирует его, чтобы получить параметры, а затем показывает, добавляет класс is-warning обратно к кнопке, чтобы она отображалась как выбранная. Фильтры также работают.