0

ここに私がしていることとその理由を簡単に示します。

  1. ユーザー入力に応じてさまざまなスクリプトで前処理されたフォームがあります
  2. 通常、スクリプトは数秒以内に実行されますが、サーバーの負荷などによっては、1 つのスクリプトに 10 秒程度かかる場合があります。
  3. ここで、「しばらくお待ちください...」を含むこの「ポップアップ」を実装したいと思います。そのためにblockUIを使用しています-これを実装するための簡単なプラグイン。
  4. ただし、スクリプトを高速に実行するための blockUI は非常にばかげており、画面上でポップアップが点滅するだけです。
  5. したがって、1000ms などのタイムアウトを設定して、フォームが既に完了していても blockUI が表示されるようにします。
  6. これまでかなり多くのことを試してきましたが、今では基本的に preventDefault を使用して setTimeout のフォーム送信をキャンセルしていますが、その後フォーム送信を完了できません。

編集：javascriptは非同期言語であるため、preventDefault（フォームの送信を停止）なしではsetTimeoutが起動せず、アクションがすぐにtrueを返すことがわかりました。

<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
    <input type="submit" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>

$('#my_submit').click(function(event) {
    $.blockUI({
        message: $('#form_loading_message')
    });
    var form = $('#my_form');
    event.preventDefault();
    setTimeout(function () {
        form.unbind('submit').submit();
        $.unblockUI();
    }, 1000);
});

これを行う方法についてより良いアイデアがある場合は、他の提案も受け付けています...

4

2 に答える 2

0

blockUI には慣れていませんが、次のようにします。

<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#my_submit').click(function() {
                    $('#form_loading_message').show();
                    setTimeout('submitForm()', 1000);
                });
            });

            function submitForm(){
                $('#my_form').submit();
            }

        </script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
    <input type="button" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>
</body>
</html>
于 2013-10-01T15:17:07.233 に答える
0

javascript でこれを行う方法がわからなかったので、ユーザーを別のページにリダイレクトする前に php sleep() 関数を使用しました。送信アクションをブロックしたため、当然 preventDefault を削除する必要がありました。このソリューションは、私のユースケースを解決します。ページが読み込まれているというメッセージをユーザーに表示するだけです。

于 2013-10-02T14:20:31.533 に答える