I have a situation like this,
Iam trying to select a label using Id selector and sets its value..Due to some reason it doesnt seem to be working
$(document).ready(function () {
$("#Label3").val("hii");
});
How do I verify that $("#Label3") has indeed selected the label.
The label is rendered like this:
<span id="Label3"></span>
Only fields have a value and are therefore accessible with val(). To set the text of a Span you should use html() or text().
$(document).ready(function () {
$("#Label3").html("hii");
});
or
$(document).ready(function () {
$("#Label3").text("hii");
});
You can check the number of elements in the result returned by $("#Label3") by looking at the length:
var label3 = $("#Label3");
if (label3.length == 0) {
// not found
}
The reason why your code doesn't work is that you need to set text not val:
$("#Label3").text("hii");
<span>s don't have values - you probably want $("#Label3").text("hii");.
To answer the question, however, you can check .length - it will return 0 when no elements were found (which is a false value in JavaScript):
var label3 = $("#Label3");
if(label3.length){
label3.text("hii");
}
else{
alert("label wasn't found.");
}
See also:
http://api.jquery.com/text
http://api.jquery.com/length
To verify if a selector has worked I'd normally do -
$("#Label3").length
I'd only use that during debugging though.
Using the console in Safari, Chrome, or Firefox/Firebug:
console.log( $( '#Label3' ) );
Or
console.log( $( '#Label3' ).length );
Also, your element is a span, which does not have a value. Use .text() or .html() instead of .val()
To clarify what others have said, val() in jQuery is for getting the value of input fields.
Related
I want JQuery function to return me the value inside the 'data-tabconfig'
<li class="tab-add" data-tabconfig="#{layoutBean.maxTabs}">
I can easily get it if I call onclick function.
$(this).attr('data-tabConfig');
But I don't want to get it on click,I want to get it on bodyload().
I tried with .find() but I couldnt get it working
This was my attempt $('li').find().attr('data-tabConfig');
$(document).ready(function(){
$('li.tab-add').attr('data-tabconfig');
//OR
$('li.tab-add').data('tabconfig');
});
To get the contents of the attribute data-id (like in ) you have to use
$('li.tab-add').attr("data-tabconfig") // will return the string 123
or .data() (if you use newer jQuery >= 1.4.3)
$('li.tab-add').data("tabconfig") // will return the string 123
Use has attribute selector to get the element with a particular attribute. Although wrap it within document ready handler to run after elements are loaded.
$(document).ready(function(){
var val = $('li[data-tabConfig]').attr('data-tabConfig');
// do the rest
});
Try this
$(document).ready(function(){
$('.tab-add').attr('data-tabConfig');
});
Fiddle Here
If you want to get with your own attempt:
$(document).ready(function(){
var x = $('body').find('li.tab-add:first').attr('data-tabConfig');
});
I add a .listen class to various elements on my page, could be a button, could be an input, div, span etc.
$('.listen').on('click', this._init.bind(this));
In the method I wish to replace text in the element that was clicked.
p._init = function(e){
$(e.currentTarget).val('new data');
};
The above works for input elements, but not for things like divs. Is there a way to change the data on any type of elements or will I have to use a switch to test for the variations?
You could get a little fancy and check if the element has a value property, and change methods based one that, something like
p._init = function(e){
$(e.currentTarget)['value' in e.currentTarget ? 'val' : 'text']('new data');
};
FIDDLE
Unless you're adding value properties to elements that don't natively have value properties, that should work.
For input it's val() for divs and stuff it's text().
If you wanna do everything with a single event, you can do something like:
$('.listen').on(...
{
if($(this).is('input'))
{
use val()
}
else
{
use text()
}
}
Try this DEMO
$(document).ready(function(){
_init = function(e){
if(e.target.nodeName=='SPAN'||e.target.nodeName=='DIV')
$(this).text('new data');
else if(e.target.nodeName=='INPUT')
$(this).val('new data');
};
$('.listen').on('click', _init);
});
I'm new in Jquery, and I have this code:
jQuery(document).ready(function(){
var title = jQuery(".fullVisaImg").attr("inselect");
var links = jQuery(".ff_elem>option");
for(var i=0; i<links.length; i++) {
if (title == links[i].value) {
links[i].attr("selected", "selected"); // here is my problem
alert(links[i].value);
return;
}
}
});
i have a select element on my pages, and want to make one of elements selected. if I comment line with // here... all works good, and i see all my option values.
Thanks for help!
When you use [] to access an element in a jquery set, you get back the raw DOM element. So you can not use jquery methods on it directly..
You should also use .prop instead of .attr() when interacting with properties of the element
So use
links.eq(i).prop("selected", true);
replace you for loop with:
jQuery(".ff_elem").val(title);
I have created this DEMO for you. Check it out.
Although You can iterate through all your option elements and find your option element, and then do this:
links[i].prop("selected", true);
but there is no need to iterate when you can simply let your select element do this for you as I have mentioned above.
This is actually how you can select an option based on the value your options have.
$('select').val('value of the option you want to select');
so use
$(".ff_elem").val(title);
Following your code, you could use:
links.eq(i).prop("selected", true);
if your jquery version is above 1.6+ then use this
links.eq(i).prop("selected", true);
else
links.eq(i).attr("selected", "selected");
It can be much simpler. Try something like this:
jQuery(document).ready(function(){
var title = jQuery(".fullVisaImg").attr("inselect");
jQuery(".ff_elem>option[value=" + title + "]").attr("selected", "selected");
});
links is a jQuery collection. When you loop through it, you're just getting the raw element, not a jQuery wrapped version, so you can't use .attr().
Use this instead at your problem line.
$(links[i]).attr("selected", "selected");
Can anyone tell me why this works in older versions of jQuery (e.g. 1.4.2) but if you switch to a later version, e.g. (1.6 +) it stops working?
http://jsfiddle.net/nmvf6/1194/
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit').find('option[text="'+unitName+'"]').remove();
});
});
I have checked the error output in the console for the later versions, and an error seems to occur on the page load, before i've even got as far as it loading up my script and being able to click the button..
When I change the version to 1.8.0 for example and Run the page, this error comes up in my Opera scripts console:
Which seems to be in a "mootools" file..but I didn't select mootools, i selected jQuery 1.8.0
:/
Thanks.
You are using Attribute Equals selector which selects elements that have the specified attribute with a value exactly equal to a certain value, option elements don't have text attributes, you can use :contains selector instead, try this:
Select all elements that contain the specified text.
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit').find('option:contains('+unitName+')').remove();
});
});
FIDDLE
If you want to select the element that has only certain value you can use the filter method:
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit option').filter(function() {
return $(this).text() === unitName
}).remove();
});
});
FIDDLE
You will probably have more luck with this:
$('.assUnit').find('option:contains('+unitName+')').remove();
See also: :contains() selector
try this
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$(".assUnit option:contains('"+unitName+"')").remove();
});
});
I need to find all form elements inside inside a form and trigger a flag on change in the value. Currently I am using the method below. I am not sure if this works or not. But It surely works for: .find('input[type=text])
$('#form').find('input[type=text], input[type=radio], input[type=checkbox], select, textarea').each(function(){
$(this).change(function(){
if( change !== 1 ) change = 1;
});
})
Now I have added multiple elements with the comma. Will this work and is this the best way to do this.
Appreciate all the help.
Thanks!
Try this:
$('#form').find(':input').each(function(){
$(this).change(function(){
if( change !== 1 ) change = 1;
});
})
Check the doc #:
http://api.jquery.com/input-selector/