At page I have many button active state of type. I bind to the event click and check how many button have active status. But when I click at first button I get zero.
$(".btn-quote").on("click", function (e) {
var totalActiveQuote= $(".btn-quote.active").length;
if (totalActiveQuote > 0) {
console.log("active");
} else {
console.log("deactive");
}
});
What I should do to fix this?
jsfiddle.net
https://jsfiddle.net/haqkbvbh/
This is because the active class is toggled after your onClick event fires. You could fix it by toggling it on your own.
$(document).ready(function(){
$(".btn-quote").on("mouseup", function (e) {
$(this).toggleClass("myActive");
var totalActiveQiote = $(".btn-quote.myActive").length;
$("#totalActive").html(totalActiveQiote);
});
});
You could circumvent this by e.g.:
$(document).ready(function(){
$(".btn-quote").on("click", function (e) {
$(this).toggleClass("active");
var totalActiveQiote = $(".active").length;
$("#totalActive").html(totalActiveQiote);
});
});
https://jsfiddle.net/zpqcac1h/
Related
I want to call a function on one type of button click on my HTML page.
I have got around 10 such button on the page and wrote the below code to call a function when the button is clicked,
$('.divname').each(function (index) {
$(this).on("click", function (e) {
//Call Another Function
});
});
And this is working fine as expected.
However the issue is, sometimes depending on some condition one dynamically generated div is been created(Pop up message) and I dont want my above said code to work when the pop up message comes up.
Could you please advise how this can be achieved.
Thanks and Regards,
Aniket
Hi What something like set a bool and check if it true or false...somthing like:
var enable = true;
$('.divname').each(function (index) {
$(this).on("click", function (e) {
//Call Another Function
if(!enable) return;
});
});
//set it to false on popup show (or something else event)
$(popup).show(function(){
enable = false;
})
In simplest way.
$('.divname').each(function (index) {
$(this).on("click", function (e) {
//Simply check the condition for that Open Pop up message
if(openPopUp){
return;
}
callfunction();
});
});
try something,
$('.divname').each(function (index) {
$(this).on("click", function (e) {
if($('#popupModal:visible').length == 0){ // check length of visible modals
//Call Another Function
}
});
});
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 found a related post which did not help:
Twitter bootstrap:Popovers are not showing up on first click but show up on second click
The difference is in my page I have several elements which require popover (several tips-icon), so I need to loop over them..
My markup:
<img class="help_icon" src="http://media.mysite.com/pub/images/help/tips-icon.png">
This is my javascript:
var h=document.getElementsByName("click_help_container");
for (i=0;i<h.length;i++)
{
$('#'+h[i]['id']).click(
function ()
{
var id=$(this).attr("id");
getHelp(id,$(this),function(t,elem)
{
var isVisible = false;
var clickedAway = false;
$(elem).unbind('click');
$(elem).popover(
{
"title":t.title,
"content":"<p class='popover_body_text'>"+t.content+"</p>",
"html":true,
"animation":true,
"placement":"bottom",
"trigger":"manual"
}).click(function(e)
{
$(this).popover('show');
clickedAway = false;
isVisible = true;
e.preventDefault();
});
$(document).click(function(e) {
if(isVisible & clickedAway)
{
$(elem).popover('hide')
isVisible = false;
clickedAway = false;
}else
{
clickedAway = true;
}
});
//$(elem).popover('show');
});
});
}
The problem is when I click on the tips-icon.png button, the popover doesn't show up on first click (I guess it's because I have 2 .click() calls When I click on the button the second time popover shows up and it then maintains it's toggle behavior from there onwards.
You don't need to loop through all elements and initialize popovers one by one, you can apply popover to all items with this name at once (same as you're doing in loop).
And you don't need to show/hide popovers manually by yourself, bootstrap can do it for you.
I think this should work for you:
$("a[name='click_help_container']").popover(
{
"title":t.title,
"content":"<p class='popover_body_text'>"+t.content+"</p>",
"html":true,
"animation":true,
"placement":"bottom",
"trigger":"click"
});
I have elements on my page (id=itemid) that when hovered over cause another element (id=panel) to become visible (via fadeIn). Basically a hover event on itemid causes panel to fadeIn and mouseOut leads to fadeOut.
I want to make a button so that when clicked the panel element does not fadeIn or out but stays visible. When that button is clicked, the mouseIn and mouseOut events should work again.
Any ideas?
Thank you!
$(document).ready(function(){
$('.itemid').hover(
function () {
$('.panel').fadeIn(300);
},
function () {
$('.panel').fadeOut(200);
}
);
});
Set a flag for whether to do the fading or not:
$(document).ready(function(){
var fadeEnabled = true;
$('.itemid').hover(
function () {
if (fadeEnabled) {
$('.panel').fadeIn(300);
}
},
function () {
if (fadeEnabled) {
$('.panel').fadeOut(200);
}
}
);
$("#myButton").click(function() {
fadeEnabled = !fadeEnabled;
});
});
Then, just toggle that flag with your button and it will enable or disable the fade behavior.
On click of the button, use $(selector).unbind('mousein') on your object/item to deregister the events., and the reregister on another click of the button. Keep toggling on each click of the button.
Q:
I have the following case :
Div contains a link , i wanna to just select the div without the link,i mean ,when clicking on the div i wanna specific action differs from clicking the link.through some JQuery.
the structure i work on is:(by firebug)
<div class ="rsAptContent">
sql
<a class = "rsAptDelete" href = "#" style ="visibility: hidden;">Delete</a>
</div>
the JQuery code:
<script type="text/javascript">
$(document).ready(function() {
$(".rsAptContent").click(function(e) {
ShowDialog(true);
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function(e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>`
when i click on the link ,i don't want to execute the Jquery code , how to select the div without the link in.
thanks in advance
Are you looking for something like the stopPropagation() code?
$(".rsAptContent").click(function(e) {
e.stopPropagation();
ShowDialog(true);
return false;
});
});
That should stop the link from executing.
http://api.jquery.com/event.stopPropagation/
Edit: Distinguish between clicking the link and clicking on any part of the content except the link
$(".rsAptContent").click(function(e) {
var $target = $(e.target);
if($target.is(a){
// It's the link.
}else{
// else it's not
}
});
});
Check for the clicked target element than perform action
to get info about which element is click use below script
function whichElement(event){
var tname
tname=event.srcElement.tagName
alert("You clicked on a " + tname + " element.")
}
Try this:
$(".rsAptContent").click(function(e) {
if($(e.target).hasClass('rsAptDelete')) return false;
ShowDialog(true);
e.preventDefault();
});
});
If the target is the link the event is cancelled;
If you already have a click handler on the delete link, then just stop the event propagation there by using stopPropagation().
$(".rsAptDelete").click(function(e) {
e.stopPropagation();
});