jQuery的:只提交如果没有AJAX当前页面上运行的形式如果没有、面上、形式、当前页

2023-09-11 22:28:35 作者:白头之吟

在城市输入域模糊我得到通过Ajax请求somne​​thing,并设置为隐藏字段以相同的形式,我市领域所在的价值。

  $('#输入城市)。在('模糊',函数(){
    $阿贾克斯({
        网址:'获得/什么参数= VAL',
        成功:函数(响应){
            $('输入:隐藏[名称=东西])。VAL(响应);
        }
    });
});
 

如果用户模糊休城场有时会因等待时间的隐藏字段没有填充,因为在另一端的SQL时间太长后立即提交表单。

的形式,这两个领域在也通过AJAX提交:

  $('#形式查找用户)。在('提交',函数(){
    如果(NO_AJAX_CURRENTLY_RUNNING_ON_PAGE){
        //做的东西
    }
});
 
基于tp5.1的jquery AJAX post 异步提交

如何检测,如果没有AJAX在页面上运行?这将确保全市AJAX已经完成,隐藏字段填入之前的形式被处理。

修改

其实也不会,只会prevent被提交表单。但如果我能检测到,然后我可以使用的setInterval和不断尝试,直到它运行,因为AJAX是完整的,以运行code。理想情况下会有一些jQuery的是等待,直到其他Ajax完成后再提交。

解决方案

使用jQuery的阿贾克斯活动的。只要所有的Ajax调用使用jQuery生成,你必须知道,如果任何Ajax调用是优秀的一种方式。

  $(文件)。就绪(函数(){
    VAR ajaxBusy = FALSE;

    $(文件).ajaxStart(函数(){
        ajaxBusy = TRUE;
    })。ajaxStop(函数(){
        ajaxBusy = FALSE;
    });
});
 

编辑:

所以,回答你关于直接问我怎么知道是否有任何Ajax调用运行。

另外,你可以运行你的模糊处理程序时禁用表单的提交按钮,然后重新启用它时,你就大功告成了。

  $('#输入城市)。在('模糊',函数(){
    VAR提交= $(本).closest(形式)找到。(:提交:启用');
    submit.prop(禁用,真正的);
    $阿贾克斯('获取/东西?参数= VAL)。完成(功能(响应){
        $('输入:隐藏[名称=东西])。VAL(响应);
    })永远(函数(){
        submit.prop(禁用,假);
    });
});
 

编辑2:

所以,现在我们正处在的地步,我们想推迟表单提交,直到目前所有的Ajax调用已经完成。我们让人们点击提交按钮,但如果有挂起Ajax调用我们没有做任何事情的时候了。

我们可以使用递延的对象,以帮助我们这一点。

  $(文件)。就绪(函数(){
    VAR ajaxDefer = $ .Deferred()解析()。

    $(文件).ajaxStart(函数(){
        ajaxDefer = $ .Deferred();
    })。ajaxStop(函数(){
        ajaxDefer.resolve();
    });

    $('#形式查找用户)。在('提交',函数(){
        ajaxDefer.always(函数(){
            // $ C $其中,C总是会尽快,因为没有执行
            // Ajax调用运行。
            //这个指向延迟的对象(ajaxDefer),所以使用封闭
            //结转你需要的任何变量。
        });
    });
});
 

当我们刚刚开始,我们建立了 ajaxDefer 对象的解决状态。这意味着使用。总是附加任何函数()将立即执行。

在第一个Ajax调用开始,我们有一个新的尚未解决的取代旧的 ajaxDefer 对象。使用任何新功能附加 ajaxDefer.always()将被推迟到以后。

在过去的Ajax调用完成后,我们称之为 ajaxDefer.resolve(),这将导致任何未执行的递延函数来执行。现在,我们又回到了我们最初的状态,在所有新附加功能将立即执行。

当有人试图提交表单,创建一个匿名函数,它的工作,并将其连接到 ajaxDefer 。它将被执行在适当的时候,这取决于是否有优秀的Ajax请求或不上。要留意你的封锁。

When the city input field is blurred I get somnething via an ajax request and set that as the value of a hidden field in the same form that the city field resides in.

$('input#city').on('blur', function() {
    $.ajax({
        url: 'get/something?param=val',
        success: function(response) {
            $('input:hidden[name="something"]').val(response);
        }
    });
});

If the user submits the form immediately after blurring off the city field sometimes due to latency the hidden field is not populated because the SQL on the other end is taking too long.

The form that both these fields are in is also submitted via ajax:

$('form#find-users').on('submit', function() {
    if(NO_AJAX_CURRENTLY_RUNNING_ON_PAGE) {
        // do stuff
    }
});

How to detect if no ajax is running on the page? This will ensure that the city ajax was completed and the hidden field populated before the form is processed.

EDIT

Actually it won't, it will only prevent the form from being submitted. But if I can detect that then I can use a setInterval and keep trying to run that code until it runs because ajax is complete. Ideally there will be something in jQuery that waits until other ajax is complete and then submits.

解决方案

Use jQuery's Ajax Events. As long as all of your Ajax calls are generated using jQuery, you have a way of knowing if any Ajax calls are outstanding.

$(document).ready(function() {
    var ajaxBusy = false;

    $(document).ajaxStart( function() { 
        ajaxBusy = true; 
    }).ajaxStop( function() {
        ajaxBusy = false;
    });
});

Edit:

So that answers your direct question about "How do I know if there is any Ajax call running."

Alternatively, you could disable the form's submit buttons when run your blur handler, and then re-enable it when you're done.

$('input#city').on('blur', function() {
    var submit = $(this).closest('form').find(':submit:enabled');
    submit.prop('disabled', true);
    $.ajax('get/something?param=val').done(function(response) {
        $('input:hidden[name="something"]').val(response);
    }).always(function() {
        submit.prop('disabled', false);
    });
});

Edit 2:

So now we're at the point where we would like to delay the form submission until all current Ajax calls have completed. We let people click on the submit button, but if there are pending Ajax calls we don't do anything right away.

We can use a Deferred object to help us with this.

$(document).ready(function() {
    var ajaxDefer = $.Deferred().resolve();

    $(document).ajaxStart( function() { 
        ajaxDefer = $.Deferred(); 
    }).ajaxStop( function() {
        ajaxDefer.resolve();
    });

    $('form#find-users').on('submit', function() {
        ajaxDefer.always(function() {
            // Code here will always be executed as soon as there are no 
            // Ajax calls running.
            // this points to the deferred object (ajaxDefer), so use the closure
            // to carry over any variables you need.
        });
    });
});

When we're just starting out, we set up our ajaxDefer object in a resolved state. That means any functions attached using .always() will execute immediately.

When the first Ajax call starts, we replace the old ajaxDefer object with a new one that has not been resolved. Any new functions attached using ajaxDefer.always() will be deferred until later.

When the last Ajax call completes, we call ajaxDefer.resolve(), which causes any unexecuted deferred functions to execute. Now we're back to our initial state, where any newly-attached functions will execute immediately.

When somebody tries to submit the form, create an anonymous function that does the work and attach it to ajaxDefer. It will get executed when appropriate, depending on if there are any outstanding Ajax requests or not. Be mindful of your closures.