Changing button function via jQuery

Navigation
1

I have some buttons that in the click of the same directs an ajax request to an external file that adds a product, however this does not matter much in this case. I manipulate these buttons, and every time the button with span buy, where in the click of the same, span is changed to remove and when the remove button is clicked the span is changed again to buy. I need every time that the buy button is clicked, all of them are disabled for the click minus the button that has span remove, so that it is clicked, span is changed to buy and that the other buttons can now be clicked again.

Button code: 

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

Ajax request code: 

function addCartao(product_id){
                $j.ajax({
                  type: "POST",
                  url: "teste.php",
                  data: {
                    product_id: product_id
                  },
                  dataType: 'json',
                  cache : false,
                  beforeSend: function () {

                  },
                  success: function (retorno) {
                    var button = $j('button[name=cartaoMensagem' + product_id + ']');

                    if($j(button).text() == '<span><span>Comprar</span></span>'){
                        $j('#cartao').find(':button').attr('disabled',true);
                        $j(button).html('<span>Remover</span>');
                    }else{
                        $j(button).html('<span>Comprar</span>');
                    }
                  },
                  complete: function () {

                  },
                  error: function (x,y,z) {
                    alert("error");
                    alert(x);
                    alert(y);
                    alert(z);
                  }
              });
            }

Note: The code I made disabled all the buttons inside the card div, which are the ones that are in the question, but how they are disabled, at the click of the button that has span remove , it does not do any kind of action.

    
asked by anonymous 30.08.2017 / 22:53

2 answers

1

In this case, you need to move to the function that was clicked, then delete it from the list of buttons to disable.

Here is an example of logic: 

function addCartao(product_id, botaoClicado){

  if($(botaoClicado).text() == 'Comprar'){
    $('#cartao').find(':button').not(botaoClicado).attr('disabled',true);
    $(botaoClicado).html('<span>Remover</span>');
  }else{
    $('#cartao').find(':button').attr('disabled',false);
    $(botaoClicado).html('<span>Comprar</span>');
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="cartao">
<button type="button" class="button btn-cart" onclick="addCartao('1', this)" name="cartaoMensagem1" id="cartaoMensagem"><span><span>Comprar</span></span></button>
<button type="button" class="button btn-cart" onclick="addCartao('2', this)" name="cartaoMensagem2" id="cartaoMensagem"><span><span>Comprar</span></span></button>
<button type="button" class="button btn-cart" onclick="addCartao('3', this)" name="cartaoMensagem3" id="cartaoMensagem"><span><span>Comprar</span></span></button>
</div>
    
30.08.2017 / 23:01
1

I understood your purpose in the other question (I even put the complete answer there).

First, assign a id to each button ( id must be unique in the document). You can do this: 

id="cartaoMensagem<?php echo $_product->getId(); ?>"

And with this code in :success you will get the expected result: 

i = $j("#cartaoMensagem"+product_id);
i.text() == "Comprar" ?
( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled') )
:
( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled') );
  

If you will use the above code, remove the code below your :success : 

var button = $j('button[name=cartaoMensagem' + product_id + ']');

                    if($j(button).text() == '<span><span>Comprar</span></span>'){
                        $j('#cartao').find(':button').attr('disabled',true);
                        $j(button).html('<span>Remover</span>');
                    }else{
                        $j(button).html('<span>Comprar</span>');
                    }

Include a function in the IF / ELSE:

No IF: 

i.text() == "Comprar" ?
    ( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled'), funcao() )
    :
    ( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled') );

No ELSE: 

i.text() == "Comprar" ?
    ( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled') )
    :
    ( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled'), funcao() );
    
30.08.2017 / 23:03
How to use SUM in a string field, converting the value to int? Sum of the multiplication of the quantity by value of the product in daily sales