Doubt validate . click() outside of Function() jQuery

Question

Doubt validate . click() outside of Function() jQuery

Asked 7 years, 7 months ago

Viewed 186 times

0

I need to validate if the button with class .pop-yes was clicked, but I need to validate this outside the event .click() so that the code line $(this).parent [...] be executed.

The way it is here, it runs before I click the .pop-yes and, if I put it inside the Function .click(), she simply is not executed.

$(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 the 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>

2

What is this code executed before? And if it is the way it is in the question, why doesn’t it use this code? Does it make a mistake? If so, what’s the mistake? Be clearer in your question, please.

– Woss

2017/04/19 at 14:58
Dude is this last line $(this). parents ... she is the one who makes the table line that will be deleted disappear.. the way this one disappears right before I confirm the deletion, but if I update the page it comes back. if I put it inside the event . click() it doesn’t work understand? I’ve tried to make an if out of the event to validate.. but it didn’t work.. Thanks.!

– wDrik

2017/04/19 at 15:05
I think the problem is $(function() {}); if you remove it your code should work correctly. I believe that the way it is the browser will not interpret correctly.

– Raizant

2017/04/19 at 15:15
@Knautiluz this is part of jQuery and is correct this way. Drik, edit your question and put your problem completely, including the HTML part and describe exactly what you want to do. As it stands, your code is, to say the least, confusing.

– Woss

2017/04/19 at 15:22
To .pop-yes.click is inside the .delete.click, that is correct?

– sNniffer

2017/04/19 at 15:24
yes because it needs to receive the id values from . delete

– wDrik

2017/04/19 at 15:27
I edited the question, tried to be clearer with my doubt.. I thank you!

– wDrik

2017/04/19 at 15:38
Where is the element .pop-yes? You will probably have to play the code inside the event click (whether it should run with the click, should be inside this event), but it seems to me that you just tried to cut and paste the code into the function, without adapting it. You’ll probably have to change the part $(this).patents, for the this will change reference.

– Woss

2017/04/19 at 15:41
Exactly however, within the element . click() the var of . delete is not found and $this.parents() is not executed.. off it runs the right way but runs before the . pop-yes is clicked, I just wanted a way to validate the . click() outside the event there would work the way expected, you left me but confused of what was already, and no, I did not cut and paste, I’m just new to ajax + jquery.. but thanks for trying to help...!

– wDrik

2017/04/19 at 15:50

Show 4 more comments

3 answers

Browser other questions tagged jquery ajax

You are not signed in. Login or sign up in order to post.

by LipESprY • **4,525** points · Answer 1 · 2017-04-19T15:58:28+00:00

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 is no way I can test without the full code. I made the changes that I believe will work. Use comments to suggest change/fix.

by Pedro Camara Junior • **6,637** points · Answer 2 · 2017-04-19T16:02:08+00:00

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

How to check? Use the function is(':visible') 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({...});
});

by wDrik • **1,406** points · Answer 3 · 2017-04-19T17:25:30+00:00

First thank you to all 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>