Home/ Questions/Q 8340455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T05:11:04+00:00

UPDATE: I was mislead, by some mistake I had made, into thinking that I

  • 0

UPDATE:

I was mislead, by some mistake I had made, into thinking that I could not both have a running script updating the screen AND an outstanding submit that would reload the page upon completion.

You can do this, and I have. The way that I did it was to place my updater on a startTimeout and let the submit continue.

    $('#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);
    }
  },
...

ORIGINAL Question:

I have a page that posts a form with file uploads and targets the response to an hidden iframe. When the iframe finishes loading, it calls a function in the (main) page. If all looks good, I want to move the contents of the body that loaded into the iframe to the main page’s body, else I will just leave things alone. I do have jquery loaded so I’d like to use that.

<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>

The page loaded into the iframe, ends with:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You do not need iframe to do this. I recommend to submit your form by ajax.
    Since you have jquery loaded, the easiest option for you is to use jquery-form plugin.

    Here is a working example of what you are looking for:

    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>';
    • 0