jquery selector problem - javascript

I'm trying to select a div with the id "about me". I think I am having problems because of the spaces.
alert($link.attr("title"));
I get "about me"
alert($('#'+$link.attr("title")).attr("title"));
I get undefined.
I have tried to use php and jquery methods for removing them but it doesn't work.
So how do I get around this?

You need to remove the spaces, IDs with spaces aren't valid, and you'll have all sorts of issues...just like this :)
You can escape it like this:
alert($('#'+$link.attr("title").replace(/ /g, "\\ ")).attr("title"));
But this is not the correct solution to the problem, removing the spaces is the correct approach.

In general, if you want to get an element by a variable ID it's better to do that via the plain DOM getElementById method than to try to shoehorn it into a selector with all the escaping issues that brings with it. eg:
$(document.getElementById($link.attr("title")))
However, for the particular case of the space character, it's invalid, period; as Nick says, you need to get rid of it. Whilst IDs are much more permissive in HTML5 than they were in HTML4 and XHTML1, even in HTML5 spaces are not allowed.

Related

CSS selector that excludes some child elements

I have this HTML:
<div class="item-cost">
<a data-passage="Shop" class="link-internal macro-link" tabindex="0" id="Link1">$10 <sup>1</sup></a>
</div>
I am writing this testcafe code to get the cost:
.expect(Selector('.item-cost').nth(0).innerText)
.eql('$1')
This fails because the inner text is $11, not $1. The reason it's failing is because the contents of the sup element are included in the inner text. Is there any way I can modify the selector above so that it gives me the inner text without including the sup element? I cannot modify the HTML.
How about using <sup> in your test too?
.expect(Selector('.item-cost').nth(0).innerText)
.eql('$1 ' + Selector('.item-cost sup').nth(0).innerText)
Instead of using innerText, use innerHTML and then use a regexp to remove the trailing <sup>...</sup> (including the space before <sup>):
.expect(Selector('.item-cost').nth(0).innerHTML.replace(/ <sup>.*<\/sup>$/, ''))
.eql('$1')
That will give you just the $10.
I hesitate to add my 2 cents to this discussion as I just happened to stumble into it and am not really familiar with testcafe. But those 2 cents are too long for a comment, so I figure I'll post it as a possible answer and you make of it what you will.
It seems to me that what you are trying to do is select the text of the <a> node while at the same time excluding that of its <sup> child node. An operation like that is easily achieved by using an xpath expression like:
//div/a/text()
Unfortunately, testcafe doesn't seem to support xpath and there is no intention to do it in the future. The main reason seems to be the existence of utilities that can convert xpath to css selectors for use with testcafe.
Unfortunately again, xpath and css selctors aren't equivalent and there are things you can do with xpath that cannot (currently) be done with css selectors. And this case is probably one of them.
To the rescue may comes this utility for adding xpath support to testcafe. So I would try using that with the xpath expression above and see if it works for you. If not, no harm done, I guess.

Select element with percent sign (%) in its id with jQuery

I have an element like this:
<a id="my%20id" href="#">hello</a>
I've been trying desperately to select it with jQuery, but cannot. I've tried:
$('a#my id') // obviously won't work
$('a#my\ id') // no such luck
$('a#my%20id') // unrecognized expression
$('a#my\%20id') // still unrecognized
$('a#' + encodeURIComponent('my id')) // same thing as 'a#my%20id'
Is it possible to select this at all with jQuery?
You can use attribute selector, giving id in quotes will get the exact id.
Live Demo
$('[id="my%20id"]')
Use the trustworthy document.getElementById:
$(document.getElementById("my%20id")).text();
Performance should be better than using an attribute selector, as you rely on a native method call to find the id. It's a bit more verbose than the other solutions, if that's an issue.
Actually you need a lot of escaping here:
$("#my\\%20id").text("HI");
\% is not a valid escape, you want \\% which will escape correctly and get the correct id.
You can check an example on jsFiddle.

id.text() of jquery ignoring more than 1 white space in ie8

I have a span with id SOMEID.When I am accessing its text value using folloing code it is breaking in IE8 and IE7 only.How to fix it.
$("#DocumentPath").text(). If DocumentPath contain name like My doc.txt it is not working. Note here there is 3 white space between My and doc.
You very vague problem description "code it is breaking" can make us only guess, but note the following: IE treats whitespaces in the markup differently than other browsers.
From the docs:
(Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)
The result of the .text() method is a string containing the combined text of all matched elements.
As of jQuery 1.4, the .text() method returns the value of text and CDATA nodes as well as element nodes.
Thus said, it may be more appropriate for you, to use the html() method.
Should be
$("#DocumentPath").html()
That said you say your span has an id SOMEID?! If it's id is SOMEID it should be:
$("#SOMEID").html()
Maybe you should try another approach, on jQuery's docs they recommend call .eval() function to retrieve a value instead of .text() check their doc:http://api.jquery.com/text/
So the code snippet could be:
$("#DocumentPath").eval()
Regards
:)

javascript - name or id of element

Is this.form.sel2 similar to document.getElementById('sel2')?
My select tag is as follows:
<select size=5 id="sub_player_ids" name="sub[player_ids][]">
And when I am putting the name of the tag, i.e, sub[player_ids][] in my javascript code, am getting a syntax error.
I am trying to find a workaround so that instead of using the name of the element, i want to use the id.
However using document.getElementById('sub_player_ids') is not working.
Thanks for any suggestion provided.
Please see my javascript code below:
<input type="button" value="-->"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="<--"
onclick="moveOptions(this.form.sel2, this.form.sel1);" />
The id of your element is sub_player_ids, not sel2. So document.getElementById("sub_player_ids") would work.
You may also find that this.form["sub[player_ids][]"] would work. Using the quoted form lets you use things that you can't use in the literal form.
Something to beware of is that IE7 and earlier have a broken version of getElementById that will find things that use the given string as a name, rather than as an id, even if something later on the page actually uses it as an id. (Yes, really; more here.) Some libraries will work around that for you (jQuery does, for instance). And actually, speaking of libraries, a good library really can help work around all sorts of browser inconsistencies and provide a lot of handy utility functionality, letting you concentrate on your actual business problems. You might consider looking at jQuery, Prototype, YUI, Closure, or any of several others.
You can use bracket notation instead:
this.form['sub[player_ids][]']
...or getElementById(), with the right ID:
document.getElementById('sub_player_ids')
Use document.getElementById('sub_player_ids') to get that element.
You have the wrong id
document.getElementById('sub_player_ids')
verify that your options contains id, it would only be containing name with sel2

How can you use jQuery to do something to a certain string in the page text?

Is there a way to use jQuery to search a <p> and do something to each occurrence of a string.
For example make every string "magic" in the page bold?
Is there a way to do it for a character so that every 'a' could be made bold? It appears contains just gives the element that contains the text and not the string itself.
I think i'd use a combination of JQuery and JS regexps: JQ to find the elements to process and get the contents out of each, JavaScript's replace() method to do the string manipulation, and JQ to put the modified contents back in the DOM elements.
$('p').each(function(){
$(this).html($(this).html().replace(/(bold)/,'<b>$1</b>'));
});
http://www.jquery.info/spip.php?article50
this plugin will do the bolding example. If you need it to do something else, you can modify the plugin as needed.

Categories

Resources