I have multiple tables on a page (there will be over 100) and I want to use one function for all of them. When the user selects "Custom" in the drop-down menu, additional questions apply TO ALL OF THEM. How do I wrap my function in a THIS statement to have it only added to that individual table. I apologize in advance for my description of the issue.
$(document).ready(function(){
$('td.additional_content').css('visibility', 'hidden');
$('#srds_mapping').bind('change', function (e) {
if( $('#srds_mapping').val() == 'Custom') {
$('td.additional_content').css('visibility', 'visible');
$('td.additional_content .custom').show();
} else {
$('td.additional_content').css('visibility', 'hidden');
$('td.additional_content .custom').hide();
}
}).trigger('change');
});
It is better explained by looking at it
http://jsfiddle.net/2Q7J7/2/
this is the targetted element inside the event handler:
$('#srds_mapping').bind('change', function (e) {
if( $(this).val() == 'Custom') { // traverse to find the target input element
Note that you should not use more than one ID on the page. Use classes or other selectors instead, f.ex:
$('select').bind('change', function (e) {
if( $(this).val() == 'Custom') {
jQuery .each() function would be a good option:
Assuming $('#srds_mapping') is your table. Firstly, instead of id you could add a class to the tables. For example <table id="srds_mapping" class="srds_mapping"></table>. After that is in place you could do something like this.
$('.srds_mapping').each(function(){
$(this).bind('change', function (e) {
// other function stuff
}).trigger('change');
});
Also, this thread may be worth a read, or something to think about.
Related
I've got this function that adds a class to a sibling element inside the main parent.
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('div[data-answer="1"]').addClass('test-class');
} else {
}
});
When this executes, it adds a class to any div that has this attribute because the same code appears several times on the page:
[data-answer="1"]
I was wondering if it was possible to add the class only to its sibling div with that data attribute, without adding a class to all of them on the page? If that makes any sense at all? I'm new to javascript so please bear with me.
Use siblings() function of jquery
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('#Correct').siblings('div[data-answer="1"]').addClass('test-class');
} else {
}
});
Use .find() and .first() to get the first matching element only.
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('#Correct').find('div[data-answer="1"]').first().addClass('test-class');
} else {
}
});
I have several images with the same class and would like to set up a click function that changes the text in some elements based on which image is clicked.
My if statement is not working, I'm not entirely sure why because I've used this method before, or so I thought.
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.id == 'csf') {
console.log('It works!');
}
});
JSFIDDLE
Use t.attr('id') instead of t.id
More about .attr()
An alternate solution is using classes instead of id's. Call the click function on the class they share then use a second class to distinguish them with the hasClass function:
<div id="csf" class="gallery_image csf">csf</div>
<div id="csi" class="gallery_image csi">csi</div>
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.hasClass('csf')) {
alert("It works!");
}
else if(t.hasClass('csi')) {
alert("So does this!");
}
});
I write personnal javascript in global.js, and it work until I click on the WooCommerce button update_cart.
After my function doesn't work.
The function is for update notification display :
$('#nb_article').change(function() {
if ($('#nb_article').text() = 0) {
$('#nb_article').css("display", "none");
} else {
$('#nb_article').css("display", "block");
}
});
and it's in balise jQuery(document).ready(function($) {}.
Do you know what can I do ?
The update cart action is triggered on woocommerce/assets/js/frontend/cart.js, look for update_cart: function() {
It makes a ajax call to the url of form and then update the .woocommerce div with the html returned by ajax call. So, it doesn't work maybe because $('#nb_article') is inside .woocommerce and the plugin will replace all html, losing the events. You should reapply the event handler after update.
Or in alternative, you can apply the event by delegation, in this way:
$('.woocommerce').on( 'change', '#nb_article', function() {
var $nb_article = $(this);
if ( $nb_article.text() == 0) {
$nb_article.css("display", "none");
} else {
$nb_article.css("display", "block");
}
});
There are two issues:
inside event function, you have to use $(this) so you can refer to element that triggers the event
in the if statement you have to use the compare operator == instead of =
So the final results should be:
$('#nb_article').change(function() {
var $nb_article = $(this);
if ( $nb_article.text() == 0) {
$nb_article.css("display", "none");
} else {
$nb_article.css("display", "block");
}
});
They are surely issues, but I don't know if there is something other related to other code of your project.
I hope it helps
have multiple forms on one page but all with the same class name.
I want to make it so that if there is no content in the text area, the submit button is disabled.
This works as you can see here i have done that:
http://jsfiddle.net/WJnqw/
However, this obviously will affect all of the forms with the same submit button classname.
I have tried changing the code to include e.g:
$(this).find(".addcommentbutton").prop("disabled", true);
As i thought that would select the form, and find the add comment button.
But it doesnt work.
Any help?
Thanks!
The problem is that this was the window. You need to pass the context somehow.
Here's a working version that shows two ways of either specifying what this in the function refers to or letting jquery do it:
http://jsfiddle.net/LVf5w/
$(document).ready(function () {
$('.addpostcomment').each(function() {
disableComments.call(this); // specify what "this" will be in the function
});
$(".addpostcomment").keyup(disableComments); //let jquery specify that "this" will be the element
});
function disableComments() {
$(this).closest('form').find(".addcommentbutton").prop("disabled", $(this).val().length < 1);
};
You could also just do this instead of iterating and calling the function:
http://jsfiddle.net/LX2Dj/
$(document).ready(function () {
$(".addpostcomment").keyup(disableComments).trigger('keyup');
});
Or (my preference) do away with the anonymous function altogether:
http://jsfiddle.net/sfuHU/
$(document).ready(function () {
$(".addpostcomment").keyup(function() {
$(this).closest('form').find(".addcommentbutton").prop("disabled", $(this).val().length < 1);
}).trigger('keyup');
});
Note that you have duplicate ids on your elements. The id must be unique.
JSFIDDLE DEMO
You need to use .next() not find & also use this directly in the keyup event
$(this).next('.addcommentbutton').prop('disabled', !($(this).val().length > 0));
// comment form not allow submit when empty
$(document).ready(function () {
disableComments();
$( ".addpostcomment" ).keyup(function() {
$(this).next('.addcommentbutton').prop('disabled', !($(this).val().length > 0));
});
});
function disableComments() {
var commentLength = $('.addpostcomment').val().length;
if (commentLength < 1) {
$(".addcommentbutton").prop("disabled", true);
} else {
$(".addcommentbutton").prop("disabled", false);
}
};
I am trying to apply a function to every checkbox on a page that shows/hides <div class="selectlist"> depending on if the checkbox is checked, this function makes all the <div class="selectlist"> on the page toggle
$("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
I tried the jquery each function like this but that doesnt seem to work
$.each($("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
}));
I know its possible to this by using a class instead of input[type=checkbox] but I want to avoid doing that
How can I make jquery change the behavior of the checkbox the user clicks?
If you're trying to bind an event handler to all elements verifying input[type=checkbox], simply do
$(document).on('change', "input[type=checkbox]", function() {
if (!this.checked) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
No need to use each there : most jQuery functions work if the jQuery set contains more than one element.
Note that I use on there instead of live : after having been deprecated for a long time, live has been removed from recent versions of jQuery.
EDIT : discussion in comments below lead to this code :
$(document).on('change', "input[type=checkbox]", function() {
$(this).next().toggle(this.checked);
});
$(document).on('change', 'input[type=checkbox]', function() {
$('#selectlist').toggle(this.checked);
});
ID's are uniqe, and there is no "all the <div id="selectlist"> on the page toggle", there can be only one? Use a class instead, and show us what the markup looks like !