Using a button inside an iframe to reload a div outside the iframe

Question

I currently have:

<script>
var btn = document.getElementById("doReload");
btn.onclick = function(){

    setTimeout(function(){
        $("#div1").load("News.php");
    }, 5000);
}

</script>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input id="doReload" type="submit"/>
</form>

All of this is loaded in an iframe using src=, When I click the submit button i want it to do a file upload (Which it currently does), then i would like it to reload News.php into Div1 to show the updated file, any ideas on how to do this?

You might need to reload the whole page... Use `top.location.replace("http://example.com/");` to do that. — TRGWII, Feb 18 '15 at 00:05
@TRGWII I can't i load a index page and a user presses a button that loads content into that page, I just need to be able to reload that content — Mark Shaw, Feb 18 '15 at 00:14
Just run the same function you used to load the initial content? — TRGWII, Feb 18 '15 at 00:17
Also, do you absolutely need to use frames? http://stackoverflow.com/q/362730/ — TRGWII, Feb 18 '15 at 00:22
@TRGWII I would prefer to so i do not need to reload the page — Mark Shaw, Feb 18 '15 at 00:26
Ok, http://crapaudhall.com/admin/ this may help, I am working under the news button — Mark Shaw, Feb 18 '15 at 00:31

mgamba · Answer 1 · 2015-02-18T00:08:24.110

In order to trigger #doReload's click callback, try putting your script after the markup:

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input id="doReload" type="submit"/>
</form>
<script>
var btn = document.getElementById("doReload");
btn.onclick = function(){

    setTimeout(function(){
        $("#div1").load("News.php");
    }, 5000);
}

</script>

or wrapping it in $( document ).ready(function() { ... });

But since (afaik) there isn't a callback on html form submission success, you may want to do the post using jQuery's $.post and then use its success callback to retrieve the new data.

TRGWII · Accepted Answer · 2015-02-18T02:04:58.510

1

Ok, so the problem is that your form is submitting before the timeout executes the function.

You should use jQuery to submit the form (jQuery submit) with event.preventDefault() to stop the submit-button from actually reloading the page.

this can be done by changing the code like so:

document.getElementById("doReload").addEventListener("click", function(e) {
  e.preventDefault();
  var form = this.parentElement;
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action);
  xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState == 4 && xhr.status == 200) $("#div1").load("News.php");
  })
  xhr.send(new FormData(form));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form action="upload/" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" />
  <input id="doReload" type="submit" />
</form>

(Solved on chat with some other small modifications, this was the final working code though)

edited Feb 18 '15 at 02:04

answered Feb 18 '15 at 00:37

TRGWII

648
5
14

That does not appear to work? Can you see if i did something wrong? – Mark Shaw Feb 18 '15 at 00:48
Eh, I tested the upload functionality a bit... :P – TRGWII Feb 18 '15 at 00:55
Still doesn't appear to work? Although it should i think, not sure what the issue is? Does anyone see it? – Mark Shaw Feb 18 '15 at 00:55
You can delete what you upload right there. Its a content editable div, simply delete the pictures from the div and then hit Save. – Mark Shaw Feb 18 '15 at 00:57
Try now, you still put the script before the html :P – TRGWII Feb 18 '15 at 00:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71123/discussion-between-mark-shaw-and-trgwii). – Mark Shaw Feb 18 '15 at 01:03

Using a button inside an iframe to reload a div outside the iframe

2 Answers2