Prevent click before AJAX response

Question

I'm submitting a file with ajax.

Until I get the answer from the request, I show a modal window, but if my users click on the modal before it get the answer, the AJAX request gets canceled. I'm looking for a way to prevent that.

I'm using https://github.com/malsup/form/ to post with ajax

Full code is here : http://jsfiddle.net/WC9xn/4/

Thanks

$('form').on('submit', function (e) {
// Show loading modal popup
$("#dialog-modal").dialog({
    height: 140,
    modal: true
});

$(".ui-dialog-titlebar").hide();
e.preventDefault();
// prevent native submit
$(this).ajaxSubmit({
    url: '/unitary/import_ajax',
    type: 'post',
    dataType: 'json',
    iframe: true,
    success: function (data) {
        $('#dialog-modal').hide();
        if (data == 'error') {
            alert('error, invalid file');
        } else {
            var event = jQuery.Event;
            submitForm(event, data);
        }
    }
})
});

function submitForm(event, data) {
   //Do some stuff

}

One quick idea: set a css class, eg: `.no-interaction { pointer-events: none; }` on your dialog by default and remove it in your ajax success handler. Or cancel click events while your ajax call is in progress, by using [event.preventDefault() and event.stopPropagation()](http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault) — Nicolae Olariu, Jun 26 '14 at 09:42
bind click to a modal window and then unbind it on ajax success — Mr.TK, Jun 26 '14 at 09:43

score 0 · Answer 1 · answered Jun 26 '14 at 09:44

0

$('form').off('submit').on('submit', function (e) { // Show loading modal popup $("#dialog-modal").dialog({ height: 140, modal: true });

havent tried, but see if it works, just add the off('submit').

answered Jun 26 '14 at 09:44

bumbumpaw

2,522
1
24
54

Thanks but it doesnt change anything. – boby lapointe Jun 26 '14 at 09:47
Actually, what's the aim of this @Niang? Could you explain it? – mitomed Jun 26 '14 at 09:49

score 0 · Accepted Answer · answered Jul 02 '14 at 12:58

I tried everything without success...

Remember that I'm using ajaxSubmit() with iframe option on. (for compatibility with IE).

Apparently, clicking on the modal actually clicks on the iframe witch cause the POST ajax request to get canceled.

I decided to recreate a modal on my own without jquery. Here's what I'm using now

var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="loading_box"></div><span id="loading_txt"><span id="loading_txt">Import...</span>');

$('form').on('submit', function(e) {
    loading.appendTo('body');
    // disable left click
    var event = $(document).click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.stopImmediatePropagation();
    });

    // disable right  click
    $(document).bind('contextmenu', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.stopImmediatePropagation();
    });

    $(this).ajaxSubmit({
    [...]

Prevent click before AJAX response

2 Answers2