Jquery Dialog - Is there a way to open it without registering it using .dialog?

Question

This is my problem. I have a page with multiple tabs. I load those tabs dynamically and one of those tabs is a message container (mail). Every time I click a folder link (Inbox, Sent Mail etc) I reload just that tab alone with appropriate content. I use Jquery dialog to pick contacts and I have to load contacts everytime. Since I reload the whole tab content every time JQuery Dialog registers (or creates) the whole div content. To avoid this I did this:

if ($("#ui-dialog-title-divContacts").length == 0) { //if dialog data is not created then make dialog
            $("#divContacts").dialog({
                bgiframe: true,
                resizable: false,
                autoOpen: false,
                height: 600,
                width: 425,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    Cancel: function () {
                        //basically do nothing
                        $(this).dialog("close");
                    },
                    'Done': function () {                                                        
                        $("#divTo").empty().html($("#divSelectedContacts").html());
                        $(this).dialog("close");
                    }

                }
            });
        }

I went to generated viewsource in FF and found that only one instance is being created. My problem now is it is not showing the dialog. Is there a way by which I can open this dialog without registering it. Any help is much appreciated.

Answer 1

So you populate your dialog with contacts every time? Why not just populate a hidden div with all the data and UI elements you want to display, and then when you want to show the dialog, just clone the hidden div and show that.

Am I misunderstanding the question?

Answer 2

$("#divContacts").dialog('open') doesn't work?

Maybe I am misunderstanding the question. You wanted to create only one instance of the dialog, which you were able to do. And now you want to know how to show it?

Answer 3

At last after breaking the head for so long I found out that there was a mismatch between JQuery (upgraded to 1.4.2) and JQuery UI (still in 1.7). I have now upgraded it to 1.8. I am still having the same issue but found that it is a inherent bug in Jquery UI dialog when combined with Jquery 1.4.

http://forum.jquery.com/topic/problem-with-ui-dialog-component-and-jquery-1-4-1#14737000000729726

So have to check if the work around specified there works. Thanks for the answers though.