Question

一切都很棒，但我发了一个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正在运行。

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

感谢。

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

希望这会有所帮助。

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

1 个答案: