How to prevent repeat sending ajax jQuery?

Question

I have a button

<span class="btn btn-primary" id="open-label"><i class="icon-plus icon-white"></i> Add label</span>

which open modal window (http://twitter.github.com/bootstrap/javascript.html#modals)

<div id="ajax-labels"></div>

<div id="labels-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="header">Add label</h3>
    </div>
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
                <input type="text" id="name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="color">Color</label>
            <div class="controls">
                <input type="text" id="color" name="color" value="#a5f3d4" size="6" class="iColorPicker" />
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="submit-label"><i class="icon-ok icon-white"></i> Add label</button>
    </div>
</div>

<script>

function append_labels() {
    $("#ajax-labels").empty();
    $.ajax({
        url: "/ajax",
        type: "POST",
        cache: false,
        data: {
            type: "get_labels"
        },
        success: function (html) {
            labels = $.parseJSON(html);
            $.each(labels, function () {
                $("#ajax-labels").append('<span class="label" id="' + this.id + '" style="background-color: ' + this.color + '">' + this.name + '<i id="edit-label" class="icon-pencil icon-white"></i></span>   ');
            });
        }
    });
}

$('span#open-label').click(function () {
    $('#labels-modal').modal('show');
    $('#labels-modal #submit-label').click(function () {
        $('#labels-modal #submit-label').prop('disabled', true);

        var name = $('#labels-modal #name').val().trim();
        var color = $('#labels-modal #color').val().trim();

        if (name != '' || color != '') {
            $.ajax({
                url: "/ajax",
                type: "POST",
                cache: false,
                data: {
                    type: "add_label",
                    name: name,
                    color: color
                },
                success: function () {
                    $('#labels-modal').modal('hide');
                    append_labels();
                }
            });
        } else {
            return false;
        }
    });
});

</script>

After filling labels, user click on "Add label" and jquery send request, after sending, script close modal and refresh (on ajax) labels list. Question - if user quick clicks on "Add label", script send form repeatedly and i responce doubles in database. How I Can prevent this?

score 1 · Answer 1 · answered Feb 18 '13 at 20:26

1

Try using one

$('span#open-label').one('click', function () { //...

This will guarantee your modal/ajax function will execute only once.

answered Feb 18 '13 at 20:26

danronmoon

3,814
5
34
56

Yes, you option works good, but only one time :) After add first label, i can't add second... – Nolik Feb 18 '13 at 20:31
So you only want append_labels to happen once? – danronmoon Feb 18 '13 at 20:35

score 0 · Accepted Answer · edited May 23 '17 at 12:18

Disable the form and button on the first click so that the UI does not allow additional clicks. You can do this manually, or use the jQuery Block UI plugin.

Here is another post on how to do this: jquery disable submit button on form submission

Edit:

You are defining a event handler inside of a click handler. So what jQuery is doing is assigning that event handler each time the containing click is fired. So depending on how many times the top level click was executed, will be how many times your AJAX call will fire. Even though it is only 1 click of your button, the previous clicks are the culprit. Extract that click handler definition to outside of the other and you should be good to go.

$('span#open-label').click(function () {
    $('#labels-modal').modal('show');
});

$('#labels-modal #submit-label').click(function () {
    $('#labels-modal #submit-label').prop('disabled', true);

    var name = $('#labels-modal #name').val().trim();
    var color = $('#labels-modal #color').val().trim();

    if (name != '' || color != '') {
        $.ajax({
            url: "/ajax",
            type: "POST",
            cache: false,
            data: {
                type: "add_label",
                name: name,
                color: color
            },
            success: function () {
                $('#labels-modal').modal('hide');
                append_labels();
            }
        });
    } else {
        return false;
    }
});

I do this with this line `$('#labels-modal #submit-label').prop('disabled', true); ` — Nolik, Feb 18 '13 at 20:15
And does the button become disabled? On a side-note, having multiple ID selectors in one is redundant. $("#id1 #id2") will be the same as $("#id2") since IDs are assumed to always be unique. The fastest jQuery selector is to simply provide a single ID. In general, adding additional information will slow down the selector. — Pat Burke, Feb 18 '13 at 20:18
I know that i can use only one val on selector, but, for me, it's easier for to understand ;) And yes, button after click become disabled, but i as it turns to press a few times :) — Nolik, Feb 18 '13 at 20:24

leoinfo · Answer 3 · 2013-02-18T20:45:15.193

0

Add this to the click handler

$('span#open-label').click(function () {

  if( ($(this).attr('clicked') == '1') ) { 
    /* do something else then */ 
    return;
  }
  $(this).attr('clicked', '1');

  $('#labels-modal').modal('show');

This way, the next time you click you could show an alert.

If you want to "re-activate" the "open-label", you just do this :

 $('span#open-label').attr('clicked', '0');

edited Feb 18 '13 at 20:45

answered Feb 18 '13 at 20:39

leoinfo

7,860
8
36
48

How to prevent repeat sending ajax jQuery?

3 Answers3