Doubt validate .click () out of function () jQuery

Question

Doubt validate .click () out of function () jQuery

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I need to validate if button with class .pop-yes has been clicked, but I need to validate this out of the .click() event so that the $(this).parent [...] line is executed.

The way it's here, it runs before I click on .pop-yes , and if I put it inside the .click() function, it just does not run.

$(function() {
    // .delete recebe o id que devo deletar..
    $(".delete").click(function(){
    var element = $(this);
    var id = element.attr("id");
    var info = 'id=' + id;

    $('.pop').fadeIn("slow");

    $('.pop-no').click(function(){
        $('.pop').fadeOut("slow");
    });

    //Aqui eu clico para confirmar o delete
    $('.pop-yes').click(function(){

        $('.pop').fadeOut("slow");

        $.ajax({
            type: "POST",
            url: "/removeClient",
            data: info,
            success: function () {
                return true;
            }
        });
    });

    // aqui faz a row da table sumir sem carregar a página
    // porem eu só quero que ela seja executada caso o .pop-yes.click() seja true
    // Se eu coloco ela dentro da .pop-yes.click() ela não funciona acho que não encontra a #show
    $(this).parents("#show").animate({backgroundColor: "#003"}, "slow").animate({opacity: "hide"}, "slow");

    });
});

Part of code html :

<tr id="show" class="tr_<?= $client['id'];?>">
     <td><?= $client['name']; ?></td>
     <td><?= $client['email']; ?></td>
     <td><?= $client['nickname']; ?></td>
     <td><?= $client['hour_value']; ?></td>
     <td><?= $client['discount']; ?></td>
     <td><?= $client['date_pagment']; ?></td>
     <td><?= $client['cep']; ?></td>
     <td class="text-center">
         <button id="<?= $client['id']; ?>" class="delete glyphicon glyphicon-remove"></button>
     </td>
 </tr>

 <!-- Modal -->
<div class="pop">
    <div class="pop-up">
        <h4>Message <?= $client['name']; ?> </h4>
        <button class="btn btn-danger pop-no" >Não</button>
        <button class="btn btn-primary pop-yes">Sim</button>
    </div>
</div>

jquery ajax

asked by anonymous 19.04.2017 / 16:38

3 answers

Files crt * .o in C Execute function only when user releases input type="range"?

score 1 · Answer 1

Since the function of .pop-no is only to hide the element of class .pop , you only need to check if .pop is being shown or not when clicking .pop-yes .

How to check? Use the is(':visible') function of jQuery, see the example below and apply it to your example.

$('.pop-yes').click(function() {
  //...//
  var popEstaVisivel = $('.pop').is(':visible');
  if (!popEstaVisivel)//checa se .pop não está visível
    $(this).parents("#show").animate({...});
});

score 1 · Answer 2

Try the following ( script ):

 $(function() {

     // .delete recebe o id que devo deletar..
     $(".delete").click(function(){
          id = $(this).attr("id");
          info = 'id=' + id;

          $('.pop').fadeIn("slow");
     });

     $('.pop-no').click(function(){
         $('.pop').fadeOut("slow");
     });

     //Aqui eu clico para confirmar o delete
     $('.pop-yes').click(function(){

         $('.pop').fadeOut("slow");

         $.ajax({
             type: "POST",
             url: "/removeClient",
             data: info,
             success: function () {
                 return true;
             }
         });

          // aqui faz a row da table sumir sem carregar a página
          // porem eu só quero que ela seja executada caso o .pop-yes.click() seja true
          // Se eu coloco ela dentro da .pop-yes.click() ela não funciona acho que não encontra a #show
          $(this).parents().animate({backgroundColor: "#003"}, "slow").animate({opacity: "hide"}, "slow");

     });


 });

HTML :

<div class="pop" style="display: none;">
    <div class="pop-up">
        <h4>Message <?= $client['name']; ?></h4>
        <button class="btn btn-danger pop-no" >Não</button>
        <button class="btn btn-primary pop-yes">Sim</button>
    </div>
</div>

PS: There's no way I can test without the full code. I made the changes that I believe will work. Use comments to suggest change / correction.

score 0 · Answer 3

First of all I thank all those who tried to help me, the problem was solved in the following way:

$(function() {
    $(".delete").click(function(){
        id = $(this).attr("id");
        info = 'id=' + id;

        $('.pop').fadeIn("slow");
    });

    $('.pop-yes').click(function(){

        $('.pop').fadeOut("slow");

        $('.delete').parents(".tr_"+ id).animate({backgroundColor: "#003"}, "slow").animate({opacity: "hide"}, "slow");

        $.ajax({
            type: "POST",
            url: "/removeClient",
            data: info
        });
    });

    $('.pop-no').click(function(){
        $('.pop').fadeOut("slow");
    });
});

HTML code:

<tr class="tr_<?= $client['id'];?>">
    <td><?= $client['name']; ?></td>
    <td><?= $client['email']; ?></td>
    <td><?= $client['nickname']; ?></td>
    <td><?= $client['hour_value']; ?></td>
    <td><?= $client['discount']; ?></td>
    <td><?= $client['date_pagment']; ?></td>
    <td><?= $client['cep']; ?></td>
    <td class="text-center"><button id="<?= $client['id']; ?>" class="delete glyphicon glyphicon-remove"></button></td>
</tr>

<!-- Modal -->
<div class="pop" style="display: none;">
    <div class="pop-up">
        <h4>Message <?= $client['name']; ?></h4>
        <button class="btn btn-danger pop-no" >Não</button>
        <button class="btn btn-primary pop-yes">Sim</button>
    </div>
</div>