best practice for opening and/or initializing jquery ui dialog - javascript

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"); } }
]
});
});

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.

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.

Related

Focus of Bootstrap Modal dialog when opening two nested modal lost

I have two modal which was opened in nested way. The ESCAPE keyboard only works in the closing of the second dialog. The first dialog does not close via keyboard unless I click on the dialog again to regain the focus. I am trying to restore the focus of the modal to the first dialog. So the user can do a consecutive [ESCAPE] - [ESCAPE] key to close both dialog. Both have tabindex="-1".
First dialog was called inside the main js file.
$('#firstDialog').modal({
cache: false,
backdrop: 'static'
}, 'show');
Second dialog was called inside an event of a button in the first dialog
$('#secondDialog').modal({
cache: false,
backdrop: 'static'
}, 'show');
I tried the following, to manually set the activeElement when second dialog is closed. It does not seem to work.
$('#secondDialog').on('hidden.bs.modal', function(){
document.activeElement = $('#firstDialog')[0];
});
I referred the solution in the following thread on setting the activeElement. Any ideas what object does bootstrap need to be focused to have the escape back automatically?
https://github.com/twbs/bootstrap/issues/4854
Found out the answer minutes after formulating the question. Anyway, if others have any better solution than this, please give me a suggestion. My thought is it should work by default.
$('#secondDialog').on('hidden.bs.modal', function(){
$('#firstDialog').focus();
});

Should all underlying elements be disabled when a jQuery dialog is showing?

I have a web page with a dialog I'm showing with jQuery.dialog (jQuery 1.7.1, jQuery-UI 1.8.18). I create it like this:
$(theDialog).dialog({
autoOpen: false,
width: "800px",
modal: true, // etc....
});
On the same page, I have a list control I've constructed out of a stack of <div> elements. I listen to clicks on the stacked <div> elements thusly:
$("#listEmployees div").on("click", "input", listEmployees_ItemClicked);
where listEmployes_ItemChecked is my event handler. When I show the jQuery dialog, most of the elements on the HTML page are disabled; i.e. they are unresponsive to mouse clicks &c. However, my stack of lists is not: if I click on the items in it, the event handler gets called.
To work around this issue, I had to introduce a global variable on the page, isDialogVisible which my dialog sets when it opens and clears when it closes. The event handler then ignores the event if the global variable is true. Needless to say, this is a hack and won't scale well.
My expectation was that the jQuery dialog, being modal, would disable all HTML elements and events from these elements while it is open. Is this expectation incorrect? Why am I still seeing mouse clicks when the modal dialog is up?
jQuery UI dialogs (earlier versions than 1.10) have a zIndex property. Set the zIndex to a value higher than any z-index being used within your CSS.
eg.
$(theDialog).dialog({
autoOpen: false,
width: "800px",
modal: true,
zIndex: 99
});
This feature was removed as of jQuery UI v1.10:
Removed zIndex option
Similar to the stack option, the zIndex option is unnecessary with a
proper stacking implementation. The z-index is defined in CSS and
stacking is now controlled by ensuring the focused dialog is the last
"stacking" element in its parent.
jQuery UI dialogs do have the method moveToTop(), but this only moves the dialog to the top of the dialog context, so it is above any other dialogs on the page. It's the developers job to ensure their CSS doesn't cause stacking issues. 'Unfortunately', jQuery UI doesn't hold our hand all the time.

Event when tinymce plugin dialog is closed

tinymce.PluginManager will open a dialog using windowManager.open(). The dialog can be closed manually by using windowManager.close(). This is described by http://www.tinymce.com/wiki.php/api4:class.tinymce.Plugin. The dialog can also be closed by clicking the "X" in the top right corner.
I would like to execute some script whenever the dialog is closed. Seems to me there are two options.
Option 1. Ideally, I can add a callback which would execute whenever ever the dialog is closed. I have searched the documentation, but cannot find out whether this is possible.
Option 2. When ever I manually close the dialog using windowManager.close(), I can add the desired script directly before doing so. It is when the user clicks the X has got me stumped.
Trigger the event which happens when I click the 'x' button on a TinyMCE modal dialog (like the advimage dialog) describes adding an event handler to the X button being clicked. Problem is the event cannot be associated until the dialog is open, and there doesn't seem to be an on open dialog event I can do it at.
How can I execute code whenever the TinyMCE plugin dialog is closed? Thank you
$(".mceClose").click(function() {
alert('Handler for .click() called.');
});
To be precise you should add onClose function as the following:
tinyMCE.activeEditor.windowManager.open({
...
onClose: function() {
}
});
It cost me a lot of time to find right solution. Hope it will help.
As described in API reference, close method fires onClose event. So you can try something like:
tinymce.activeEditor.windowManager.onClose.add(function() {...})

Kendo UI/jQuery click event running multiple times

I'm using Telerik's jQuery software called Kendo UI, to create a modal popup window. I'm having a rather odd problem with a Kendo modal popup box, which contains a "Confirm"/"Cancel" confirmation. The first time I open the confirmation window & click either button (Confirm or Cancel), the window works correctly. The 2nd time I open this popup window & click a button, my Kendo's click event fires twice. The third time I open the window, the click event fires 3 times, etc. I can't figure out why. It should only be firing once.
Here's my JS code. The click function that's firing twice is in both the Confirm & Cancel sections, beginning on the line that reads .click(function () { :
var kendoWindow = $("#delete-confirmation").kendoWindow({
title: "Confirm",
resizable: false,
modal: true,
center: true
});
kendoWindow.data("kendoWindow")
.center().open();
kendoWindow
.find(".delete-confirm")
.click(function () {
kendoWindow.data("kendoWindow").close();
destroyItem();
})
.end();
kendoWindow
.find(".delete-cancel")
.click(function () {
kendoWindow.data("kendoWindow").close();
})
.end();
Any idea what I'm doing wrong?
Thanks
Sounds like you should initialize your dialog only once (create it and add your handlers). Then every time you need the dialog to show you only call your
kendoWindow.data("kendoWindow").center().open();
line of code. It looks like each time you go to open the dialog its adding a new click hanlder and the previous handlers and the new handler will all be called on the click event.

CKEditor InnerHTML error

I have two CKeditor fields that are a part of the form. I have some action buttons on the page, so whenever I click either 'clear' or 'cancel' this function is fired along with other stuff:
CKEDITOR.instances['ed1'].updateElement();
CKEDITOR.instances['ed1'].setData('');
CKEDITOR.instances['ed2'].updateElement();
CKEDITOR.instances['ed2'].setData('');
That way I am cleaning the contents of the CKEditor fields. The problem is that if I click 'cancel', then go back to the page and click "clear", Internet Explorer gives an "innerHTML is null or undefined" JS error.
It works fine in other browsers and only happens if I perform the update twice in a row from different buttons. Is there a workaround for that?
CKEditor initialization onReady:
CKEDITOR.replace('ed1', { htmlEncodeOutput: true, width:"700",toolbar: 'Basic'
});
CKEDITOR.replace('ed2', { htmlEncodeOutput: true, width:"700",toolbar: 'Basic'
});
I probably should add that I use .show() and .hide() whenever I use cancel button to hide the form and show other stuff. There's no page reload.
I found the solution to this problem. The reason it was doing that because my clear method was fired using jQuery bind function and wasn't placed in the onReady function, so it was binding the events together and giving this error. The solution to this was to use unbind first.

Categories

Resources