Использование кнопки внутри фрейма, чтобы перезагрузить DIV вне фрейма

Question

я в настоящее время:

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

Все это загружается в IFRAME с помощью SRC =, Когда я нажимаю кнопку отправки я хочу, чтобы это сделать (что он сейчас делает), то я бы хотел, чтобы он перезагружал News.php в Div1, чтобы показать обновленный файл, любые идеи о том, как это сделать?

Answer 1

Итак, проблема заключается в том, что ваша форма отправляется до истечения времени ожидания функции.

Вы должны использовать jQuery для отправки формы (jQuery submit) с помощью event.preventDefault(), чтобы остановить отправку кнопки с момента фактической перезагрузки страницы.

это может быть сделано путем изменения кода, как так:

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>

(решаемые в чате с некоторыми другими небольшими изменениями, это был последний рабочий код, хотя)

Answer 2

Для того, чтобы вызвать #doReload «s нажмите Обратный вызов, попытайтесь поместить скрипт после разметки:

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

или завернув в $(document).ready(function() { ... });

Но поскольку (AFAIK) не существует обратного вызова на html, вы можете сделать сообщение с помощью jQuery's $.post, а затем использовать его обратный вызов success для получения новых данных.