Event Handler for closing modal popups - javascript

I'm doing some selenium web testing and on this one site I'm automating a modal popup would sometimes show up randomly and would prevent me from grabbing other elements. I know there are built in Selenium methods for closing the popup like alert().dismiss() but this would mean I know when the popup would show up and I don't it shows up at random.
I would like to know how to attach an event listener for when these modal popups show up and have a callback that would close out of it. please and thanks

If you know where is the code that triggers the popup, you can simply inject few line of javascript in webdriver and nullify the popup.
As an example, if the popup appears after a couple of seconds and is triggered by the following code:
setTimeout(function () {
showModal()
}, 5000);
you could override the modal function in the webpage with the following (Java) code:
driver.executeScript("showModal = function () {}");
the next time the modal is executed this will trigger an empty function.

Related

Click event in the modal window doesn't get fired

In my application, when the session gets time out a modal window asking for a password gets dispalyed. When I click the submit button, the event doesn't get fired and It again triggers the session call.The screen gets properly redirected but the thing is I can't invoke any javascript function from the modal window. What will be the problem?
most likely due to the fact that when you dynamically add an element you have to assign click event like this:
$("h2").on('click', 'p.test', function() {
alert('you clicked a p.test element');
});
Need to see your code but its what i ran into a while back. good luck.

Assign event to button from external library

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

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() {...})

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

Dojo dialog close event on X (top-right)

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.

Categories

Resources