CODEWITHSUNDEEP
jqueryajax
Rashad
Rashad

Reputation: 1344

Duplicate AJAX REQUEST issue

I have a button in jquery UI modal dialog. While clicking, the button sends AJAX request and opens html form with submit button inside MODAL DIALOG. 

        $('#buttonid').click(function(){
            var id = $('.sec_id').val();
            $.ajax({
            url: "parts/hesabat_dialog.php",
            cache: false,
            data: {"id": id},

            beforeSend: function() {
             . . .
            },
            success: function(html){
             . . .
            }
            });
            return false;
        });

Then I fill forms and click the submit button(this is not #buttonid), I send another ajax request, all data of forms are sent to the page do.php.

    $('#Formid').submit(function() {
        var data = $('#Formid').serialize();
        var id = $('#id').val();
        var url = 'element.php?id='+id;
        $.ajax({
        type: "POST",
        url: "parts/do.php",
        cache: true,
        data: data,

        beforeSend: function() {

        $('#dialog').append('Loading...');

        },

        success: function(data){
            $("#dialog").load(url);
        }
     });
        $("#Formid").unbind('submit');
        return false;
    });

So, the problem is that if I click the #buttonid 5 or 6 times, then submit request will be sent 6 times. You can say that use unbind. Okay, in this case unbind should help, but you know there are 3 buttons, if i click another button and return again to #buttonid the ajax request will not work, also if I use unbind, then close the modal dialog, and reopen it, ajax request will not work again. HOW TO DISABLE MULTIPLE REQUESTS (do it 1 time) when I submit, although button had been clicked 10 times?

Upvotes: 0

Views: 3026

Answers (3)

Rashad
Rashad

Reputation: 1344

I had included js file in my AJAX HTML file that I am loading. When I reload or clear the HTML from the DOM, it still keeps the script. I moved the script out so it's not part of the HTML that's being loaded.

Upvotes: 1

Amit Acharya
Amit Acharya

Reputation: 461

$(document).ready(function(){
$('.one-click').click(function(){
    if($(this).data('clicked')){
        return false;
    }
    else {
        $(this).data('clicked', true);
        setTimeout(function(){
      $('.one-click').data('clicked', false)
    }, 2000);
    }
});

});

use the data variable to set the data-clicked value to true and return false for subsequent requests, once the call succeeds just make it false again and you are done.

Upvotes: 1

Mathias Dewelde
Mathias Dewelde

Reputation: 705

You could define a variable (outside the scope of your button action), which contains the state of the ajax request.

    var button_ajax_state_sending = false;

    $('#Formid').submit(function() {
     if(!button_ajax_state_sending){ //only start if false (not sending)
            var data = $('#Formid').serialize();
            var id = $('#id').val();
            var url = 'element.php?id='+id;
            $.ajax({
            type: "POST",
            url: "parts/do.php",
            cache: true,
            data: data,

            beforeSend: function() {

            $('#dialog').append('Loading...');
            button_ajax_state_sending = true; // SET TRUE

            },

            success: function(data){
                $("#dialog").load(url);
                button_ajax_state_sending = false; // SET TRUE
            }
      });
      return false;
   });

Upvotes: 0

Related Questions