Simulate User Click Event with JavaScript on Bootstrap Button - javascript

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

Related

how to click on a button after popup windows loaded completely

I want to click on some html element pragmatically.
I use Jquery selector to select a button and click it.
$('span.firstBtn').click();
after clicking this button a popup window will show and then I want to click a button in the popup windows.
$('div.BtnOnPopupWindows').click();
but I get null pointer because there is no popup windows when code run. so i need to wait till completion of loading the popup window. how can I do this? how can I wait till completion of loading of the popup window?
Use the jQuery's .on() method with delegated event handlers:
// DELEGATED EVENT HANDLERS
// Delegate event for existing or future elements using .on() with delegation:
$(document).on("click", ".BtnOnPopupWindows", function() {
console.log("BtnOnPopupWindows CLICK");
});
// DIRECT EVENT HANDLERS
// Define button click:
$('.firstBtn').on("click", function() {
console.log("firstBtn CLICK")
$('#popup').html(`<div class="BtnOnPopupWindows">TEST</div>`);
});
// Dynamically trigger stuff
$('.firstBtn').click();
$('.BtnOnPopupWindows').click();
<span class="firstBtn">BUTTON</span>
<div id="popup"><!--will be dynamically populated--></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Tip: Instead of using $(document) try always to delegate to a first static (non-dynamic) Element parent. For the above example it would be like:
// Static parent - on click - dynamic child
$("#popup").on("click", ".BtnOnPopupWindows", function() {

Capture the click event on bootbpx confirm/alert box buttons

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

Stop a dynamic bound eventhandler to fire immediately

I'm using jQuery 2.1.3. I try to build a button that will show/hide content on click. I also want to hide the content when there's a click on a wrapping container (in my application it's the document itself, but I used a regular div in my example below). As there is some more logic to handle I'm also making use of custom events that I fire via .trigger().
This works fine but I have a problem. When I show the hidden content I apply an eventlistener to document to hide the content when the user clicks anywhere on it. This eventhandler is fired straight after the content is shown resulting in my content gets hidden immediately.
I can only get around this by using $evt.stopPropagation() in my toggle buttons event handler. But that's no solution for me as I need the event to bubble up as other elements listen for that.
Heres the simplified HTML:
<div id="document">
<button id="btn" type="button">Toggle</button>
<div id="content" class="hidden">Hidden Content</div>
</div>
And heres the JS to this:
//trigger custom show event
var show = function () {
$("#document").trigger("show");
};
//trigger custom hide event
var hide = function () {
$("#document").trigger("hide");
};
//handle custom show event
$("#document").on("show", function () {
$("#content").removeClass("hidden");
$("#document").on("click", hide);//add listener to container, fires immediately
});
//handle custom hide event
$("#document").on("hide", function () {
$("#document").off("click", hide);//remove listener from container
$("#content").addClass("hidden");
});
//on toggle button click call custom events
$("#btn").click(function ($evt) {
//$evt.stopPropagation(); would work but event should propagate
$("#content").hasClass("hidden") ? show() : hide();
});
JSFiddle
What could I do about this? Stopping event propagation on toggle button click would show my content but i need this event to bubble up as there are other elements around waiting for that. How could I avoid that the applied event listener on document fires immediately?
PS: jQuerys .show()/.hide() functions are no alternative for me.

How do I avoid one 'click' that triggers two functions?

Hi I have two JS functions:
$('button').click(function() inside $(document).ready
$(document).on('click','button', function()
the second function is design for buttons that I dynamically generated.
The problem I have is that when I click the button that associates with first function, the second function also gets triggered. How can I avoid this?
PS: since I give names to each button and this conflict is not affecting functionalities at all, but I think that one click trigger two function is not very smart :(
That is because of event propagation.
You can stop the event propagation in the first handler to prevent the dynamic handler from being fired.
$('button').click(function (e) {
e.stopPropagation();
//your code
})
But a more appropriate solution will be to add a common class to all the dynamic button elements and target only them with the delegated handler like
<button class="mydynamic"></button>
then
$(document).on('click','button.mydynamic', function(){
});
You can find documentation for event.stopPropagation() here
Wrap your dynamicly generated buttons into a div:
<div class="wrap">...buttons... </div>
and listen on the div:
$('.wrap').on('click','button', function(){});
It will be more efficent.

button click event triggering wrong event handler

I have a div display some titles of music which is clickable. When you click it it will show some more detail information. Then I also have a button in the clickable div. When I click the button. It won't call the function of the button but the function of the div? Is there a way to solve this? Thank you!
$("#myComList").append("<div id="+comListID+" class=listDiv> <p class=comTitle><? echo $row["compositionTitle"] ?>(<?echo $row["year"]?>)</p><button id="+comListID+"btn class=addNewArrBtn>Add new Arrangement</button> <p class=comOri>BY <? echo $row["OrigComposer"] ?></p> </div>");
$('#'+comListID).click(function() {
$(this).find("li").slideToggle('slow', function() {
});
$("#"+comListID+"btn").click(function(){
addNewArr(comListID);
});
It's called 'bubbling'. The button is inside the div so it's executing button then up the chain to div. Add event.stopPropagation() inside the button function.
$("#"+comListID+"btn").click(function(event){
event.stopPropagation();
addNewArr(comListID);
});
From jQuery documentation:
By default, most events bubble up from the original event target to
the document element. At each element along the way,
jQuery calls any matching event handlers that have been attached.
A handler can prevent the event from bubbling further up the document
tree (and thus prevent handlers on those elements from running) by
calling event.stopPropagation(). Any other handlers attached on the
current element will run however. To prevent that, call
event.stopImmediatePropagation(). (Event handlers bound to an element
are called in the same order that they were bound.)
http://api.jquery.com/on/
So you'd call event.stopPropagation() inside the button click handler, as to stop the div event from firing.
I believe I understand your question without seeing the code. The problem it sounds like stems from the click event bubbling or propagating up. Below is a sample of code to try and a link to a fiddle for you to test:
<div id="testDiv" onclick="alert('Stop Clicking Me!');">
<button type="button" onclick="function(e) { alert('You hit the button!'); e.stopPropagation(); }">Click Me!</button>
</div>
In this function, the:
e.stopPropagation();
prevents the click event from filtering up to its parent container (in this case "testDiv") and triggering its click event as well. You can test it and see for yourself in the jsfiddle below:
Test Fiddle
EDIT:
In your case:
$("#"+comListID+"btn").click(function(e){
addNewArr(comListID);
e.stopPropagation();
});
add the event parameter to the click function and stop it from propagating to the parent.
Hope this helps.

Categories