One of my ajax popup is loading too late.so my condition of jquery to check visibility is not working.
$(document).ready(function() {
if($('#emailCart').is(':visible')){
alert('yes');
let shouldFire = true;
$("input, select").click(function(){
if(shouldFire) {
alert('sent');
sendGAEvent('Email', 'click','Email Cart');
shouldFire = false;
}
});
};
});
seems "is(':visible')" only checks for dom loaded elements.How can i apply this conditions to future elements also.
Email cart image
When clicking on this Email cart button many textboxes appear on clicking any one of those my code should work. I am using a tool tempormonkey by which i inject my code to websites.But my code is not working when i inject using tempormonkey but instead works with console.
Do it the other way around: check the visibility in the handler function.
$(document).ready(function() {
$("input, select").click(function() {
if ($('#emailCart').is(':visible')) {
alert('sent');
sendGAEvent('Email', 'click', 'Email Cart');
}
});
});
If the input and select elements are loaded dynamically, use event delegation as described in Event binding on dynamically created elements?. But that doesn't change the logic of how to check for visibility of the cart.
Its not possible to write such code which will execute in future but we can monitor that on click of document because you are saying that on click of Email Cart button you want to execute it.
I hope it will resolve your issue, try it:-
$(document).on('click', function (e) {
if (!$('#emailCart').is(':visible')) return;
alert('yes');
let shouldFire = true;
$("input, select").click(() => {
if (!shouldFire) return;
alert('sent');
sendGAEvent('Email', 'click', 'Email Cart');
shouldFire = false;
});
});
Related
So, this code is working:
<script>
$(document).ready(function(){
var btn = $('#submit_send_order');
btn.attr({disabled: 'disabled'});
var chk = $('.end-box');
chk.click(function(){
if ($(this).attr('checked'))
btn.removeAttr('disabled');
else
btn.attr({disabled:'disabled'});
});
});
</script>
but I can't get any working version of a click, onclick, or event handler to cause a popup message during the else condition. Unless users checks a box, they cannot send their order on my site. Right now they click the button and nothing happens until they check the box. But I'd like an alert to show as well, e.g.:
$(document).ready(function(){
$('#submit_send_order').click(function(){
alert("You cannot proceed until you check the end box");
});
});
As Verhaeren said above, if the button is disabled, then it can't fire the click event. Rather than disabling the button, I would just put an if/else check in the click event.
So...
$(document).on('click', '#submit_send_order', function(event) {
event.preventDefault();
if ($('.end-box').prop('checked')) {
//Handle form submission
} else {
alert('You cannot proceed until you check the end box');
}
});
The onclick event doesn't fire when the element is disabled. Also, notice which is the right method to see if the checkbox is checked:
$(document).ready(function(){
var btn = $('#submit_send_order');
btn.attr({disabled: 'disabled'});
var chk = $('.end-box');
chk.on('click', function(){
if ($(this).is(':checked'))
btn.removeAttr('disabled');
else
btn.attr({disabled:'disabled'});
});
btn.on('click', function(){
alert("You cannot proceed until you check the end box");
});
});
I build a "solution" for this if you REALLY whant to do that. You can check it at this fiddle:
http://jsfiddle.net/2f1wsb8c/3/
It's placing an element with the same size of the button over it to catch the click when the button is disabled.
I have a form with multiple divs with same names (full-width). They all are on the same level. One of them is hidden (with a class hide). What I want is that if I select Submit, it should not submit, first hide all the brother divs of the hidden div (in this case full-width) and unhide the one with the class hide.
Now when I press again, it should just submit the Form.
JSFiddle is here:- http://jsfiddle.net/xmqvx/2/
Your code had a couple issues:
You used event.preventDefault but passed event in as e - should be e.preventDefault
Your ID selector targeted an ID that didnt exist (changed to #submit-this)
The working code:
$("#submit-this").click(function (e) {
e.preventDefault();
if ($(".full-width").hasClass("hide")) {
$(".full-width").hide();
$(".full-width.hide").removeClass("hide").show();
} else {
alert("Submitting");
$("#this-form").submit();
}
});
http://jsfiddle.net/xmqvx/4/
You could also take advantage of JavaScript's closures like so, to avoid having your behavior be dependent on your UI:
$(document).ready(function () {
var alreadyClicked = false;
$("#submit-this").click(function (e) {
e.preventDefault();
if (alreadyClicked) {
$('#this-form').submit();
} else {
$('.full-width').hide();
$('.hide').show();
alreadyClicked = true;
}
});
});
I have a link with the text "No New Notifications". The following code is used to make the link not clickable:
if ($.trim($('a#full_notifications_link').text()) == "No New Notifications"){
$('a#full_notifications_link').click(function(){
event.preventDefault();
return false;
});
}
I am using Ajax to poll the server and update the text. When the text is updated to say "See All Notifications", I want the link to become clickable. I am using the following code, but it is not working.
$(document).ajaxComplete(function(){
if ($.trim($('a#full_notifications_link').text()) == "See All Notifications"){
$('a#full_notifications_link').click(function(){
return true;
});
}
});
I know the problem has something to do with returning true, because if i put an alert in right before returning true, the alert works. Unfortunately, the link is still unclickable.
I also CANNOT change any of my html because it is generated differently every time by the backend.
Adding a new event handler does not remove the event handlers you already have, so the default action is still prevented.
Use on() and off() instead
if ($.trim($('a#full_notifications_link').text()) == "No New Notifications"){
$('a#full_notifications_link').on(function(event){
event.preventDefault();
});
}
$(document).ajaxComplete(function(){
if ($.trim($('a#full_notifications_link').text()) == "See All Notifications"){
$('a#full_notifications_link').off('click');
}
});
It does seem easier to just check the text inside the event handler
$('a#full_notifications_link').on('click', function(e) {
if ( $.trim($(this).text()) == "No New Notifications"){
e.preventDefault();
}
});
Could you just move your logic into the click handler?
$('a#full_notifications_link').click(function(evt){
if($(this).text() == "No New Notifications") {
evt.preventDefault();
}
});
I have an editable element inside a div which itself is clickable. Whenever I click the x-editable anchor element, the click bubbles up the DOM and triggers a click on the parent div. How can I prevent that? I know it's possible to stop this with jQuery's stopPropagation() but where would I call this method?
Here's the JSFiddle with the problem: http://jsfiddle.net/4RZvV/ . To replicate click on the editable values and you'll see that the containing div will catch a click event. This also happens when I click anywhere on the x-editable popup and I'd like to prevent that as well.
EDIT after lightswitch05 answer
I have multiple dynamic DIVs which should be selectable so I couldn't use a global variable. I added an attribute to the .editable-click anchors which get's changed instead.
editable-active is used to know if the popup is open or not
editable-activateable is used instead to know if that .editable-click anchor should be treated like it is
$(document).on('shown', "a.editable-click[editable-activateable]", function(e, reason) {
return $(this).attr("editable-active", true);
});
$(document).on('hidden', "a.editable-click[editable-activateable]", function(e, reason) {
return $(this).removeAttr("editable-active");
});
The check is pretty much like you've described it
$(document).on("click", ".version", function() {
$this = $(this)
// Check that the xeditable popup is not open
if($this.find("a[editable-active]").length === 0) { // means that editable popup is not open so we can do the stuff
// ... do stuff ...
}
})
For the click on the links, simply catch the click event and stop it:
$("a.editable-click").click(function(e){
e.stopPropagation();
});
The clicks within X-editable are a bit trickier. One way is to save a flag on weather the X-editable window is open or not, and only take action if X-editable is closed
var editableActive = false;
$("a.editable-click").on('shown', function(e, reason) {
editableActive = true;
});
$("a.editable-click").on('hidden', function(e, reason) {
editableActive = false;
});
$("div.version").click(function(e) {
var $this;
$this = $(this);
if(editableActive === false){
if ($this.hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
}
});
Fixed Fiddle
It's not pretty, but we solved this problem with something like:
$('.some-class').click(function(event) {
if(event.target.tagName === "A" || event.target.tagName === "INPUT" || event.target.tagName === "BUTTON"){
return;
}
We're still looking for a solution that doesn't require a specific list of tagNames that are okay to click on.
I am using jQuery load() function to load some pages into container. Here is the code:
$('div.next a').live('click',function() {
$('.content').load('page/3/ #info','',function(){
//do something
});
return false;
});
Everything works just fine but the problem is when I quickly double click the div.next link, from console I see that it loads the page twice because I did a quick double click. I could even make it 3 clicks and it will load it 3 times and show in console smth like that:
GET http://site/page/3/ 200 OK 270ms
GET http://site/page/3/ 200 OK 260ms
My question is how to prevent such double clicking and not to let load the target page more then once no matter how many times it was clicked.
Thank you.
Whatever happened to good ol' JavaScript? Why are you all trying to figure it out with pure jQuery?
var hasBeenClicked = false;
$('div.next a').live('click',function() {
if(!hasBeenClicked){
hasBeenClicked = true;
$('.content').load('page/3/ #info','',function(){
//do something
//If you want it clickable AFTER it loads just uncomment the next line
//hasBeenClicked = false;
});
}
return false;
});
As a side note, never never never use .live(). Use .delegate instead like:
var hasBeenClicked = false;
$('div.next').delegate('a','click',function() {
if(!hasBeenClicked){
hasBeenClicked = true;
$('.content').load('page/3/ #info','',function(){
//do something
//If you want it clickable AFTER it loads just uncomment the next line
//hasBeenClicked = false;
});
}
return false;
});
Why? Paul Irish explains: http://paulirish.com/2010/on-jquery-live/
To answer your comment...
This could happen if you have your delegate function nested inside your AJAX call (.load(), .get(), etc). The div.next has to be on the page for this to work. If div.next isn't on the page, and this isn't nested, just do this:
$('#wrapper').delegate('div.next a','click',function() {
http://api.jquery.com/delegate/
Delegate needs the selector to be the parent of the dynamically added element. Then, the first parameter of delegate (div.next a in the last example) is the element to look for within the selected element (#wrapper). The wrapper could also be body if it's not wrapped in any element.
You could try using the jquery one method:
$("a.button").one("click", function() {
$('.content').load('page/3/ #info','',function(){
//do something
});
});
You could unbind the click event with die():
$(this).die('click').click(function() { return False; });
Or you could give the element a .clicked class once it is clicked:
$(this).addClass('clicked');
And check if that class exists when performing your logic:
$('div.next a').live('click',function() {
if (!$(this).is('.clicked')) {
$(this).addClass('clicked');
$('.content').load('page/3/ #info','',function(){
//do something
});
}
return false;
});
Store whether you're waiting for the load in a variable.
(function() {
var waitingToLoad = false;
$('div.next a').live('click',function() {
if (!waitingToLoad) {
waitingToLoad = true;
$('.content').load('page/3/ #info','',function(){
waitingToLoad = false;
//do something
});
}
return false;
});
})()