2

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

しかし、うまくいきません。私の投稿は、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 に答える