Preventing multiple clicks till record is deleted

Question

I have a HTML table. For each row there is a record in the database, also on each row I have a delete button (image icon).

On delete I use Ajax request to delete the record from the database On success, I display a message and I hide()/remove() the row from the table.

It works fine. BUT if I click real FAST on multiple rows, the records get deleted ok, but some of the rows are still displayed.

I have my click function attached to a class

$(".tog").click(function(e){ ...

I already read about jQuery's "toggleClass(), delay()", those did not work.

Any ideas?

score 5 · Accepted Answer · answered Feb 21 '12 at 10:18

you can use http://jquery.malsup.com/block/#demos plugin while ajax request is going on.

$.ajaxSetup({
    cache:false,
    beforeSend: function() {
       $('#content').block({ 
              message: ''
            }); 
    },
    complete: function(){
        $('#content').unblock(); 
    },
    success: function() {}
    });

replace #content with you master div ID

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Its not recommended, but with Jquery.ajax, you can use an option of async:false.

By this, the user wont be able to perform any action on the browser, but the browser may temporarily appear to be hung.

You can also consider displaying an overlay to the user, until your request is completed. By this the browser wont be hanged and you can display some in-progress message to the user too.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 21 '12 at 10:08

linuxeasy

6,269
7
33
40

score 0 · Answer 3 · answered Feb 21 '12 at 10:18

0

In function click you disable events

$(".tog").click(function () { $(this).unbind() ...

Activate after if necessary

answered Feb 21 '12 at 10:18

Jones

1,480
19
34

Preventing multiple clicks till record is deleted

3 Answers3