Capture the click event on bootbpx confirm/alert box buttons - javascript

I am trying to create a plugin to capture all the click events on a page. These have confirm and alerts are shown using bootbox plugin. I would like to attach a click event to bootbox confirm/alert buttons (Ex: when clicking on Ok or Yes or No) so that I can capture the click event. I do not want to use bootbox callback events since I do not own the codebase to add the callback events and also I want a common place to capture the clicks.
bootbox modal dialog
Since bootbox confirm/alert are created dynamically, I tried to attach the click event using jquery as below
$(document).on('click', ':button', function(){
alert('bootbox button clicked');
});
$(document).on('click', 'button[type="button"]', function(){
alert('bootbox button clicked');
});
also tried with class selector as well.
$(document).on('click', '.tempclass', function(){
alert('bootbox button clicked');
});
tempclass is the class is assiggned to bootbox plugin.
I also tried with javascript attach events as below
document.addEventListener("click", handleClick, false);
document.attachEvent("onclick", handleClick);
function handleClick(event)
{
alert('bootbox button clicked');
}
But, I was not successful. Every other dynamically created control's click events are getting fired except bootbox button click events. Can somebody please help me on this.

You could use the build-in callback functionallity of the plugin, see the "Advanced Usage" sections:
http://bootboxjs.com/documentation.html

Related

Simulate User Click Event with JavaScript on Bootstrap Button

How can i simulate with Javascript the click Event of a Bootstrap Button to perform the default actions that binded on the Button ?
I need this for automated Testing of a website.
Bootstrap add no Event on the Button himself, the events a bubbled to the body element and the work is done their.
$("btn.btn-outline-danger").click() is not working
$("btn.btn-outline-danger").trigger("click") is not working
Try with this.
$(document).on('click', '.btn',function(){
alert('click');
});
Since Bootstrap uses jQuery as a dependency you can simulate a click event in jQuery way.
$('.btn').click(function(){
console.log('Event Triggered');
});
Excluding jQuery, Vanillajs.
var button = document.getElementByClassName('.btn');
button.onclick = console.log('Event Triggered');
Events should bubble up to the parent (unless explicitly prevented). Consider this simple html structure:
<div class="parent">
<div class="child"></div>
</div>
With the code below the parent has a function attached to the click event. When the child click event is triggered, the parent's event responds.
$(".parent").click(function() {alert("hello")}); // attach event
$(".child").click(); // trigger event
https://jsfiddle.net/epqdz2a1/
This should be the same in Bootstrap.
Vanilla js version:
document.querySelector(".parent").addEventListener("click", function(){alert("hello")});
document.querySelector(".child").click();

Jquery off('click') on('click') bind and unbind

I have some buttons (Datatable button to export data) I need to prevent direct data download for that I am implementing OTP so when user first click on button its hows user a dialog box where he/she need to put OTP then if OTP matches then I need to remove .off("click"); method so that buttons can work again. on document ready I add this event like below
$(".dt-buttons button").each(function(){
$(this).off("click");
});
Now how can i remove this .off("click"); so buttons can work again like default
I suggest the use of common class with event delegation on() instead of detaching/attaching the event every time, you could give your button a common class example click_event and remove/add class as you want like :
$(".dt-buttons button").each(function(){
$(this).removeClass("click_event");
});
//When you want to attach the event
$('your_selector').addClass("click_event");
Hopefully this will attach the normal behavior again on your element
$("Your_selectors").on('click', function(){
$(this).trigger('click');
});

IE: jQuery click listener fires on parent of disabled button

Is there a way to prevent firing of jQuery .click() listener on parent of button that is disabled?
e.g in this case:
<div>
<button disabled="disabled">click me</button>
</div>
<script>
// unfortunately this click handler is placed by 3rd party
// library and I can't edit it. Just add another handlers or css
$('div').on('click', function () {
alert('div is still clickable, probable you use IE');
});
</script>
In my project click event is placed with third-party library so I can't enable/disable itself or move binding to button.
ADD: I've found solution with not disabling the button, but proving it a "disabled" class, and adding event listener:
$('button').on('click', function (event) {
if ($(this).hasClass('disabled')) {
event.stopImmediatePropagation();
}
});
but what about disabled button? Is there a way to work with it?
Try this:
$('div').on('click', function (event) {
if ($(this).find('button').is(':disabled')) {
return false;
}
});
This might work for you
$('button').not(':disabled').parent().on('click',function(){});
You CAN remove the third-party click event and rebind them all on the page this way also with .off() or unbind()
$('div').unbind(); //or .off() depending on how the third-party set the handler
//then add your own click method after the unbinding.

First click handler removes element and second handler doesn't run, how can I run both?

I'm using a jQuery plugin (leaflet.js) that has popups. I want to do some stuff when the close button is clicked, but since I'm not the one creating the close button, I have to attach a handler with jQuery.on() like so:
$(document).on('click', '.leaflet-popup-close-button', function () {
// do stuff
}
This works for other events (such as mouseover), but because it's a close button I'm clicking, the element disappears the instant it's clicked, and my handler isn't run.
How can I make my handler ALSO run (I don't want to remove the handler that's already there)?
edit
I can't use the built-in popupclose event because that event also fires if the popup is closed some other way.
I'm not very familiar with leaflet, but I think you need to set the closeButton option to false, edit the DOM of the popup with your own close button, and have the callback for the click event call togglePopup or closePopup after whatever other code you want.
I'd suggest listening for a close event from the leaflet.js and use that to trigger your action:
http://leafletjs.com/reference.html#popup

Click after removing disabled from button

Using jQuery I want to submit a button that was previously disabled. When I remove the attr of disable then do a .click() it doesn't trigger and send me to the next page. But if I do an alert("XYZ"); then .click() it sends me to the next page. I assume this has to with the time taken to disable then click(It's not disabling before the click event is fired).
Working Example Of "Broken" Behavior: http://jsfiddle.net/LmFjd/71/ - This is how I have my code setup and exactly what is not working for me. Notice that it triggers the onsubmit event, but it doesn't actually submit.
Working Example Of Expected Behavior: If you put a .show() in there it works: http://jsfiddle.net/LmFjd/70/
When there is an alert between the removeAttr and the click() it works, otherwise the click doesn't trigger.
For clarification, I'm using jquery-1.5.1.min.js. It's a JSP page, using Apache Tomcat 6.0.29. It's a spring MVC WebApp, and I'm using the section inside a jQuery UI Dialog dismiss button
Hackish Solution: Putting a .show() before the .click() makes it work.
There can be two things can be done through JQuery to do your things is Just remove the attributed disabled=disabled and on document ready use the hide and on doing some even again show you required input box, the code to do that is as under:
$(document).ready(function() {
$('#edit').hide();
"Discard changes": function() {
$( this ).dialog( "close" );
alert(actionButton);
$('#edit').show();
}
});

Categories