homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Multiple elements on a page with the same ID
iamvela




msg:3933973
 2:07 am on Jun 16, 2009 (gmt 0)

Hi, I have a widget that users can put on their own web-page. If the widget gets included multiple times, by a user, on his/her page then we will end up with a scenario with multiple widget-elements on the same page with the same id.

We have to be able to do some things with each of these widgets. Is there away that we can do a document.getElementbyId() and get an array of all matching elements?

For what we are doing we are running into a problem with Firefox.

Any pointers would be much appreciated. Thanks.

 

g1smd




msg:3933983
 2:38 am on Jun 16, 2009 (gmt 0)

An ID *must* be unique per page. That's in the HTML specs.

Gibble




msg:3934000
 3:20 am on Jun 16, 2009 (gmt 0)


An ID *must* be unique per page. That's in the HTML specs.

Most browsers don't break if it isn't though, but I agree, it definitely should be.

You could use class names instead to give items names. Personally, I would use jQuery so you can use CSS selectors to find elements.

Fotiman




msg:3934338
 1:33 pm on Jun 16, 2009 (gmt 0)

Most browsers don't break if it isn't though, but I agree, it definitely should be.

Well, I guess that depends on your definition of "breaks". If you want to access one of those items via it's ID using document.getElementById, you won't be able to.
As Gibble wrote, you should use class names instead of IDs. I think all of the JavaScript libraries have methods to get elements by class name.

The jQuery way:

// Get all elements with class 'myclass'
var nodes = $('.myclass');

The YUI 2.7.0 Selector way:

// Get all elements with class 'myclass'
var nodes = YAHOO.util.Selector.query('.myclass');

The YUI 2.7.0 getElementsByClass way:

// Get all elements with class 'myclass'
var nodes = YAHOO.util.Dom.getElementsByClassName('myclass');

Just a few examples.

iamvela




msg:3934976
 8:53 am on Jun 17, 2009 (gmt 0)

Thanks for the suggestions to use jQuery but because the footprint needs to be reaaaly tiny we cannot use jQuery.

So lets say I want to make each widget "hidden" Is there a way I can do that? BTW this works in IE, but FF just hides the first one.

Fotiman




msg:3935173
 1:50 pm on Jun 17, 2009 (gmt 0)

You could write your own "getElementsByClass" function. Or use the Yahoo minified files (yahoo-min.js and dom-min.js are only about 3k and 6k respectively).

Gibble




msg:3935178
 2:00 pm on Jun 17, 2009 (gmt 0)

jQuery actually has a really small footprint, and is very fast.

The minified file is only 19k.

And it's selectors run fast as well. Or you can use this tool to compare the speeds in your browser of different libs (search google for slickspeed).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved