Как обновить представление включений, а не весь вид в laravel, используя javascript?

Question

Веб-страница имеет форму заказа, которая передает данные в экземпляр контейнера корзины.

Я смог сделать это без обновления всей страницы с помощью javascript. Моя проблема заключается в том, что я хочу обновить частичное представление этой страницы, в частности боковую панель (_includes.cart), где я отображаю все элементы в корзине, а также значок корзины на панели навигации, где отображаются все элементы.

вот мой html

<form action="{{route('cart.store', $item)}}" method="Post" class="ajax">
  {{csrf_field()}} 
  <input type="hidden" name="id" value="{{$item->id}}">
  <input type="hidden" name="prod_desc" value="{{$item->prod_desc}}">
  <input type="hidden" name="concept" value="{{$item->concept}}">
  <input type="hidden" name="unit_price" value="{{$item->unit_price}}">
  <input type="hidden" name="pictures" value="{{$item->pictures}}">
  <button type="submit"><i class="fa fa-plus-square"></i></button> 
</form> 

вот мой javascript

  $('form.ajax').on('submit', function(){
        var that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};

            that.find('[name]').each(function(index, value){
                var that = $(this),
                name = that.attr('name'),
                value = that.val();

                data[name] = value;
            });
            $.ajax({
                type: type,
                url: url,
                data: data,
                success: function(response) {

                }
            });
        return false;
    });

вот представление, которое я хочу обновить

@include('_includes.cart') 

и этопросмотр корзины

<h5>YOUR CART</h5>
<div > 
  @if (Cart::count() > 0)
  <h5>{{ Cart::count()}} item(s) in Cart</h5>
  <div class="cart-table">
      @foreach (Cart::content() as $item)
      <div class="cart-table-row">
        <div class="cart-table-row-left">                    
            <div class="cart-item-details">
                <div class="cart-table-item">
                  <a href="">{{$item->model->prod_desc}}</a>
                </div>                       
             </div>
             <div class="cart-table-price">
               {{'BD ' . number_format($item->model->unit_price * $item->qty, 3)}}
             </div>
        </div>
     @endforeach
   </div>

 @else
    <div class="cart-logo">
      <i class="fa fa-shopping-bag"></i>
    </div>
    <h5>There are no items in your cart</h5>
 @endif

</div>

Я попробовал это в моем контроллере корзины, но все пошло не так, как ожидалось.

$view = view('_includes.cart');
            echo $view->render();

Answer 1

Я бы решил эту проблему в 3 шага

1) добавить маршрут и функцию в вашем контроллере, которая возвращает пример визуализированного вида:

public function load(Request $request)
    {

        $galleryItems = "";
        $articles= Article::all();
        foreach ($articles as $article) {
            $galleryItems .=
                    view(
                        'components.article-gallery-item',
                        ["article"=>$article]
                    )->render() ;
        }
        return $galleryItems;
    }

2) Вызвать маршрут с помощьюajax-запрос при необходимости

Всегда не забывайте включать @crsf в ваше представление и сначала создавать маршрут

$.ajax({
            url:"{{ route('articles.load') }}",
            method:"POST",

            data:{
                _token:_token,
                },
            success:function(data)
            {

                $('#yourContainer').empty();

                $('#yourContainer').append(data);

            }
        });

3) Очистите контейнер, который вы хотите «обновить», и добавьте недавновизуализированное представление, возвращаемое контроллером в запросе ajax (уже выполненное в сценарии ранее)

Answer 2

Вы можете обернуть включенное представление в контейнер и изменить внутренний HTML-код этого контейнера с помощью ответа Ajax

Например, давайте добавим случайную строку в блок ссылок welcome извлеченного представления и обновим егоэто включенное представление

welcome.blade.php

<div class="content">
            <div class="title m-b-md">
                Laravel
            </div>
            <button onclick="refresh_links()">Refresh View</button>
            <div id="links_container">
                @include('links')
            </div>
        </div>
    </div>
    <script src="/js/app.js"></script>
    <script>
        function refresh_links() {
            $.get('/getLinks', function(data) {
                document.getElementById('links_container').innerHTML = data;
            })
        }
    </script>

links.blade.php

<div class="links">
    <a href="">{{ $link ?? null }}</a>
    <a href="https://laravel.com/docs">Docs</a>
    <a href="https://laracasts.com">Laracasts</a>
    <a href="https://laravel-news.com">News</a>
    <a href="https://blog.laravel.com">Blog</a>
    <a href="https://nova.laravel.com">Nova</a>
    <a href="https://forge.laravel.com">Forge</a>
    <a href="https://vapor.laravel.com">Vapor</a>
    <a href="https://github.com/laravel/laravel">GitHub</a>
</div>

Маршрут

Route::get('/getLinks', function () {
    $link = str_random();
    return view('links', compact('link'));
});

Теперь каждый раз, когда вы нажимаетекнопка, представление обновляется новой случайной строкой для ссылки

Надеюсь, это поможет