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.
Related
I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/
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.
I know this is an old question but I wonder if there is a callback for Bootstrap Modal close event that actually runs before the close event is processed by the
browser. The modal usually closes before the contents destroy.
$('#div').on('hidden.bs.modal', function () {
var cropper = $('#ferret').imgAreaSelect({ remove : true});
});
The imageAreaSelect Components are not removed as quickly as the modal closes since it runs only after the modal closes.
There is an event for when the hide method is called, before it is hidden:
hide.bs.modal This event is fired immediately when the hide instance method has been called.
$('#div').on('hide.bs.modal', function () {...
See the bootstrap modal events here
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;
});
I'm trying to bind to the click event of the currently selected tab with jQuery tabs. I'm dynamically creating tabs so I need to do live binding. The idea is that I want to reload the current tab if it's clicked on again.
I tried binding in the select event, but it seems this event doesn't fire for click on the already selected tab.
I also tried a standard jQuery live binding:
$('li.ui-tabs-selected').live('click', function() {
alert('woof');
});
this doesn't seem to work either, but I can't work out why not. I can only guess the tab framework is intercepting the click event.
Any ideas?
jQuery(document).ready(function() {
jQuery(".ui-layout-center").tabs({
show: loadTab
});
rootLayout = jQuery('#container').layout
({
applyDefaultStyles: true,
north__spacing_open: 0
});
jQuery("#tabs_div").tabs();
loadIframe();
});
function loadTab()
{
alert('woof');
}