1

i have a page where i will create a iframe dynamically and append that to a div. That div will be attached to a jquery dialog.

<div id="diviframe"></div>
<script>
var iFrame = $('<iframe id="thepage" width="450" height="400"></iframe>').appendTo("#diviframe");
    var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
    iFrameDoc.write('<p>Some useful html</p>');
    iFrameDoc.write('<p>Some useful stuff</p>');   
    iFrameDoc.close();


    $("#diviframe").dialog({

        autoOpen: false,
        modal: true,
        height: 500,
        width:500,
        open: function(ev, ui) {

    }

    });

$("#diviframe").dialog('open');

The contents of iframe is not written when its opened in jquery dialog. can anyone suggest a workaround for this?

Update:

 function test() {
        var iFrame = $('<iframe id="thepage" width="500" height="500" src="http://stackoverflow.com"></iframe>').appendTo("#diviframe");
        var parent = "divparent";
        var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
        iFrameDoc.write('<p>Some useful html</p>');
        iFrameDoc.write('<p>Some useful stuff</p>');
        iFrameDoc.close();      
        return iFrame;
    }






    var $dialog; //Must be at the global scope
    function dialog() {      
        alert(1);
        $.get(test, {}, function(html) {
            $dialog.html(html);
            $dialog.dialog("open");
        });
    }

    $(function() {
        //Initialize (without showing it)
        var $dialog = $('<div id="dialog" title=""></div>').dialog({
            autoOpen: false,
            modal: true
        });
    });
    dialog();

I tried to call a function dynamically after the jquery dialog loads but its showing some errors. How to load a function from jquery dialog?

user1547670
  • 15
  • 6

1 Answers1

0

I don't think you need to use an iframe for what you're doing, unless you've stripped out some vital detail before posting your question.

You can append your content directly to #diviframe, and it'll display just fine.

$("#diviframe").append("<p>Some useful html</p>");
$("#diviframe").append("<p>Some useful stuff</p>");

I wonder - are you trying to make a scrollable panel inside the dialog? If so, you can set the CSS of a div to achieve what you need:

.myScrollableBox {
    width: 450px;
    height: 400px;
    overflow: auto;
    border: 1px solid #000;
}

You might also want to add some padding to that, so that the text isn't jammed hard against the borders.

iain_simpson
  • 144
  • 5
  • I need to use iframe as the content will load in another domain. i just provide you a sample not the whole code as that will not make sense here.are you able to find out why iframe content not loaded? – user1547670 Mar 30 '14 at 01:32
  • I think the problem is that you're dynamically modifying the document, but the copy jQuery makes for inside the dialog just takes the outer iframe element. – iain_simpson Mar 30 '14 at 01:38
  • yes. what you said is right. Its taking the outer iframe which created initially. – user1547670 Mar 30 '14 at 01:42
  • Can you create the iframe with say `src="http://stackoverflow.com"` as an attribute, and see if it embeds in the dialog? – iain_simpson Mar 30 '14 at 01:45
  • Ah, ok. Try this: http://stackoverflow.com/questions/5660263/how-to-display-an-iframe-inside-a-modal-dialog-using-jquery-ui-dialog – iain_simpson Mar 30 '14 at 01:54
  • that's fine. But as per my reuirement, i need to write the contents dynamically. is it possible to set the iframe contents to dialog html? – user1547670 Mar 30 '14 at 02:19
  • If you need to change the content of the iframe after it's loaded, you'll need to modify it after the dialog opens, because that's when the iframe will load its content. – iain_simpson Mar 30 '14 at 02:25
  • As you said i tried to call a function from jquery dialog and created Iframe dynamically. But i couldnt call a function from jquery dialog. Can you identify where i made wrong? The question updated. – user1547670 Mar 30 '14 at 02:50