Update amount in PivotTable with Ajax

Question

Update amount in PivotTable with Ajax

Navigation

#1 by (1 votes)

0

I have a shopping cart that modifies the quantity through ajax by the remove and adiciona functions. I have the function atualizaQtd which by ajax returns the current amount. How could I insert this new quantity into td that called the add / remove function instead of the variable {{ $product['qtd'] }}?

@extends('store.index')@section('content')<divclass="container">
<section class="carrinho">
    <h1>Carrinho</h1>
    <table class="table">
        <tr>
            <th>Item</th>
            <th>Preço</th>
            <th>Quantidade</th>
            <th>Subtotal</th>
        </tr>
        @foreach ($products as $product)
            <tr>
                <td>
                    <img class="img-produto-carrinho" src="{{ asset('storage/' . $product['item']->image) }}">
                    {{ $product['item']->name }}
                </td>
                <td>R$ {{ $product['item']->price }},00</td>
                <td class="qtd">
                    <a onclick="remove({{ $product['item']->id }})" href="#"><i class="zmdi zmdi-minus-circle"></i> </a>
                    {{ $product['qtd'] }} //Ao clicar no link de remove ou adiciona atualiza através do PHP a quantidade
                    <a onclick="adiciona({{ $product['item']->id }})" href="#"> <i class="zmdi zmdi-plus-circle"></i></a>
                </td>
                <td>R$ {{ $product['item']->price * $product['qtd'] }},00</td>
            </tr>
        @endforeach
        <tr class="total-cart">
            <td></td>
            <td></td>
            <td>Total</td>
            <td>R$ {{ $cart->getTotalPrice() }},00</td>
        </tr>
    </table>
    <button class="btn btn-success btn-finalizar">Finalizar Compra</button>
</section>
</div>  
@endsection

@push('js')
<script>

    function atualizaQtd(id) {
        $.ajax({
            type:'GET',
            url:'/produto-quantidade/' + id,
            success:function(data){
                console.log(data); //Retorna a quantidade atualizada do produto que chamou a função adiciona/remove. Preciso colocar esse valor no lugar de {{ $product['qtd'] }}

            }
        });
    }

    function remove(id) {
        event.preventDefault();
        $.ajax({
            type:'GET',
            url:'/carrinho-remove/' + id,
            success:function(data){
                atualizaQtd(id);
                //location.reload();
            }
        });
    }

    function adiciona(id) {
        event.preventDefault();
        $.ajax({
            type:'GET',
            url:'/carrinho-adiciona/' + id,
            success:function(data){
                atualizaQtd(id);
                //location.reload();
            }
        });
    }

</script>
@endpush

javascript jquery laravel

asked by anonymous 02.09.2017 / 20:49

1 answer

Create a Java application for WEB that also runs via desktop Unregistered registration token - Firebase

score 1 · Accepted Answer

You can do the following, return the variable {{ $product['qtd'] }} inside a span tag and identify that tag with a id , eg:

<td class="qtd">
    <a onclick="remove({{ $product['item']->id }})" href="#"><i class="zmdi zmdi-minus-circle"></i> </a>
    <span id="quantidade_{{ $product['item']->id }}">{{ $product['qtd'] }}</span>
    <a onclick="adiciona({{ $product['item']->id }})" href="#"> <i class="zmdi zmdi-plus-circle"></i></a>
</td>

And change your atualizaQtd function so that it modifies the text of the span tag, eg:

function atualizaQtd(id) {
  $.ajax({
    type:'GET',
    url:'/produto-quantidade/' + id,
    success:function(data){
      $("span[id='quantidade_" + id +"']").html(data); // Atualiza o valor da quantidade na tag span dentro do TD
      console.log(data); //Retorna a quantidade atualizada do produto que chamou a função adiciona/remove
    }
  });
}

Issue:

There was no need to define a unique id for each tag span , because when performing one of the add / remove functions it was updating the quantity of all products.