2

我正在使用jQuery UI 对话框模式表单。

一切都很好，但我发送了一个 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();
    });

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

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

谢谢。

4

1 回答 1

0

如果您#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();
                             }
                     });
              }
        }
    }
});

希望这会有所帮助。

于 2012-10-03T11:59:02.007 回答