javascript - 提交 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 Action 放在你的按钮 Action ？

像这样:

$( "#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();
                             }
                     });
              }
        }
    }
});

希望这会有所帮助。