JQuery Modal Dialog - Destroy or Close?

Question

I've recently come across a situation where I've been a bit confused about which technique I should use when dealing with JQueryUI Modal Dialog's.

I've got a function: ClearDay(weekID, ltDayID). Currently this is responsible for creating a dialog with two buttons: ok and cancel.

ok will fire an ajax call, passing weekID and ltDayID to the server.
cancel will empty the dialog's div and call .dialog('destroy') on the target div.

My question is: which following approach should I use?

Destroy/Re-Create Dialog on every call - so that I can pass parameters to the ajax call and only have one div for all dialog's in the markup

function ClearDay(weekID, ltDayID) {

    $('#modalDialog').dialog({
        autoOpen: true,
        width: 300,
        title: 'Confirm Delete',
        modal: true,
        buttons: [{
            text: 'ok',
            click: function (e) {

                $(this).dialog('close');

                $.ajax({
                    url: '/Shift/ClearDay',
                    type: 'POST',
                    cache: false,
                    data: { shiftWeekID: weekID, shiftLtDayID: ltDayID },
                    success: function (result) {

                        LoadShiftPattern(function (result) {

                            $('#weekContainer').html(result);

                            SelectLastUsedField();
                        });

                    }
                });
            }
        },
            {
                text: 'cancel',
                click: function (e) {
                    $('#errorList').empty();
                    $(this).dialog('close');
                }
            }],
        open: function (e) {

            $(this).html("Clicking ok will cause this day to be deleted.");

        },
        close: function (e) {
            $(this).empty();
            $(this).dialog('destroy');
        }
    });

}

Create the dialog only once, but having one div for each dialog in the markup, using Close, and passing in the values directly using Jquery Selectors

$(function() {

$('#confirmDeleteDialog').dialog({
        autoOpen: false,
        width: 300,
        title: 'Confirm Delete',
        modal: true,
        buttons: [{
            text: 'ok',
            click: function (e) {

                $(this).dialog('close');

                $.ajax({
                    url: '/Shift/ClearDay',
                    type: 'POST',
                    cache: false,
                    data: { shiftWeekID: $('#weekIDInput').val(), shiftLtDayID: $('#dayIDInput').val()},
                    success: function (result) {

                        LoadShiftPattern(function (result) {

                            $('#weekContainer').html(result);

                            SelectLastUsedField();
                        });

                    }
                });
            }
        },
            {
                text: 'cancel',
                click: function (e) {
                    $('#errorList').empty();
                    $(this).dialog('close');
                }
            }],
        open: function (e) {

            $(this).html("Clicking ok will cause this day to be deleted.");

        }
    });
}

function ClearDay() {

    $('#confirmDeleteDialog').dialog('open');

}

Cheers,

James

Answer 1

To be honest, I'm not sure. However you could use a javascript profiler to measure the time it takes to execute either way.

Here is a link to a mini-guide for the javascript profiler in Google Chrome's developer tools http://code.google.com/chrome/devtools/docs/profiles.html

I'd suggest that the 2nd option would be slower, as I'm guessing the selectors in "data" would need to be evaluated and therefore making it slower.

However, this is going to depend on how many times the dialogue is going to be opened / closed. As I'm guessing destroying and recreating will be slow (well in the blink of an eye - but perhaps a little bit slower).

The first seems like a simpler implementation, so if performance doesn't seem to be an issue - perhaps just choose the simpler of the two.

Answer 2

It depends on how many elements you are using the function ClearDay. If the no of elements is large then the second approach ie. (Creating one dialog and reusing it) is good approach and vice-versa.