I'm fairly new to jQuery and I ran into this problem while trying to combine .val() with :contains(). I'm trying to get input from a text field and check to see if that input is in a paragraph, and highlight it in that paragraph. All of the code here is strictly based on information I got from the jQuery API, but I can't get it to work.
See the jsfiddle here: http://jsfiddle.net/tUKp8/
Here is my jQuery code:
$("input").keyup(function () {
var value = $(this).val();
$("p:contains('value')").css("text-decoration", "underline");
}).keyup();
you neeed
$("p:contains(" + value +" )").css("text-decoration", "underline");
Two problems:
The string is not being concatenated--variable names need to be outside of strings and added using the concatenation operator (+). Right now you are passing in the string 'value' to contains(), which will only find p elements that contain the text 'value'. Instead, concatenate using the variable you declare, like so:
$("p:contains(" + value + ")").css("text-decoration", "underline");
Now value will be passed into the jQuery selector.
You don't need to chain keyup() to the end. Passing no arguments into this method triggers a keyup event, which, at least in this limited example, doesn't do anything. See the jQuery API for keyup() here: http://api.jquery.com/keyup/. What you're doing with the last .keyup() falls into the third category.
Hope this helps!
Related
I would like to use jQuery's .text() method to get my text contents of div element. Which is fine & works fine, however, I am trying to come up with a method to allow ONLY to get .text(); of first 10 text characters, is this possible?
Overriding jquery's .text() will show reflection everywhere.
So the best option would be create a function for doing this,
function myText($elem,len=10){
return $elem.text().substr(0,len)
}
and call it like myText($("#textWithElement")). Also you can alter your returning text's length by passing the second parameter myText($("#textWithElement"), 5).
And due to the confusion happened in comment section, I would like to add some details about the usage of substr and substring at this context.
"string".substr(0,2) //where 0 is the start and 2 is the length
"string".substring(0,2) //where 0 is the start and 2 is the to (not inclusive)
So here in your context, both would yield the same result. But it is good to know about the difference between the both.
el.text().substring(0,10);
where el is a jquery element
Based on the input variable "feeling", I would like to click a button (good,bad or ok). How do i specify the input variable in casper.click?
var feeling = 'bad'; //User can choose good, bad or ok
.
.
logit_feeling(feeling); //fucntion call
.
.
// fucntion defnition
var logit_feeling = function (feeling){
casper.then(function (){
casper.click(x('//*[text()='feeling']'));
});
}
You have to properly quote and build the string that you would pass to the XPath helper:
x('//*[text()="'+feeling+'"]')
Oftentimes HTML is written with a lot of whitespace which is not shown when it is rendered. You would need to make this a little more robust:
x('//*[contains(text(),"'+feeling+'")]')
kbet,
As the Artjom said, you can concatenate its variable in the XPath string and get the property element text ().
In some cases, you can still pursue, as well as the axes text () as may search for **. **.
For example:
'//a[.,"sample"]'
As above, the text is accurate as at the string. You can even compare some of the text, using the CONTAINS:
'//a[contains(.,"sample")]'
Another option you may consider is using casper.click () with the CSS path element (if you can):
casper.click("my > css > path");
I hope you can help! ;)
I have a simple form so user send his vote.
There I need to know what radio button user select.
The version I found to solve it was this. How can I get which radio is selected via jQuery?
value = $('input[name=vote]:checked', '#frmSurvey').val();
This work ok. Even when I dont understand how that work, because in Jquery selector documentation there is only 2 example with item separated by coma. And neither match my example where each element is inside a quote and then a coma
.class , .class ---> $(".intro,.demo") All elements with the class "intro" or "demo"
el1 , el2 , el3 ---> $("h1,div,p") All < h1>, < div> and < p> elements
Both looks like OR selector instead of find A and then find B inside A.
So if anyone can tell me what kind of selector is that I would love to take a look into the documentation
Now the optimization I was thinking. If I already inside a function for #frmSurvey won't be faster if I use the this element
$('#frmSurvey').ajaxForm(function () {
value = $('input[name=vote]:checked', '#frmSurvey').val();
console.log('working way ' + value);
value = $(this).find('input[name=vote]:checked').val();
console.log('testing way ' + value);
But I couldn't make the second version to work. Second value get me undefined.
So how I fix second version?
And would be second version better than first one as my instinct suggest or I'm worrying too much?
Your first example shows a selector operating from a context selector, whereas the documentation you've shown shows a "multiple selectors" selector.
You seem to have partially grasped this as
value = $('input[name=vote]:checked', '#frmSurvey').val();
is essentially the same as
value = $('#frmSurvey').find('input[name=vote]:checked').val();
However, the context of "this" inside your function is not clear as it depends upon how the ajaxForm plugin is coded. It isn't necessarily the result of your initial selector. After a short play with the plugin, it would appear that this in the context of ajaxForm is the jQuery ajax request object.
My J query code looks like this
jQuery(document).ready(function($) {
$(".respond").submit(function(event){
var $form = $(this);
.....
I want to grab the name of the submit button that was clicked...
I tried couple of things like this but it didn't worked...
console.log($("$form input:submit").attr("name"));
....
console.log($form+$("input:submit").attr("name"));
.....
But this works.
console.log(".respond input:submit").attr("name"));
i don't know why it didn't works when i use $form.
Can someone tell me how do i find the input of that .respond using $form(or $this) .
Thanks
The $form variable is a jQuery object. As such you cannot simply concatenate it to another object.
If you want to find one element within another, use find():
$form.find('input:submit');
Or a contextual selector:
$('input:submit', $form);
Use find with form to get its descendant, you are concatenating object with string with wont give you what you want. If you want to get the descendants of the object then use find()
console.log($form.find("input:submit").attr("name"));
You can also try using
event.target.name
How to store string with HTML tags in hidden field using jquery?
I am using the below code. But its not working.
var terms = $('#TermsAndCondition').val();
alert($('#hdnTerms').val(terms));
Here TermsAndCondition is TextArea and hdnTerms is hidden field.
In alert it returns the object.
use something like this
var value=$("input[type=hidden]").val();
alert(value);
You're just querying it wrong, try this
var terms = $('#TermsAndCondition').val();
alert($('#hdnTerms').val(terms).val()); //Note the extra .val() so you get the value
.val(terms) returns a jQuery object, not the value, you need to call .val() with no parameters to get a the value returned.
Assigning to .val() does not return the text (it returns a jQuery object), change your test to:
$('#hdnTerms').val(terms);
alert($('#hdnTerms').val());
To access the value you must call val() without parameters.
May I suggest you to simply use:
//hide terms when you don't need them
$("#TermsAndCondition").hide();
//show them again when you want
$("#TermsAndCondition").show();
not sure what you are trying to achieve there