Question

我正在使用ajax提交文件。

在我从请求中得到答案之前，我会显示一个模态窗口，但如果我的用户在获得答案之前单击模态，则AJAX请求将被取消。我正在寻找一种方法来阻止这种情况。

我正在使用https://github.com/malsup/form/发布ajax

由于

$('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

}

Answer 1

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

没有尝试，但看看它是否有效，只需添加off('submit')即可。

Answer 2

我尝试了一切都没有成功......

请记住，我正在使用带有iframe选项的ajaxSubmit（）。（与IE兼容）。

显然，点击模态实际点击了iframe，导致POST ajax请求被取消。

我决定在没有jquery的情况下自己重新创建一个模态。这就是我现在使用的

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({
    [...]

在AJAX响应之前阻止单击

2 个答案: