I need to loop through each occurrence of (spans where id=getthis):
<span id=“getthis” name=“info:to:send:to:script”></span>
on my webpage and foreach of these occurrences, insert a response from an ajax call based on the content of the name tag.
Any help appreciated 
You’re going to have trouble from here on, due to id attributes needing to be unique identifiers. That means, no duplicates id’s are allowed on the same page.
Hi Paul,
Well ok we can go with class=“getthis” instead
Depending on how the spans are organised on the page, you may not even need to use multiple classes. A single identifier or class on a common parent is the best way, so that from there you can get all the spans.
Can you provide some info about how the spans are organised?
The spans could be anywhere on the page, and so won’t be simply within a certain div.
That’s good to know.
Are you using a pre-existing code library on the page, such as jQuery, or will you want to use native-JavaScripting techniques.
I’d rather use native js as the script if possible!
Good stuff, in that case you can use the code and examples from [url=“http://bulletproofajax.com/”]bulletproof ajax as the basis for the ajax work.
When it comes to searching for elements by their class name, there are fast web browser techniques where getElementsByClassName is supported, but where browser support is lacking (I’m mostly looking at you, Internet Explorer) you can fall back on custom versions of getElementsByClassName, and then knit them together so that native browser support takes precedence over the other one.
Thanks. How can I loop through all of the spans and call my ajax function foreach with the span name info, and then update the contents of each span with the result? That’s what i’m really looking for an example of! I should be ok with the ajax side etc…
You would use getElementsByClassName to retrieve an array-like object that consists of the matching elements, and then a simple for loop to loop through each of them.
You can give the ajax request a callback function that updates the content after it has been successfully received.
So including that js script and then something like this should alert each span’s name contents?
function getspans(){
var spans = getElementsByClassName("getthis");
for(var i=0; i<spans.length; i++)
{
alert(spans[i].name);
}
}
window.onload = getspans();
Although this doesn’t alert anything on a target page which contains a series of spans with class=“getthis” and name=“…”
No, it won’t, because currently your getElementsByTagName doesn’t exist.
Normally it’s called from the document object, but if it doesn’t exist you can provide an alternative function to get the job done, such as from one of the previous links.
if (!document.getElementsByClassName) {
document.getElementsByClassName = ... // function here
}
At which point, your code can then use document.getElementsByClassByName(…) regardless of whether the web browser supports it or not.
Sorry, I’m not following that! Can you put my example code into your explanation?
My sample code goes before any of your code. The purpose of that sample code is to be compatability code, to check if the web browser has a built-in getElementsByClassName method, and if not to let the browser know how to do it.
Many thanks. I’ve just dug out some old jquery/json code so I’m experimenting with that right now (sorry if I’ve wasted your time!)
Let’s say I have this stucture:
html page with a few <span id=“getthis”></span>
script1.php consists of echo’d document.write(…) js (php so i can do some db stuff too)
script2.js contains jquery calls to grab each of spans with id getthis (ids just for now!!)
Why wouldn’t script2.js be able to see the spans on the 1st html page?
I had it working when the script2.js was included directly from the 1st html page, just not since i’ve added it within another js file.
I also tried this but didnt work:
window.parent.$(“#getthis”, this).each(function () {
That we can figure out by taking a look at the resulting HTML code that is served up to the web page.
I would actually stay away from a custom getElementsByClassName for something like this and rather go with getElementsByTagName. The custom getElementsByClassName that you would need to write for browsers that don’t support it will have to loop through the entire DOM (unless you use one that specifies a tag name with it) when he already knows that we’re looking for spans. Not a showstopper or anything, but why not save time when you can :).
I would do something like this:
var els = document.getElementsByClassName ? document.getElementsByClassName('getthis') : function() {
var allSpans = document.getElementsByTagName('span'),
myClass = new RegExp('\\\\bgetthis\\\\b'),
retVal = [];
for (var i = 0, len = allSpans.length; i < len; i++) {
var classes = allSpans[i].className;
if (myClass.test(classes)) retVal.push(allSpans[i]);
}
return retVal;
}();
Didn’t test this btw…
Since he seems to now be using jQuery, he doesn’t even need to use any of those native techniques either now.