JQuery modal dialog - destroy or close?

Question

I recently came across a situation where I was a little confused about what technique I should use when working with the JQueryUI Modal Dialog.

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

ok will start the ajax call, passing the id of the week and ltDIDID to the server.
Cancel will be an empty div dialog and call .dialog('destroy') in the target div.

My question is: which approach should I use?

Destroy / rearrange the dialog for each call - so that I can pass parameters to the ajax call and have only one div for all dialogs 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 a dialog only once, but with one div for each dialog in the markup using Close, and pass 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'); } 

Greetings

James

Answer 1

Honestly, I'm not sure. However, you can use the javascript profiler to measure the time it takes to execute anyway.

Here is a link to a mini guide for the javascript profiler in the Google Chrome Developer Tools http://code.google.com/chrome/devtools/docs/profiles.html

I would suggest that the second option would be slower, since I assume that the selectors in the “data” should be evaluated and therefore make it slower.

However, this will depend on how many times the dialog is opened / closed. Since I suggest that destruction and reconstruction will be slow (well in the blink of an eye - but maybe a little slower).

The first seems like a simpler implementation, so if performance doesn't seem like a problem, maybe just choose the simpler of the two.

Answer 2

It depends on how many elements you use for the ClearDay function. If the number of elements is large, then the second approach, i.e. (Creating one dialog and reusing) is a good approach and vice versa.