Changing logic - jQuery

Question

Changing logic - jQuery

Navigation

#1 by (1 votes)

1

I have several buttons from which to add and remove products from an external file, but this is just a detail. Every time the buy button is clicked, the product is added, the button is "changed" to remove, and all other buttons are disabled for the click until the same product is removed from the remove button.

I need to change this logic to this: Every time the buy button is clicked, the product is added and the button is "changed". However, if another buy button is clicked, the product that has been added is removed and added to it.

Note: The functions addCartao and removeCartaotoCart , add the remove the product.

Button code:

 <button type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Comprar</span></span></button>
 <button style="display: none;" type="button" id="cartaoMensagemRemover<?php echo $_product->getId(); ?>" class="button btn-cart" onclick="removeCartaotoCart('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Remover</span></span></button>

Ajax Requests Code:

function addCartao(product_id){
    $j('#cartaoMensagem'+product_id).hide();
    $j('#cartaoMensagemRemover'+product_id).show();
    $j.ajax({
      type: "POST",
      url: "adiciona.php",
      data: {
        product_id: product_id
      },
      dataType: 'json',
      cache : false,
      beforeSend: function () {

      },
      success: function (retorno) {
        var button = $j('#cartaoMensagemRemover'+product_id);

        $j('#cartao').find(':button').not(button).attr('disabled',true);
        $j('.item-custom').append('<tr id="trAppend"><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
        getSubTotal();
        getGrandTotal();
      },
      complete: function () {

      },
      error: function (x,y,z) {
        alert("error");
        alert(x);
        alert(y);
        alert(z);
        window.location.reload();
        history.go(0);
        window.location.href=window.location.href;
      }
  });
}



 function removeCartaotoCart(itemId){
        $j('#cartaoMensagemRemover'+itemId).hide();
        $j('#cartaoMensagem'+itemId).show();
        $j.ajax({
            type:"POST",
            url:"remove.php",
            data:{
                itemId: itemId
            },
            cache: false,
            beforeSend: function(){

            },
            success: function(retorno){
                var button = $j('#cartaoMensagemRemover'+itemId);
                $j('#cartao').find(':button').attr('disabled',false);
                $j('.item-custom #trAppend').remove();
                getSubTotal();
                getGrandTotal();

            },
            complete: function () {

            },
            error: function (x,y,z) {
            alert("error");
            alert(x);
            alert(y);
            alert(z);
            window.location.reload();
            history.go(0);
            window.location.href=window.location.href;
          }
        });
    }

javascript jquery ajax

asked by anonymous 04.09.2017 / 19:11

1 answer

Filter with Node.JS Select and display data from a position in the database table

score 1 · Accepted Answer

The change made in the code for the logic change was the addition of a variable to save the product id so that it is removed if one already exists.

Updated Ajax Requests Code:

    var productSelected = "";
    function addCartao(product_id){
        alert(product_id);
        if( productSelected != "" ){
            removeCartaotoCart(productSelected);    // Remove the item in cart, if there is one.
          }
        $j('#cartaoMensagem'+product_id).hide();
        $j('#cartaoMensagemRemover'+product_id).show();
        $j('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000'});
        $j.ajax({
          type: "POST",
          url: "adiciona.php",
          data: {
            product_id: product_id
          },
          dataType: 'json',
          cache : false,
          beforeSend: function () {

          },
          success: function (retorno) {
            var button = $j('#cartaoMensagemRemover'+product_id);
            productSelected = product_id;  


            $j('.item-custom').append('<tr id="trAppend"<?php echo $_product->getId(); ?>><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
            getSubTotal();
            getGrandTotal();
          },
          complete: function () {

          },
          error: function (x,y,z) {
            alert("error");
            alert(x);
            alert(y);
            alert(z);
            window.location.reload();
            history.go(0);
            window.location.href=window.location.href;
          }
      });
    }

    function removeCartaotoCart(itemId){
        productSelected = ""; 
        $j('#cartaoMensagemRemover'+itemId).hide();
        $j('#cartaoMensagem'+itemId).show();
        $j.ajax({
            type:"POST",
            url:"remove.php",
            data:{
                itemId: itemId
            },
            cache: false,
            beforeSend: function(){

            },
            success: function(retorno){
                var button = $j('#cartaoMensagemRemover'+itemId);

                $j('.item-custom #trAppend').remove();
                getSubTotal();
                getGrandTotal();
                alert("Sucess removeCartao");
            },
            complete: function () {
                alert("complete removeCartaotoCart");
            },
            error: function (x,y,z) {
            alert("error");
            alert(x);
            alert(y);
            alert(z);
            window.location.reload();
            history.go(0);
            window.location.href=window.location.href;
          }
        });
    }