I have a dropdown menu with a submit function that executes, if any children from the dropdown is clicked.
Now I want to prevent the submit function to a special li element, because there should be insert a tracking id in a popup iFrame.
With the following code it works so far on the first dropdown menu and prevent the submit function, but it wont work on all following dropdown's.
Maybe someone has a short solution for me?
<script type="text/javascript">
$(document).ready(function() {
$('.track').click(function(){
stopPropagation();
});
$('.dropdown li').click(function() {
document.getElementById('opt').value = $(this).data('value');
$('#options').submit();
});
$("#options").submit(function() {
if (confirm('are you sure?')){
return true;
} else {
return false;
}
});
});
</script>
<form name="" action="" method="post" id="options">
<input type="hidden" name="update" id="opt" value="">
<div id="item-select-option">
<div class="dropdown">
Options <span class="caret"></span>
<ul id="selector" class="dropdown-menu pull-right" role="menu">
<li data-value="paid">paid</li>
<li data-value="shipped">shipped</li>
<li class="track">track</li>
</ul>
</div>
</div>
</form>
Problem: You've several elements with the id track/options when the id attribute should be unique in same document, so when you attach event to the id just the first element with this id that will be attached.
Suggested solution :
Use class instead of id's, like :
<form name="" action="" method="post" class="options">
.....
<li class="track">
track
</li>
</form>
Then you js should be like :
$('.track').click(function(event){
event.stopPropagation();
});
$(".options").submit(function() {
if (confirm('are you sure?')){
return true;
} else {
return false;
}
});
NOTE : The event should be present in anonymous function function(event).
Hope this helps.
Related
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a").removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com"target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com"class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
I want that the last a element is locked, and if you click on the 2nd button, the class locked will be removed from the last a element and I will be able to click on the link.
It deletes the class but I still can't click the link. How to fix that?
Also, is there are smarter way to do that...
This event binding isn't removed from the <a> when its class="locked" is removed:
$('a.locked').click(function(e) {
e.preventDefault();
});
At least with direct bindings like this, jQuery only uses the selector initially to attach the event handler to all matching elements. It won't recheck the selector when the event is later triggered. Currently, you'll have to do that check yourself:
$('a').click(function (e) {
if ($(this).hasClass('locked')) {
e.preventDefault();
}
});
Though, if you have an overall parent element, you can use a delegated binding and jQuery will then recheck the (2nd) selector for you when the event is triggered.
<div id="parent">
<a href="example.com" target="_blank" id="action2">
<!-- ... -->
</a>
<a href="example.com" class="locked">
<!-- ... -->
</a>
</div>
$('#parent').on('click', 'a.locked', function (e) {
e.preventDefault();
});
So, just removing a css class will not work in your case.
You should remove the event handler to allow the button to be clicked, something like this should work:
$("a.locked").on("click.locked", function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a.locked").off("click.locked");
$("a").removeClass("locked");
});
});
Working jsfiddle.
Like this?
Check out this SO question to read more about the toggle function I used.
$(document).on("click", "#ToggleLock", function(e) {
$('#Continue').prop('disabled', function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id='ToggleLock'>Unlock/Lock</button>
<button onclick="location.href='http://www.example.com'" type="button" id='Continue' disabled>Continue</button>
Let me know if I have greatly misunderstood the question.
Remove the class is not enough, since you added a click event to all $('a.locked') you need use .off() to remove the click event after removing the class. Also try to target the specific element, you could add id="btn_continue" to 2nd button. ($("a") will target all <a> which is not what you want to do)
Note:
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("#btn_continue").off().removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com" target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com" id="btn_continue" class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
I'm trying to hide a div if a span element contains a specific word.
The issue I'm having is that the span only appears after a form has been submitted. I've tried to run my hide function on click of the submit button but this doesn't work as the span is only shown after the button has been clicked and the form submitted. I've also tried running it on submit() of the form but no luck either (posted the code that I've tried below).
HTML
<div class=“deliveryUpsellText”>
<p>blabla</p>
</div>
<ul>
<li class=“error-msg”>
<ul>
<li>
<span> Coupon Code “blabla” is not valid
</span>
</li>
</ul>
</li>
</ul>
<form id="discount-coupon-form" action="http://dev.blabla.co.uk/cart/couponPost/" method="post">
.....
<button type="button" id="cartCoupon" title="Apply Coupon" class="button applycouponhide" onclick="discountForm.submit(false) ; " value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>
</form>
jQuery
$j('#cartCoupon').click(function(){
if ($j(".error-msg span:contains('blabla')").length) {
$j('.deliveryUpsellText').css({
"display":"none"
});
}
});
I've also tried
$j('#discount-coupon-form').submit(function(){
if ($j(".error-msg span:contains('blabla')").length) {
$j('.deliveryUpsellText').css({
"display":"none"
});
}
});
Any ideas how I could do this?
You are using this character as quotation: ”
You should use one of these: ' or "
Also, you have this:
onclick="discountForm.submit(false) ; "
which if the object discountForm is not defined, you get error before parsing the javascript part.
$(document).ready(function(){
$('#cartCoupon').on('click',function(){
if($('.error-msg').find("span:contains('blabla')").length > 0) {
$('.deliveryUpsellText').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='deliveryUpsellText'>
<p>blabla</p>
</div>
<ul>
<li class="error-msg">
<ul>
<li>
<span> Coupon Code “blabla” is not valid
</span>
</li>
</ul>
</li>
</ul>
<form id="discount-coupon-form" action="http://dev.blabla.co.uk/cart/couponPost/" method="post">
.....
<button type="button" id='cartCoupon' title="Apply Coupon" class="button applycouponhide" value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>
</form>
I have dropdown with different links, before that i have 2 radio buttons where you could select "mode".
<div class="radio">
<label><input type="radio" name="mode" checked="checked" value="mode1">MODE1</label>
</div>
<div class="radio">
<label><input type="radio" name="mode" value="mode2">MODE2</label>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose site
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a target="_blank" href="http://example.com/index.php?mode=">Site1</a></li>
<li><a target="_blank" href="http://example.com/index.php?mode=">Site2</a></li>
<li><a target="_blank" href="http://example.com/index.php?mode=">Site3</a></li>
</ul>
</div>
And i use this code snippet to detect what mode is selcted and add it to var mode:
$(document).ready(function() {
var myRadio = $('input[name=mode]');
myRadio.on('change', function () {
var mode=myRadio.filter(':checked').val();
});
});
What i want to do is to add javascript var $mode to href tags.
href="http://example.com/index.php?mode={$mode}
How could i accomplish this ?
I think only way would be to do this with some javascript function ?
Its not possible to just "print" var to href ?
JSFIDDLE: https://jsfiddle.net/DTcHh/18683/
Use data-* attribute to keep static href value to be used later. .change() will trigger change event initially to set the value of href attributes.
$(document).ready(function() {
var myRadio = $('input[name=mode]');
myRadio.on('change', function() {
var mode = myRadio.filter(':checked').val();
$('ul.dropdown-menu a').prop('href', function() {
return this.getAttribute('data-href') + mode;
})
}).change();
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" name="mode" checked="checked" value="mode1">MODE1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="mode" value="mode2">MODE2</label>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose site
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a target="_blank" href="http://site1.com/index.php?mode=" data-href="http://site1.com/index.php?mode=">Site1</a>
</li>
<li><a target="_blank" href="http://site2.com/index.php?mode=" data-href="http://site2.com/index.php?mode=">Site2</a>
</li>
<li><a target="_blank" href="http://site3.com/index.php?mode=" data-href="http://site3.com/index.php?mode=">Site3</a>
</li>
</ul>
</div>
Fiddle here
Check this fiddle I've modified for you: https://jsfiddle.net/so2fw1o4/1/
Add this to your myRadio.on('change', function
//here change the urls
$('.dropdown-menu a').each(function(){
$(this).attr('href', $(this).data('url') + mode)
})
And you will need to add data attribute to each link to store initial link
<a target="_blank" data-url="http://site. com/index.php?mode=" href="http://site. com/index.php?mode=">Site1</a>
Try this :-
$(document).ready(function() {
var myRadio = $('input[name=mode]');
myRadio.on('change', function () {
var mode=myRadio.filter(':checked').val();
$("ul.dropdown-menu li a").each(function(){
$(this).attr('href',$(this).attr('href').split('?')[0] + "?mode=" + mode);
});
}).change(); //trigger on page load
});
DEMO
Although you already have some answers here, I figured I would post another alternative (not necessarily any better).
You could add a class to each link, handle their click events, and set the new window's location yourself to achieve a similar effect.
The following is a code snippet modifying the jQuery in your fiddle:
$(document).ready(function() {
var myRadio = $('input[name=mode]');
var mode = myRadio.filter(':checked').val(); // Initial setting
myRadio.on('change', function () {
mode=myRadio.filter(':checked').val();
});
$('.mode-link').click(function(e) {
e.preventDefault(); //stop the click action
// Check if the mode has been set
if (mode) {
// Create the href value
var newHref = $(this).attr('href') + mode;
// Open the new tab/window with the correct href value
window.open(
newHref,
'_blank'
);
}
});
});
I simply added the mode-link class to each a element in the dropdown, stored the radio button value change in a new variable mode, added the click event handler, and finally handled the click event to create the new href value and open a new tab/window with that location.
If you didn't want the new tab/window you could simply set location.href = newHref but this wouldn't mimic the new tab/window opening, hence why I use window.open().
I have a modified sample here: JSFiddle
When I click on the input my dropdownmenu is expanded, what I need is to expand it automatically Onkeyup event.
I'm trying the following but not working.
HTML
<div class="btn-group DropDownMenu">
<input id="input1" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" type="text" onkeyup = "Filter()">
<ul class="dropdown-menu">
<li></li>
</ul>
</div>
JavaScript
function Filter() {
//some other code
$("#input1").click();
}
Any thoughts ? I'm using bootstrap btw
remove class="dropdown-toggle" and data-toogle="dropdown" from input and this to JS
$(".dropdown").keyup(function (event) {
//preventing default behaviour of bootstrap
event.stopPropagation();
$('.dropdown-menu').dropdown().toggle();
});
I don't know where have you written the javascript.
I have created a fiddle and changed the javascript a little:
window.Filter = function() {
$("#input1").click();
}
it is working in the fiddle. http://jsfiddle.net/dyo8fowt/
Hi I have a bootstrap dropdown menu that is auto filled from a database. I am trying to get an event to happen when I click on one of the items in the menu. I have tried
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
with ".ddBtnClick" being a class assigned to each of the items in the list. but nothing happened.
Here is the code to populate the list from a database.
$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
$.each(data.aaData, function(i, option){
$("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
});
});
Here is the html for the dropdown.
<div class="row" style="margin-left:50px;">
<div class="span3">
<div class="btn-group">
<a class="btn dropdown-toggle" data- toggle="dropdown" href="#">Make
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">
</ul>
</div>
</div>
</div>
Issue is with your className. You are registering the delegated event handler for ddBtnClick but actual class name is ddBntClick.
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
and
.addClass("ddBntClick");
Change the class name during construction or change in your event delegation.
$(function()
{
$("body").on("click", ".ddBntClick", function(event) {
console.log("Is it working? Yes!!");
});
});
Have you tried wrapping your Javascript in the document.ready event?
$(function()
{
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
});
See the jQuery .ready() documentation for more information and examples.
Also, you should register the click event on the actual button and use .click() instead of .on():
$(function()
{
$(".ddBtnClick").click(function(event) {
console.log("Is it working? Yes!!");
});
});
Also, you have a typo:
.addClass("ddBntClick")
Should be:
.addClass("ddBtnClick")