overflowers here is the daily question. =)
Use case & problem description:
So,
How do I update the iframe with the result data of the $.ajax post?
Should I add some other controls?
Some other form submission method with editable post data compliant with iframe?
Thanks to all in advance, have a nice coding-day :)
The code:
HTML
<html>
<head>
...
</head>
<body>
<!--the iframe -->
<iframe src ="iframe.php"
class="my_iframe" id="my_iframe"
name="my_iframe" frameborder="0" allowtransparency="true">
</iframe>
<!--the form -->
<form id="my_form" action="iframe.php"
method="post" target="my_iframe">
<!-- some input fields -->
<button onclick="my_function"></button>
</form>
</body>
</html>
JAVASCRIPT - JQUERY
function my_function(){
var my_data = .../*go collect form data*/
$.ajax({
type: "POST",
url: "iframe.php",
data: my_data,
success:function(response){
$("#my_frame").html(response);
}
});
}
Partial Result:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
PS In the ajax.success function I've tried this alternative but the issue is the same:
$('#my_iframe').append(result);
To update the iframe you can just update it's src
attribute like so:
$('iframe#my_iframe').attr('src', 'iframe.php');
put this in your ajax success
callback. and the iframe will reload.