jQuery UI Dialog: Dialog Element Disappearing from the DOM

Question

I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form. I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.

I created the following very simple code snippet to test as I went along:

<div class="app-email">
    <div>
        <a href="#"
           class="app-email-opener">
            Click to add or edit your e-mail settings.
        </a>
    </div>
    <div class="app-email-modal">
        Oh, Hai.
    </div>

</div>

$('.content').on({
    click: function () {
        console.log('I was totes clicked.');

        var parent = $(this).parents('.app-email');
        console.log(parent);

        var target = parent.find('.app-email-modal');
        console.log(target);

        $(target).dialog('open');
    }
}, '.app-email-opener');

$('.app-email-modal').dialog({
    autoOpen: false,
    modal: true,
    show: false

});

For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.

The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely. jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.

The overall project is in ASP.NET MVC 4, using Visual Studio 2013.

Any information would be greatly appreciated.

score 0 · Accepted Answer · edited May 23 '17 at 11:49

So, finally discovered what's happening via this previously answered question:

Jquery Dialog - div disappears after initialization

//EDIT

For any possible future usefuless -

What was happening was that jQuery UI will move any DOM elements specified as Dialogs to the bottom of the page, rather than keep them in the location specified in the HTML markup. So, in my case, I was looking for things by class, but only within the scope of the app-email-openers parent app-email div.

To remedy this, I used templating (in my case, Razor) to add unique ids to each app-email-modal div, and added a data- attribute to associate the link with the specific unique id. This way they jQuery UI can move the elements as it sees fit, but there still easily accessible.

//END EDIT

I feel like that functionality should be better spelled out in the documentation. Even their own example doesn't operate like this.

Corollary: I attempted to use the appendTo option to have the DOM elements not be shifted to the bottom of the page, but they're still moved to the bottom. So, there's that.

jQuery UI Dialog: Dialog Element Disappearing from the DOM

1 Answers1