user interface - jquery ui dialog ui-widget-overlay height problem -
i developing facebook app.
in app using jquery ui dialog show div content (which comes ajax response).
the dialog opens showing content returned ajax call. there weird behavior occurring. page (seems app being called in fb iframe) continuously refreshing if posting data in perpetuity. more, height of "ui-widget-overlay" div, generated dynamically ui dialog, continuously increasing , never seems stable. may these 2 strange behaviors related somehow. can't figure out.
due this, if using "modal : true" property dialog, can access whole page behind dialog.
a snippet of code:
$.ajax({ type : "post", data : "id=1", url : site_url + "lists/add_new", success : function(response) { $('#new_box').html(response); $('#new_box').dialog({ modal: true, position: 'top' }); $('#new_box').dialog( "open" ); return false; }, error : function(xmlhttprequest, textstatus, errorthrown) { alert(textstatus); } });
please guide.
thanks
update:
seems have found culprit :
setting "modal" property "true" caused continuous resizing of overlay (transparent div between dialog , document) taking width , height of document, which, debugging dialog js in chrome, found increasing in perpetuity. not sure causing occur :|
now when set "modal" "false", works because there no more "overlay", of course have find solution "disable" document behind.
any clue how can use "modal" property "true" ??
thanks
you trying initialize dialog on ajax call everytime jquery initializes new dialog. please try this:
onload initialize dialog.
$(function(){ $('#new_box').dialog({ modal: true, position: 'top' }); });
in ajax call invoke dialog using open.
$.ajax({ type : "post", data : "id=1", url : site_url + "lists/add_new", success : function(response) { $('#new_box').html(response); $('#new_box').dialog( "open" ); return false; }, error : function(xmlhttprequest, textstatus, errorthrown) { alert(textstatus); } });
hth
Comments
Post a Comment