Question

As I currently understand them, jquery modals are rendered during page load and triggered by the user via a hidden= true to hidden=false value.

This is all fine and dandy and works nicely when modals are kept to a minimum per page. But, and here is my question, what if you have an entire list of modals that when you click on it pops up a modal of information to edit. Say for example, a grid of documents and you wish to click on a document and have a modal pop up to just edit the small document. Wouldn’t rendering all these documents during page load slow down user experience. Isn’t there a way to load and render that modal “on demand”.

Whats the standard practice for this type of behavior.

I know the rails way to is load a new page per document but I’m very curious to see how I can make this work.

I tagged the jQuery crowd also as this library is the one I’m most familiar with.

Answer 1

I do this a lot in my apps. This is the code for a feedback button in one of my apps.

It creates the dialog, and when a button is pressed the dialog’s content is loaded dynamically.

$(function () {
    var button= $("#FeedbackButton");
    if (button.length == 0)
        button= $("<div id='FeedbackButton'>Feedback</div>").hide().appendTo("body");


    var dialog = $("#FeedbackDialog");
    if (dialog.length == 0)
        dialog = $("<div id='FeedbackDialog'>Feedback</div>").hide().appendTo("body");

    button.click(function () {
        button.hide();
        dialog.load("_FeedbackDialog.htm");
        $(dialog).dialog({
            title: "Feedback",
            modal: true,
            width: 800,
            height: 300,
            close: function () {
                $(button).show();
            }
        });
    });
});