提交jquery ajax帖子时加载栏，不显示

Question

我使用的是jQuery UI dialog modal form。

一切都很好，但我发送了一篇ajax帖子，所以我添加了以下代码：

$( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 500,
            width: 550,
            modal: true,
            buttons: {
                "Create an account": function() {

                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    if ( bValid ) {
                            $.ajax({ url: 'about.php',
                                 data: {name: name.val(), email: email.val()},
                             type: 'post',
                             async: false
                        });
                                    }
                                }
                            }
                        });

$.ajax部分就是我添加的部分。我想在处理帖子时显示一个加载栏，我添加了以下代码：

$('#progress')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

但是它不工作，我的帖子转到一个php脚本，其中一个有2秒的等待时间。它只是没有显示#progress div，所以.hide正常工作。

此外，例如，如果我在$.ajax之前添加了$( "#dialog-form" ).dialog({ hide: "slide" });，它将不起作用，一旦完成所有按钮功能，它就会隐藏起来。

谢谢。

Answer 1

如果您#progress div只在此ajax调用期间显示，为什么不将show/hide操作放在按钮操作上呢？

如下所示：

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 500,
        width: 550,
        modal: true,
        buttons: {
            "Create an account": function() {

                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                if ( bValid ) {
                        // show before ajax call
                        $('#progress').show();

                        $.ajax({ url: 'about.php',
                             data: {name: name.val(), email: email.val()},
                             type: 'post',
                             async: true,
                             complete: function() {
                                 //hide on complete
                                 $('#progress').hide();
                             }
                     });
              }
        }
    }
});

希望这能有所帮助。