CODEWITHSUNDEEP
javascriptjqueryajaxwordpress
A Kumar
A Kumar

Reputation: 53

Prevent multiple ajax submissions on multiple clicks

I've a WordPress blog running this jQuery code that allows users to click a bookmark link that saves the post as a bookmark. Each post shows a total bookmark counter that looks like: "Bookmarked (5)". Although this code works, it registers multiple clicks whenever someone clicks multiple times on the bookmark link and then saves the same post as multiple bookmarks. When the user tries to remove the bookmark by clicking on the bookmark link again, it registers multiple clicks again and the counter starts showing minus numbers which looks like: "Bookmarked (-5)".

I've been searching for an instruction on how to prevent this from happening so that the bookmark counter never runs minus and the user can't bookmark the same post multiple times but had no success so far.

Here is the jQuery code that I'm using:

jQuery(document).ready( function($) {

var added_message = upb_vars.added_message;
var delete_message = upb_vars.delete_message

$(document).on('click', '.upb_add_bookmark', function () {

    var post_id = $(this).attr('rel');
    var data = {
        action: 'bookmark_post',
        post_read: post_id
    };
    $.post(upb_vars.ajaxurl, data, function(response) {

        $('.upb_bookmark_control_'+post_id).toggle();
        if($('.upb-bookmarks-list').length > 0 ) {
            var bookmark_data = {
                action: 'insert_bookmark',
                post_id: post_id
            };
            $.post(upb_vars.ajaxurl, bookmark_data, function(bookmark) {
                $(bookmark).appendTo('.upb-bookmarks-list');
                $('.no-bookmarks').fadeOut();
            });
        }
    });
    return false;
});

$(document).on('click', '.upb_del_bookmark', function () {

        var post_id = $(this).attr('rel');
        var data = {
            action: 'del_bookmark',
            del_post_id: post_id
        };
        $.post(upb_vars.ajaxurl, data, function(response) {
            $('.bookmark-'+post_id).fadeOut();
            $('.upb_bookmark_control_'+post_id).toggle();
        });

    return false;
});
});

Could you please help me solve this problem?

Thanks a lot!

Upvotes: 4

Views: 152

Answers (1)

parchment
parchment

Reputation: 4002

One way is to add a .disabled class to your link before the $.post().

// Before ajax...
if ($(this).hasClass('disabled')) {
    return false;
} else {
    $(this).addClass('disabled');
}
// Make sure we refer to the same element
var that = this;

// On post success...
$(that).removeClass('disabled');

Upvotes: 5

Related Questions