2012-06-21 2 views
0

У меня есть div, который я добавляю к странице динамически при щелчке ссылки, а затем записываю iframe в этот div.jQuery UI dialog - динамическая ошибка последовательности функций

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

после callIframe работает, открывается диалоговое окно.

Что происходит, так это то, что диалог открывается с iframe, без проблем - но в нижней части body (firefox и IE) находится большое количество пробелов, размер которых равен размеру #loginDialog.

Я не уверен в причине, поскольку все выглядит по порядку - но кажется, что, когда div добавляется к телу, это его рендеринг - увеличение высоты тела, а затем открытие в диалоговом окне.

Редактировать

Представляется, что это вопрос времени - если я пошагово каждое действие с помощью контрольных точек, то проблема будет решена - так что-то запуск слишком рано ...

Если я сделаю это, он работает - так что-то в callIframe ?:

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

то нет проблем. Таким образом, это означает, что

+0

Работая над ней :-) –

+0

Можете ли вы попробовать [эту скрипку] (http://jsfiddle.net/heera/7TtrN/2/). –

ответ

3

Это может быть записано в более экологичное образом, и я думаю, что это гиперссылка, что делает проблему

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.

Обновление: По вашему желанию here - это обновленная скрипка.

+0

Функции должны оставаться отдельными - я переработал ваше предложение, чтобы он соответствовал 3 функциям - я все еще сталкиваюсь с проблемой. Я думаю, что это проблема времени, в целом. – Jason

+0

Можете ли вы дать мне свой сгенерированный 'iframeURL'? –

+0

'loginLayer.html? DisplayType = login & isSignature = false' – Jason

0

Проблема, по-видимому, вызвана не закрытием тега iframe.

Замените эту строку

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

к этому

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

К сожалению, это не то. Кажется, это проблема времени, но я не уверен, где ее повесили. Если я пройду через каждое действие, используя точки останова, он отлично работает. Так что что-то срабатывает слишком рано .... – Jason

0

Реальная причина:

Я динамически загрузки CSS, а также, и CSS не полностью обработки, прежде чем диалог открыт, вызывая проблемы ...