2

アップデート：

私が犯したいくつかの間違いにより、画面を更新する実行中のスクリプトと、完了時にページをリロードする未処理の送信の両方を実行できないと誤解されました。

あなたはこれを行うことができます、そして私はそうしました。私が行った方法は、アップデーターを startTimeout に置き、送信を続行させることでした。

    $('#JQF').on('submit', function(){
      start();
      return true;
    });
...
start: 
  function (xhr, s) {
    $(".appMainMsg").hide();
    bar = document.getElementById("ProgressBar");
    if (bar)
    {
      eta = document.getElementById("ProgressBarEta");
      startTime = new Date();
      infoUpdated = 0;
      infoRequested = 0;

      $(bar).empty().progressbar();
      setTimeout(requestInfo, 2);
    }
  },
...

元の質問:

ファイルのアップロードを含むフォームを投稿し、非表示の iframe への応答を対象とするページがあります。iframe の読み込みが完了すると、(メイン) ページで関数が呼び出されます。すべて問題ないようであれば、iframe に読み込まれた本文の内容をメイン ページの本文に移動します。それ以外の場合はそのままにしておきます。jqueryがロードされているので、それを使用したいと思います。

<body>
  <iframe name='ifr' id='ifr' style='display: none;'></iframe>
  <form target='ifr' method='post' action='mypage.php'>
  </form>
  <script>
  function finished()
  { if (iLikeIt) 
    { 
      //replace body contents with ifr.body.contents
      // keeping all event handlers attached
      // something like...

      WHAT DO I PUT HERE?
    }
  }
  </script>
</body>

iframe に読み込まれたページは、次で終了します。

<script>
  setTimeout(parent.finished, 1000); // some time for navel gazing
</script>
4

1 に答える 1

1

これを行うのにiframeは必要ありません。ajaxでフォームを送信することをお勧めします。
jqueryがロードされているので、最も簡単なオプションはjquery-formプラグインを使用することです。

これがあなたが探しているものの実用的な例です：

index.html：

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>

    $(function(){

        // instead of redirecting to upload.php, your form "#form"
        // will now be submitted by ajax and you'll get response
        // content in html parameter of success callback
        $('#form').ajaxForm({
            // you can handle "json" or "xml" content types too
            // @see http://jquery.malsup.com/form/#json
            dataType:  'text',
            success: function(html) {

                // in case you want to replace your document
                // content with the response content
                $(document.body).html(html);
            }
        });



        // This is how you "keep all event handlers attached", with
        // live method instead of bind.
        // So if you have #btn2 element in ajax response, and you replace
        // document content with this ajax response, jquery will auto-bind
        // 'click' event on new #btn2 element
        // Note that you can also use bind, but you'll have to "re-bind"
        // the event manualy (inside "success" callback in this case).
        $("#btn2").live("click", function(){alert("button 2 clicked")});

    });

    </script>
</head>
<body>
    <h1>ajax form:</h1>
    <form id="form" action="upload.php" method="post"> 
        <input type="file" name="file" /> 
        <input type="submit" value="Submit File" /> 
    </form>

    <h1>keeping all event handlers attached exemple:</h1>
    <button id="btn2">click me</button>
</body>
</html>

upload.php：

<?php

    // here you handle your $_FILES, $_POST, $_GET ...


    // html response example:
    header('Content-Type: text/html; charset=utf-8');
    echo '<h1>This is your ajax html response:</h1>';
    echo '<button id="btn1">click me</button>';
    var_dump($_FILES);
    echo '<h1>keeping all event handlers attached exemple:</h1>';
    echo '<button id="btn2">click me</button>';
    echo '<script>

            $(function(){

                // js event handler attached to #btn1
                $("#btn1").bind("click", function(){alert("button 1 clicked")});
            });

        </script>';
于 2012-08-06T16:39:05.030 に答える