jquery ui dialog ui-widget-overlay height problem

i am developing a facebook app.

In this app i am using a jquery ui dialog to show a div content (which comes from ajax response).

The dialog opens up perfectly showing the content returned from ajax call. But there is some weird behavior occurring. The page (seems to be my app being called in fb iframe) is continuously refreshing as if it is posting some data in perpetuity. Even more, the height of "ui-widget-overlay" div, that is generated dynamically by ui dialog, is continuously increasing and never seems to get stable. May be these two strange behaviors are related somehow. Can't figure it out.

Due to this, even if I am using "modal : true" property 开发者_JAVA技巧for my dialog, I can access whole page behind the dialog.

A snippet of my 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 like I have found the culprit :

Setting "modal" property as "true" caused continuous resizing of the overlay (transparent div between dialog and document) taking the width and height of the document, which, by debugging the dialog js in Chrome, I found that were increasing in perpetuity. Not sure what is causing what to occur :|

Now when I set "modal" to "false", everything works perfectly because there is no more "overlay", but of course now I have to find some solution to "disable" my document behind.

Any clue how can I use "modal" property as "true" ??

thanks

You are trying to initialize a dialog on the ajax call so everytime Jquery initializes a new dialog. Please try this:

onload initialize the dialog.

$(function(){
$('#new_box').dialog({                  
                    modal: true,
                    position: 'top'
                });
});

In your ajax call just invoke the 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

As far as the accessing the page behind even with modal mode, since you are in an iframe the div to capture the events is not extending outside your iFrame. There are good reasons for this, but in cases where we (FB app devs) need to legitimately need to do this its irritating.

Now if the modal isn't making your page in the iFrame modal, that's something else.

I had the same problem, and the way that I fixed it was to add an inline style using jquery after the dialog is up with something like this:

$('.ui-widget-overlay').attr('style', 'height: 1001px !important; z-index: 1001;');

I found the !important to be necessary for it to work. Due to this method of insertion, the line of code does replace the jquery ui-widget-overlay inline style that was sent to the browser. I found this out the hard way because I did not initially put in the z-index, so it made the overlay over the top of the dialog, which rendered the dialog unclickable. So, in short, you might have to fiddle with the z-index value.