I am using jQuery with .load function to update count, however if the button is clicked so fast, it can be hacked. Also I can't use unbind as this makes the button unusable after the first click.

Here is the jQuery I use when button is clicked.

<script type="text/javascript">
$(function() {

    // update "likes" of a post
    $(".bubble-like a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-like').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
    });

    // remove my like from a post
    $(".bubble-unlike a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-liked').fadeOut(200);
        $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
    });

});
</script>

If I clicked on like too fast or vice versa, the load is executed more than once. I also explained that unbind does not help.

Any idea?

UPDATE

I am not sure if I am doing that correct, but it seems to resolve it in my case.. can anyone correct/make me wrong ?

I added this line to my click handlers

// update "likes" of a post
$(".bubble-like a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});

// remove my like from a post
$(".bubble-unlike a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-liked').fadeOut(200);
    $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});

I added this line to my loaded scripts add_post_like and remove_post_like:

$('.bubble a').show();

Now it seems to accept only one click.. Is that reliable?

I am using jQuery with .load function to update count, however if the button is clicked so fast, it can be hacked. Also I can't use unbind as this makes the button unusable after the first click.

Here is the jQuery I use when button is clicked.

<script type="text/javascript">
$(function() {

    // update "likes" of a post
    $(".bubble-like a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-like').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
    });

    // remove my like from a post
    $(".bubble-unlike a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-liked').fadeOut(200);
        $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
    });

});
</script>

If I clicked on like too fast or vice versa, the load is executed more than once. I also explained that unbind does not help.

Any idea?

UPDATE

I am not sure if I am doing that correct, but it seems to resolve it in my case.. can anyone correct/make me wrong ?

I added this line to my click handlers

// update "likes" of a post
$(".bubble-like a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});

// remove my like from a post
$(".bubble-unlike a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-liked').fadeOut(200);
    $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});

I added this line to my loaded scripts add_post_like and remove_post_like:

$('.bubble a').show();

Now it seems to accept only one click.. Is that reliable?

• javascript
• jquery

• 1 Note, this doesn't get you away from needing server side validation. It is trivial to spam those responses programmatically. – Andrew Commented May 17, 2012 at 16:50

5 Answers 5

You can disable the click event whenever the button is clicked til the end of loading process. Then activate the event after it's pleted within the callback function.

gory details: http://api.jquery./load/

UPDATE:

I've made a quick example for you: http://jsfiddle/hvfc5/1/

As you click the button, it would firstly remove the event binding on the button, then bind it back again after the image loaded. But if you click it again after this, you'd figure that the event still can be unbinded, but it never es back. It's because the image has been loaded, therefore the load() function won't even be triggered.

This is just a demo sample for you to understand how to manipulate things, you still need to customize your own version as demanded.

You can disable the button as it is clicked and enable on when other button is clicked like toggle e.g. When likes is clicked disable it and enable unlike and vice versa.

The one() function es to mind.

http://api.jquery./one/

Yes: first action of button click would be disabling the button itself. That way, fast clicks are no longer possible. Of course, you,'d have to re-enable the button after the load.

Update

Sigh... It's all about teh codez right?

$(".bubble-like a").click(function() {
    $(".bubble-like a").attr('disabled', 'disabled');
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, 
                            function(){
                              $(".bubble-like a").removeAttr('disabled');
                            });
});

 $(".bubble-like a").click(function() {
  var button = $(this);
   $(this).wrap($('<button/>', {
                                "class" : "disButton",
                                 disabled: true,
                                 width: button.width()
                               }
                   )); // wrap the anchor with button with disabled property
  ...
  ..
  $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, function() {
    button.unwrap(); // remove the wrapping button
  });
});

You have to right some css to make the button look like a simple text. For example,

button.disButton {
  border: none;
  background: transparent;
}

button.disButton a{
  color: #ddd;
  text-decoration: none;
}