使用iframe内的按钮在iframe外部重新加载div

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?

Answer 1

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.

Answer 2

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)