JQuery UI Dialog Issue: Close removes the div

Question

I want to show a popup screen on my page using JQuery UI Dialog widget.

To implement this I have a <div class="popup-placeholder"> on my page. Actually there are more than one on the page (If this makes a difference to the solution)

On click of a button, I am initializing the dialog and 'open'ing it. The initialization of the popup is inside the action click because it is supposed to make an Ajax call to get the content of the popup. (I tried taking the initialization out of the click event, but that did not work $('div.popup-placeholder').dialog(); )

    var popupContext = $('#' + contextControl.id + ' > .popup-placeholder');
    popupContext.html(formHtml);

    $(popupContext).dialog({
        bgiframe: true,
        modal: true,
        autoOpen: false,
        closeOnEscape: false,
        dialogClass: '',
        draggable: true,
        position: 'center',
        resizable: false,                                    
        width: 600
    });

On click of the action button, the form shows and does what it is supposed to. Now, I have a close link on the popup WHICH IS NOT A DIALOG BUTTON, but just another link with an event binded to it. It does this...

$('#popup-placeholder-61').dialog('close');

where #popup-placeholder-61 is the same as $(popupContext)

The problem I am facing now is that, on close of the popup, the same action button does not show the popup again. The issues seems to be that the <div class="popup-placeholder"> has been removed from the mark-up.

I tried the solutions on the following page but did not help - Jquery Dialog Close on StackOverflow

So, I need more help

Answer 1

Try taking the initialization code out of the click event it may be that by trying to rebind everything again it's failing to pop the dialog open with the second click ... I had a similar problem which I "resolved" by creating the the markup for the dialog every time the dialog was to be opened.

The ajax bit of your problem is not hold back for you to take the initialization out of the click event, just load your ajax content on the click event and show the dialog with dialog('open').

Answer 2

My issue has been resolved, but I will be looking into why my earlier approach did not work. What I was doing earlier was that I had multiple place-holders with different IDs, and I was making only one of them the dialog. I used some Jquery selectors to select the appropriate div for the dialog box and had issues as described above.

The only change I did now is that I have a single div which acts as the placeholder. And that now works. It also initialized fine outside my event. So, maybe it was something to do with my selectors? I will try more and if I find something will post it as a follow up.

Thanks.

Answer 3

The main problem was that I was looking for the dialog div in the wrong place.

See this post for more details ...

http://stackoverflow.com/questions/2272961/jquery-dialog-div-disappears-after-initialization