CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Jason
Jason

Reputation: 7682

jQuery UI dialog - dynamic div - function sequence issue

I've got a div that I am appending to the page dynamically on click of a link, and then writing an iframe to that div. 

// open login popin
function loginLayer(){
    $(".ui-dialog-content").dialog("destroy");
    callIframe();
    openLoginDialog();
}


// write dialog div & iframe + src to DOM
function callIframe() {

    var iframeURL = "" + loginConfig.iframeSource + "?displayType=" + loginConfig.displayType +"&isSignature=" + loginConfig.isSignature + ""
    $('body').append('<div id="loginDialog"></div>');
    $('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');
}


// open login dialog
function openLoginDialog(){ //open }

after callIframe runs, the dialog opens.

What's happening is that the dialog opens with the iframe, no issue - but, at the bottom of the body (firefox and IE) is a large amount of white space that is the same size as the #loginDialog height.

I'm not sure the cause, as everything appears in order - but it appears that when the div is appended to the body, that it's rendering there - increasing body height and then opening in the dialog.

Edit

Appears that it's a timing issue - if I step through each action using breakpoints, the problem is resolved - so something is triggering too soon...

If I do this, it works - so something in callIframe?:

callIframe();
alert('works when interrupted by alert');
openLoginDialog();

then, there's no issue. So, that means

Upvotes: 0

Views: 460

Answers (3)

Jason
Jason

Reputation: 7682

The real cause:

I was dynamically loading the css as well, and the css wasn't fully processing before the dialog opened, causing the issues...

Upvotes: 0

The Alpha
The Alpha

Reputation: 146229

It could be written in cleaner way and I think it's the url that making the problem

function callIframe()
{
    $(".ui-dialog-content").dialog("destroy");
    var iframeURL = loginConfig.iframeSource + "?displayType=" + loginConfig.displayType + "&isSignature=" + loginConfig.isSignature;​
    var iframe=$('<iframe></iframe>', {
        src:iframeURL,
        id:'loginLayer',
        name:'loginLayer',
        width:'100%',
        marginheight:0,
        marginwidth:0,
        frameborder:0
    });
    $('<div id="loginDialog"></div>').html(iframe).dialog();
}

callIframe();

An Example Demo.

Update: According to your need here is an updated fiddle.

Upvotes: 3

Siva Charan
Siva Charan

Reputation: 18064

Issue seems to be causing due to not closing the iframe tag.

Replace this line 

$('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');

to this

$('#loginDialog').append('<iframe id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></iframe>');

Upvotes: 0

Related Questions