Argthtjtr

I’m using Jquery Modal Dialog for submitting some data into the server side and after that saving into database; here my modal dialog code is:

    function loadUserDialog(tag, event, target, id) {

            event.preventDefault();



$.validator.unobtrusive.parse('#frmModalPopup');



            var $loading = $('<img src="@Url.Content("~/Content/images/ajaxLoading.gif")" alt="loading" class="ui-loading-icon" style="margin: 150px 150px;">');

            var $url = $(tag).attr('href');

            var $title = $(tag).attr('title');

            var $dialog = $('<div></div>');

            $dialog.empty();

            $dialog

            .append($loading)

            .load($url)

              .dialog({

                  autoOpen: false

               , title: $title

               , width: 500

               , modal: true

               , minHeight: 400

               , show: 'fade'

               , hide: 'fade'

              });

            $dialog.dialog("option", "buttons", {

                "Submit": function () {

                    var dlg = $(this);

                    if (IsValidUserName() && $('#frmModalPopup').validate().form()) {

                        $.ajax({

                            url: $url,

                            type: 'POST',

                            data: $(target).serialize(),

                            success: function (response) {

                                var cid = $(response).attr('id');

                                if (cid != null && cid != undefined) {

                                    $(response).fadeIn('slow').appendTo(id);

                                    $(window).scrollTop($('#' + cid).offset().top);

                                }



                                dlg.dialog('close');

                                dlg.empty();

                            },

                            error: function (xhr) {

                                alertMessage("EmailId is already in use!");

                                $.validator.unobtrusive.parse('#frmModalPopup');

                            }

                        });

                    }

                },

                "Cancel": function () {

                    $(this).dialog('close');

                    $(this).empty();

                }

            });



            $dialog.dialog('open');

        };

But when I do multiple clicks on Submit button at time (more than once) then form is submitted more than once and I got duplicate data submission information. So could you please tell me how to disable double click or more than once click on button Submit.

Disable the dialog on first submit, check if it is disabled before proceeding, return if already disabled.

"Submit": function () {

  if ($(this).hasClass("disabled"))

    return;



  $(this).addClass("disabled");



  // continue;

}

Edit: You can use this approach to add some additional user interface responsiveness, by adding a "Working..." or some other message when you disable it

$(this).addClass("disabled");

$dialog.append("Working...");

jquery ui has nice function named isOpen().
If dialog is closed but we can see it to prevent next click we can use function isOpen():

"Submit": function () {

    if( $(this).dialog("isOpen") ){

        YOUR CODE           

    } else {

        return false;

    }

    $(this).dialog("close");

}

I need to disable the button for avoid double click but I need the button came back enabled after and async form submitted.

For this I use a window variable, it's not elegant but functional:

function openDialog() {

    window.clickOk = false;

    $("#divAnagrafica").dialog({

      ......

        buttons: [

                {

                    text: "Ok",

                    click: function () {

                        if (window.clickOk === true) {

                            return; 

                        }

                        window.clickOk = true;

                        $("#myForm").submit();

                    }

                },