Im using Dojo to create a simple dialog to create a user in a system. The problem is I get the error:
Tried to register widget with `id==user_submit` but that `id` is already registered
user_submit, is a Dojo button I have to finish the form inside the dialog. When I close the dialog by clicking it and submitting the form there is no problem in opening the dialog again (in the click event on the button I have this line of code:
dijit.byId("user_submit").destroy();
but if I close the dialog through the [x]-link / button in the top-right corner I don't destroy the button and then can't open the dialog again without reloading the page.
How do I get Dojo to destroy the button or how to a overload the click-event on [X]-link / button, so I can write the destroy command for the button?
"Developer shouldn't override or connect to this method" for "onCancel" see documentation.
A better solution is:
var myDialog = new Dialog({
id: "myDialogId1",
onHide: function() {
myDialog.destroy()
}
});
Found a solution. by using dojo.connect().
myDialog.connect(myDialog, "hide", function(e){
dijit.byId("user_submit").destroy();
});
Would have postet this shortly after i posted the quistion, but I didn't have enough points, so here is the answer again, just a little late :-)
IIRC, the onClose extension event gets called when you click on the X thing, so you could try putting your cleanup code there.
You could also consider sidesteping the issue entirely. Perhaps you don't need to destroy the widget and could instead reuse the same one? You could also do a widget existence test before you create it again, destroying the old version if its still alive.
You can override onCancel() method as stated above or you can attach event to the
dijit.dialog.closeButtonNode domElement.
dijit.dialog.closeButtonNode is the name of data-dojo-attach-point attribute for close button.
Exp:
dojo.on(dijit.Dialog.closeButtonNode, "click", function(evt){
//add your logic here
});
When pressing the X on the top of the dialog the "onCancel" event is triggered.
Dispose of the element there.
Related
The jQueryUI datepicker can be setup with a Today and Done button. See http://jqueryui.com/datepicker/#buttonbar.
How can I trigger some event (i.e. alert('close');) whenever the Done button is clicked, and then continue with the buttons default functionality (i.e. closing the calender).
Note that I do not wish to use the onClose() method as this is triggered when the calender is closed through any means (i.e. clicking off the calender), and not necessarily when the Done button is clicked.
PS. I don't think it is relevant, but I am using the datepicker in connection with http://trentrichardson.com/examples/timepicker/
You can create a separate handler by using event delegation.
$(document).on('click', 'button.ui-datepicker-close', function(){
alert('close')
});
I bound the event handler to the Done button as it's not entirely clear what behavior you want although I think this is what you are asking
DEMO
Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?
Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});
You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");
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() {...})
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.
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.