CODEWITHSUNDEEP
javascriptjqueryjquery-uidialog
TchiYuan
TchiYuan

Reputation: 4278

best practice for opening and/or initializing jquery ui dialog

There are two ways to open a jquery dialog:

1) Set the autoOpen=true when initializing a dialog

2) After initialization (with autoOpen = false), call $("#id").dialog("open");

At the moment, in my code, whenever a user clicks a button, a modal dialog opens by using the first method. On "Ok" or "Cancel" the dialog is closed $(this).dialog("close");

Is it bad that on every click the dialog is opened using autoOpen=true ? In other words, is it bad that the dialog is reinitialized on every click ?

From a performance, point of view, will reinitializing the dialog on every click cause problems such as dialog events being registered multiple times ?

What is the jquery best practice for this ?

Code:

$("#button").on("click",function(){

   $("#dialogHello").dialog({
      modal: true,
      autoOpen: true,
      buttons: [
        {   "text" : "Ok", "click" : function() { $(this).dialog("close"); } },
        {   "text" : "Cancel", "click" : function(){ $(this).dialog("close"); } }
      ]
   });

});

Upvotes: 4

Views: 8505

Answers (2)

TchiYuan
TchiYuan

Reputation: 4278

By observing the DOM, I noticed that the html elements that jquery ui dialog injects in the DOM are not duplicated if the jquery ui dialog is re-initialized on every call. If the jquery ui dialog DOM elements already exists then they are simply reused.

The following thread :

jQuery draggable - what happens if it is applied twice to an element?

Explains that the jquery events won't be registered several times on the same element if it already exists. For example, in my scenario, if I re-initialize the jquery ui dialog on every call then there won't be incrementing events being registered.

Upvotes: 1

John - Not A Number
John - Not A Number

Reputation: 659

I generally initialize my dialogs once with autoOpen set to false, and then 'open' them whenever they are needed. I'll possibly update the dialog content before opening if needed.

If for some reason you do feel the need to re-init it each time, then you should at least use the 'destroy' method first to avoid causing problems and bloat.

Upvotes: 0

Related Questions