CODEWITHSUNDEEP
javascriptphpjqueryhtmliframe
Vincent Duprez
Vincent Duprez

Reputation: 3882

How to post data to iframe with Jquery

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 ?

Upvotes: 13

Views: 70612

Answers (3)

Dr Fred
Dr Fred

Reputation: 989

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

Upvotes: 30

Vincent Duprez
Vincent Duprez

Reputation: 3882

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.

Upvotes: 18

Sunil Verma
Sunil Verma

Reputation: 2500

Either you can use target method or use AJAX for the above work

<form action="..." target="an_iframe" type="post">
    <input type="text" name="cmd" placeholder="type a command here..." />
    <input type="submit" value="Run!" />
</form>
<iframe id="an_iframe"></iframe>

Upvotes: 2

Related Questions