dynamic iframe in ui.dialog

I'm trying to dynamically create an iframe in my dialog and I have it working but not really because I only works sometimes here is the code

 function test(obj){
    if($('#wa').length === 0){ // check if we have already created iframe and dialog
        $('body').append('<div id="wa"></div>'); //add a div for the the iframe to go into
        $("#wa").dialog({  //apply a ui dialog
            autoOpen: false,
            bgiframe: false,
            modal: true,
            autoResize: true,
            buttons: {
                Submit: function() {
                    $('#iframe').contents().find('#f').submit();
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
           }    
        });
    }

    $('#iframe').remove();
    var $frame = $('<iframe id="iframe" width="100%" height="325"></iframe>');
    $('#wa').append($frame); // add iframe to created div
     var tm2 = setTimeout( function() {//apply content to iframe
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $body.html('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;'+
        '<html xmlns="http://www.w3.org/1999/xhtml"&gt;'+
        '<head>'+
        '<title>test iframe</title>'+
        '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
        '<meta http-equiv="Content-Language" content="en-us" />'+
        '<form name="f" id="f" action="https://example.com" enctype="application/x-www-form-urlencoded" method="post">'+
            '<fieldset>'+
                '<label>test1:</label>'+
                '<input type="text" name="test1" value="" size="15" class="required"/>'+
                '<label>test2:</label>'+
                '<input type="text" name="test2" value="" size="15" autocomplete="off" class="required" />'+
                '<input type="submit" value="Login" />'+
            '</fieldset>'+
        '</form></body></html>');
    }, 1 );

    $("#wa").dialog('open');//open the dialog
 }

 $('body').append('<input type="button" id="test" value="test" />');
 $('#test').click(function(){
    test();
 });

no - I don't need another plugin infact it would defeat the purpose notice that the iframe source is empty I'm trying to populate the iframe aafter it has been appended to the parent body thank you though

mcgrailm 2010-03-11 17:17:22

+1 from me... as I wrote the plugin in question. :)

Tracker1 2010-06-16 20:41:41

ansaurus

tags:

views:

answers:

dynamic iframe in ui.dialog

related questions