How can I dynamically post data to an iframe in Jquery.
I really need to post data to an Iframe in this case, I cannot use a $.POST because data received is returned sequentially (buffered)
If you have a workaround to make jquery handle data returned by a $.POST 'when it receives the data. I'm very curious!
At the moment I handle it with GETS this way:
var iframe = $('<iframe style="display:none;"></iframe>');
$( "body" ).append(iframe);
iframe.attr('src','server.php?type=getFolders&inode='+nodeData.inode).load(function(){$(this).remove()});
This basically creates a temporary iframe and lets the php inject javascript in it (using ob_flush();flush();
)while it is returning data, then when it's finished, it simply removes the iframe to clean up.
from within the iframe, I access the main frame with window.parent.
then the mainframe's methods.
this is ideal but works with GET, how can I make this work with POST ?
An iframe is used to embed another document inside a html page. If the form is to be submitted to an iframe within the form page, then it can be easily acheived using the target attribute of the tag. Set the target attribute of the form to the name of the iframe tag.
Answer: Use the jQuery contents() method You can use the jQuery contents() method in combination with the find() , val() and html() methods to insert text or HTML inside an iframe body.
Ok, so as this apparently doesn't exist, I created my own solution. Sharing it here in case anybody wants to POST to an iFrame in jQuery.
the js function/ class-like:
function iframeform(url)
{
var object = this;
object.time = new Date().getTime();
object.form = $('<form action="'+url+'" target="iframe'+object.time+'" method="post" style="display:none;" id="form'+object.time+'" name="form'+object.time+'"></form>');
object.addParameter = function(parameter,value)
{
$("<input type='hidden' />")
.attr("name", parameter)
.attr("value", value)
.appendTo(object.form);
}
object.send = function()
{
var iframe = $('<iframe data-time="'+object.time+'" style="display:none;" id="iframe'+object.time+'"></iframe>');
$( "body" ).append(iframe);
$( "body" ).append(object.form);
object.form.submit();
iframe.load(function(){ $('#form'+$(this).data('time')).remove(); $(this).remove(); });
}
}
then when you need to send a form to a temporary iframe :
var dummy = new iframeform('server.php');
dummy.addParameter('type','test');
dummy.addParameter('message','Works...');
dummy.send();
This is the server.php example file :
if($_POST[type] == 'test')
{
header( 'Content-type: text/html; charset=utf-8' );
echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';
echo str_pad('',4096); //fill browser buffer
for($i = 0; $i < 10; $i++)
{
echo '<script type="text/javascript">window.parent.console.log(\''.$_POST[message].'\');</script>';
ob_flush(); flush();
usleep(350000);
}
}
And the result is as expected:
the main frame's console outputs the string 'Works...' every 350ms starting immediately, even if the php is still running.
When the php is finished sending the chunks, it simply removes the temporary form and the temporary iframe.
This function creates a temporary form, then send data using jQuery :
function postToIframe(data,url,target){
$('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
$.each(data,function(n,v){
$('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
});
$('#postToIframe').submit().remove();
}
target is the 'name' attr of the target iFrame, and data is a JS object :
data={last_name:'Smith',first_name:'John'}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With