overflowers here is the daily question. =)
Use case & problem description:
- I'm submitting a form via jQuery $.ajax({...})
- The ajax post call trigger an SQL insert done by php.
- The SQL query is executed successfully and can be checked on the DB.
- The iframe which is used to display the result didn't get update.
- original button attached to form used target="id_of_iframe"*
- The post destination is in the same url, same target (my_iframe)
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:
- The chrome console log this warning about jquery.min.js:4
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/.
- Some CSS get buggy and some font/font-weight change
PS In the ajax.success function I've tried this alternative but the issue is the same:
$('#my_iframe').append(result);
