jquery ajax loop with no reason

Question

I have jquery code to delete data row by row in my table view. When the user click delete icon, conformation box is popup and have "Yes" and "No" button. If "Yes" the row is delete, if "No" close the conformation box and do nothing. The problem is, let say I have 2 row data like this:-

<tr bgcolor=#ACACAC id='ak1'>
<td align='center'>1.</td>
<td>Data 1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td align='center'>
       <img src='image/DocEdit.png' class='editData' id='ID_16'>&nbsp;&nbsp;<img src='image/DocDelete.png' **class='deleteData'** id='**ID_16**'>
    </td>
</tr>

<tr bgcolor=#6D6D6D id='ak1'>
<td align='center'>2.</td>
<td>Data 2</td>
<td></td>
<td></td>
<td></td>
<td align='center'>
       <img src='image/DocEdit.png' class='editData' id='ID_17'>&nbsp;&nbsp;<img src='image/DocDelete.png' **class='deleteData'** id='**ID_17**'>
    </td>
</tr>

So, when I click delete on Data 1, the ID_16 is past to jquery code. Than I click "No" on conformation box. After that, I click delete on Data 2. Now I click "Yes" on conformation box. Data ID_17 deleted from DB, buat after delete ID_17, my jquery will loop and delete ID_16 and all the data that I try to delete before. It's like queue the delete action for the data that I choose "No" on conformation box. Below is my jquery code.

  //.deleteData is class for delete button    
  $('.deleteData').click(function(){

    var idData=$(this).attr('id'); //get data id to delete

    //Fade in the Popup for conformation delete
    $('#cfm-box').fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($('#cfm-box').height() + 24) / 2; 
    var popMargLeft = ($('#cfm-box').width() + 24) / 2;

    $('#cfm-box').css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);


            //if button no click, do nothing
            //#no refer to the button ID no.
            $('#no').click(function(){
        $('#mask , .cfm-popup').fadeOut(300 , function() {
        $('#mask').remove();
        });
    });//end #no


            //if yes click, delete data from db
            //#yes refer to the button ID yes.
            $('#yes').click(function(){

        //parameter to send for delete WHERE statement
                    var tahun = $('#tahunSemasa').val();
        var suku = $('#sukuSemasa').val();

        var dataString = "tahun="+tahun+"&suku="+suku+"&id="+idData+"&action=delete";

        $.ajax({
        type: "POST",
        url: "prestasiProses.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
            alert(html);

            if(html=='true')
            {
               window.location.href="main.php?a=31&tahun="+tahun+"&suku="+suku+"&act=delete";
            }
            else
            {
               alert("Failed!");    
            }
        }
       });

        $('#mask , .cfm-popup').fadeOut(300 , function() {
        $('#mask').remove();
        });

    });//end #yes

});//end .deleteData

Any ideas why this code loop like that?

Thanks for the help

Try to remove yes and no click events from inside deleteData click event. — Ricardo Lohmann
– Ricardo Lohmann, Commented Oct 18, 2012 at 1:02
@RicardoLohmann, I remove yes and no from inside deleteData. It works but how the way I can past the row id ID_16 and others parameter to yes block code to delete that row? — errorare
– errorare, Commented Oct 18, 2012 at 1:13
You can store it into a global var or into a DOM element, like a hidden input. — Ricardo Lohmann
– Ricardo Lohmann, Commented Oct 18, 2012 at 1:16

davehale23 · Accepted Answer · 2012-10-18 01:31:39Z

1

You shouldn't have all that code inside your $('.deleteData').click(function(){. Check out this fiddle to see how I think you should have your code laid out. Notice that I have made the idData a global variable and moved your $('#no').click(function(){ and $('#yes').click(function(){ code to the bottom. My fiddle isn't working because it doesn't have all your includes, but should show you what I mean.

I also moved your mask removal inside your ajax success handler as it seems like you want that to run once your ajax comes back. Is that the case?

EDIT: The problem you are having is because you are binding to items with the deleteData class multiple times. When you run the selector $('.deleteData').click(, you are saying, "get each instance of an element with the class 'deleteData' and then bind this function to it." Since you then had the $('#no').click( and $('#yes').click( INSIDE your $('.deleteData').click( you were binding your $('#no').click( and $('#yes').click( twice. If you had three instances of the 'deleteData', your ajax code would have run 3 times.

edited Oct 18, 2012 at 1:31

answered Oct 18, 2012 at 1:15

davehale23

4,3722 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

errorare Over a year ago

sorry. I do like you suggest and It's work. But I need to know, why if I put this $('#yes').click and $('#no').click inside $('.deleteData').click it will loop? What is the different if I put inside and outside the code? I just want to know so that i'll not repeat the same mistake in the future? Thanks.

davehale23 Over a year ago

I realize that my edit is a little confusing, so if it doesn't make sense, let me know and I will go into further detail.

errorare Over a year ago

Thanks davehale. I learn something from this mistake. Thanks again.

Ricardo Lohmann · Accepted Answer · 2012-10-18 01:40:59Z

1

The problem is that everytime you click deleteData you will bind click to yes and no, to if you click deleteData twice, you bind click to yes and no twice, because it's inside deleteData click event.
So, to prevent this behaviour you have to remove it from inside deleteData event.

You can try this demo.

Type how many binds do you want
Click some text
See how many times it logs the value

edited Oct 18, 2012 at 1:40

answered Oct 18, 2012 at 1:29

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

2 Comments

errorare Over a year ago

Thanks Ricardo. I want to vote for your answer but I have not enough points. Anyway thanks for your helps. :)

Ricardo Lohmann Over a year ago

@errorare No problem, I just want to help you to understand why it happens and how to solve.

Collectives™ on Stack Overflow

jquery ajax loop with no reason

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related