I'm using Casper.js to automate submitting a form. The form's onSubmit method returns false and runs some javascript (onclick callback) before sending the data, so I have to use clickLabel, instead of fill. The data is prepopulated, I just have to click the Submit button. When I use Casper to do clickLabel('Submit'), the data isn't submitted. What am I doing wrong?
Edit - here's the markup of the label:
<a class="green_btn white font_18 arrow_btn_pad rad_5" onclick="$.shactivity.eoiPremiumSubmit('expressval');return false;" href="javascript:void(0);">
<span class="fl cursor_p">Submit</span>
<span class="white_right_arrow mar_l_7 block fl mar_t_6 cursor_p"></span>
</a>
clickLabel invokes click in your case with the XPath selector of //*[text()='Submit']. click in turn will try dispatch mousefown and click events on the span with the Submit text. But the span won't have any such event handlers on it since this is what the parent link is for. The above XPath selector won't select the actual Link which is a parent of the span element.
You need to click the actual link to trigger the action:
casper.click(".green_btn.white.font_18.arrow_btn_pad.rad_5");
or with an XPath expression to select the parent based on the text:
var x = require('casper').selectXPath;
casper.click(x("//*[text()='Submit']/.."));
i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Nothing happens, the event does not fire. What am I doing wrong??? This doesn't make sense to me.
use this:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
Make sure you put your on('shown.bs.modal') before instantiating the modal to pop up
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
or
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
To focus on a field, it is better to use the shown.bs.modal in stead of show.bs.modal but maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modal function.
Wrap your function in $(document).ready(function() { }), or more simply, $(function() {. In CoffeeScript, this would look like
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Without it, the JavaScript is executing before the document loads, and #myModal is not part of the DOM yet. Here is the Bootstrap reference.
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
Try this
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Using shown instead of show also make sure you have your semi colons at the end of your function and alert.
Add this:
$(document).ready(function(){
$(document).on('shown.bs.modal','.modal', function () {
// DO EVENTS
});
});
Similar thing happened to me and I have solved using setTimeout.
Bootstrap is using the following timeout to complete showing:
c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,
So using more than 300 must work and for me 200 is working:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
In my case, I was missing the .modal-dialog div
Doesn't fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Does fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
I had the same issue with bootstrap4.
The solution was to add it inside the jQuery document ready() function:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
This happens when code might been executed before and it's not showing up so you can add timeout() for it tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});
I had a similar but different problem and still unable to work when I use $('#myModal'). I was able to get it working when I use $(window).
My other problem is that I found that the show event would not fire if I stored my modal div html content in a javascript variable like.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
the event never fired because it didn't occur
my fix was to include the divs in the html body
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Remember to put the script after the call of "js/bootstrap", not before.
Had the same issue. For me it was that i loaded jquery twice in this order:
Loaded jQuery
Loaded Bootstrap
Loaded jQuery again
When jQuery was loaded the second time it somehow broke the references to bootstrap and the modal opened but the on('shown.bs..') method never fired.
Ensure that you are loading jQuery before you use Bootstrap. Sounds basic, but I was having issues catching these modal events and turns out the error was not with my code but that I was loading Bootstrap before jQuery.
Sometimes this doesn't work if:
1) you have an error in the java script code before your line with $('#myModal').on('show.bs.modal'...). To troubleshoot put an alert message before the line to see if it comes up when you load the page. To resolve eliminate JSs above to see which one is the problem
2) Another problem is if you load up the JS in wrong order. For example you can have the $('#myModal').on('show.bs.modal'...) part before you actually load JQuery.js. In that case your call will be ignored, so first in the HTML (view page source to be sure) check if the script link to JQuery is above your modal onShow call, otherwise it will be ignored. To troubleshoot put an alert inside the on show an one before. If you see the one before and not the one inside the onShow function it is clear that the function cannot execute. If the spelling is right more than likely your call to JQuery.js is not made or it is made after the onShow part
Make sure that you really use the bootstrap jquery modal and not another jquery modal.
Wasted way too much time on this...
In my case the problem was how travelsize comment.. The order of imports between bootstrap.js and jquery. Because I'am using the template Metronic and doesn't check before
i used jQuery's event delegation /bubbling... that worked for me. See below:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
very good info too: https://learn.jquery.com/events/event-delegation/
The popular solution to put a setTimeout could work in some case, but is a terrible solution. I was myself using it amongst wraping it in $(document).ready() off course (but it never helped), but I was never able to have a reliable solution. Some browser/system take more time than other, and sometime 1000ms was not enough. And I was tired searching why the $(document).ready() wasn't helping, so :
I took a different approach.
I make the subscription to modal events when I need to use the modal for the first time.
Open my modal
and on the JS side :
function ShowModal() {
InitModalEventsOnce();
$('#MyModal').modal('show');
}
var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion
function InitModalEventsOnce() {
if (!InitModalEventsIsDone) {
InitModalEventsIsDone = true;
$('#MyModal').on('shown.bs.modal', function () {
// something
})
$('#MyModal').on('hidden.bs.modal', function (e) {
// something
});
}
}
And that's it! The only reliable solution I found.
Try like this.
let mymodal=$('#myModal');
mymodal.on('show.bs.modal', function ()
{
alert('hi')
});
Below are the granular details:
show.bs.modal works while model dialog loading
shown.bs.modal worked to do any thing after loading. post rendering
Here's a simplified example of what I'm trying to achieve: http://jsfiddle.net/easLc/
HTML
<div class="bar">
<div class="apple"> apple</div>
<div class="banana"> banana</div>
<div class="citrus"> citrus </div>
</div>
jQuery
function showAlert(event) {
inventory = event.data.inventory;
alert(inventory);
}
fruits = ["apple", "banana", "citrus"];
inventory = [13, 45, 99];
for (i in fruits) {
$(".bar ."+fruits[i]).on("click", {inventory:inventory[i]},showAlert);
}
The inventory data I'm passing to the handler is dynamic, not static like the example. I'm getting the inventory data from asynchronous calls. After each time the inventory data is updated, I want to pass this data to the handler instead of have the handler get that information again.
What I'm noticing is on some clicks, the handler (I think) is crashing my browser. Am I creating too many handlers inadvertently? How do I see what handlers were created? Or what happens during the click event? I tried adding some console.log to the handler but I don't see them in the console.
Thanks!
Try
$(".bar ."+fruits[i]).off('click',showAlert).on("click", {inventory:inventory[i]},showAlert);
This will remove the previously bound event and rebind it... But it is hard to determine if it is the real source of the problem. You can add a console.log('text') in showAlert to see if it is being called more than once.
You can prevent multiple bindings by adding some sort of data to the element once it's been bound (a clean way would be a class, but meta-data may be preferred by standards):
$(".bar ." + fruits[i]).not(".bound").on('click', {...}).addClass('bound');
I want to attach a event to dynamically created element class.So i used live function but it was not triggered. So checked live function reference ,there i red below notes
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
so decide to use on function,But it still not working.The text field is already attached with jquery ui datpicker.On another element select i disabled that field.
jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');
after disabled if i click i want to show alert or tooltip.so i tried this,but not working
jQuery(".date_picker_disabled").on("click", function(event){
alert('hi');
});
What may be the problem
I am using jquery 1.7.1 ( jquery-1.7.1.min.js)
The problem is that jQuery(".date_picker_disabled") finds elements with that class and binds to them. If elements don't have the class at the time the binding is made, the events will not be handled.
The on function allows you to get round this by handling them on another element when the event "bubbles up to" a parent element. In this instance, we could say the body element – there may be a more specific common parent you could choose.
jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
alert('hi');
});
The event handler is now bound to the document.body element. All clicks that happen anywhere in the body are tested to see if they originated from an element matching the selector. If so, the handler is fired.
This is explained on the documentation for the on function. It is the same behaviour as was present in previous versions of jQuery with live and delegate functions.
Having taken another look at your code, you have disabled="disabled" set on your input element. click events are not fired on disabled elements.
This is tricky.
When your code runs, your element does not have .date_picker_disabled class so your jQuery(".date_picker_disabled") returns nothing and .on() is not called.
Apply .on() on the outer element and use the selector parameter:
// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
// do something
});
This will delegate the event to the <outer element>. The handler will only be executed if an element with class .date_picker_disabled has been clicked (second param).
From the documentation of .live():
Rewriting the .live() method in terms of its successors is
straightforward; these are templates for equivalent calls for all
three event attachment methods:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
So in your case, you would do:
$(document).on('click', '.date_picker_disabled', function(event){
alert('hi');
});
I was using jQuery 1.7.2 and tried all proposed methods:
Didn't work:
$(document.body).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
Didn't work:
$(document).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
None of them worked until I tried the following:
----- Worked! ----
$('body .collapsible-toggle').on('click', function() {
console.log('clicked');
});
Maybe you should do:
jQuery("body").on("click",".date_picker_disabled", function(event){
alert('hi');
});
in this way you attach the event handler to the bosy and specify to fire that event only when that selector ".date_picker_disabled" is matched.
BTW this is exactly how live() worked
try :
$(document.body).on( "click", ".date_picker_disabled", function() {
alert('hi');
});
document.body helps for dynamic html too.
Just chekc it out: .on not working on dynamic html
This is a rephrased question from here. After some testing I isolated the problem, but have no clue on fixing it. No need to read the previous question, this is the simplified code:
THE PROBLEM -> trigger('click') executes, but the event doesn't trigger when inside looped (intervaled) function
$(document.ready(function(){
var checkForConfirmation = function(){
clearInterval(checkInterval);
$("#anchorLink").trigger('click');
}
var checkInterval = setInterval(function(){checkForConfirmation()}, 5000);
});
The function is being called in intervals. When the proper response is replied, interval stops, and simulates the click on an anchor link.
In the html file there is an anchor link <a id="anchorLink" href="#hiddenDiv">Show</a>.
It points to the hidden div which has some content. I'm using Fancybox plugin to show the hidden div when the anchor link is clicked.
If I click on Show link fancybox shows, as expected.
If I get the response from the back-end, code executes as expected, but fancybox is not shown.
If I move $("#anchorLink").trigger('click'); outside the checkForConfirmation function, fancybox shows.
When I replace $("#anchorLink").trigger('click'); with $("#anchorLink").text('Im clicked'); the string shows in the <a id="ancoredLink"> tag.
This is the summary, I have tried it in different situations.
The problem is obviously in triggering the click event while in looping function. The $("#anchorLink") selector is accessible, it is triggering it correctly from everywhere else. Obviously there is a problem in triggering the mouse event inside looping function.
Any suggestions?
Try:
$(document).ready(function(){
// ...
});
instead of:
$(document.ready(function(){
// ...
});