How to refresh an includes view and not the whole view in laravel using javascript?

Web page has an ordering form that submits data to an instance of a cart container.

I was able to do this without refreshing the whole page by using javascript. my problem is I want to update a partial view of that page specifically the side bar (_includes.cart) where im displaying all the items in the cart and also the icon cart on the nav bar where it display the total items.

here is my 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>

here is my 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;
    });

here is the view I want to refresh

@include('_includes.cart')

and this is the cart view

<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>

I tried this in my cart controller but it didnt go as expected.

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

Answer

You can wrap the included view in a container and change the inner HTML of that container with the Ajax response

For example, let’s add a random string to the links block of welcome view extracted and refresh that included view

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>

The route

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

Now each time you click the button, the view is refreshed with a new random string for a link

Advertisement

Answer