This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Saturday, August 23, 2008

MooTools Basic Tips (lesson 2): get elements ID using unobtrusive code

After my previous post about MooTools Basic Tips for web designer I received a lot of excited messages from my readers, lovers of this beautiful framework, for this session of lessons dedicated to MooTools. Thanks a lot guys! I really appreciate your support! So... a question which a lot of peopole asked to me was how it's possible to get the ID of an element (for example the ID of an element into a list) and associate to this element some event (change background, display an alert message...). In this post I want to illustrate how to get the ID of DOM elements using MooTools and unobtrusive elegant code.


1. An "Obtrusive" way to implement it
Before to explain how to do it with MooTools, I think it's better take a look at the following HTML code:

<ul id="myList">
<li id="li_1">
<a href=
"#" onClick="javascript:getId('1')">Get this ID</a>
</li>

<li id="li_2">
<a href="#" onClick="javascript:getId(2)">Get this ID</a>
</li>

<li id="li_3">
<a href=
"#" onClick="javascript:getId(3)">Get this ID</a>
</li>

</ul>


This is a simple list with some list elements with id "li_1", "li_2", "li_3". Each list element contains within a link which calls, with an event onClik, a Javascript function getId(). This function takes in input the number related to the list element ID, within which the link is contained, displaying a simple alert window with the ID of the element you've chosed. The result is something like this:



Javascript code is something like the following:

<script type="text/javascript">
function getId(el){
var listElement = el;
alert("The ID of the list element you've chosen is: li_"+listElement);
}
</script>

...it's simple and clear if you have basic javascript notions. But why this code is obtrusive?. Because, withing HTML code, it contains a call to the JavaScript function getId():

<a href="#" onClick="javascript:getId('1')">Get this ID</a>

It's not wrong. But it's better to separate HTML code from JavaScript code. How you can do it? Read more...


2. The unobtrusive way to implement it using MooTools
Ok, now we are ready to see how we can implement the same script using unobtrusive code with MooTools. First, take a look at the HTML code:

<ul id="myList">
<li id="li_1"><a href="#">Get this ID</a></li>
<li id="li_2"><a href="#">Get this ID</a></li>
<li id="li_3"><a href="#">Get this ID</a></li>
</ul>


What's changed from the step 1? I removed onClick event within each link:

<li id="li_1"><a href="#" onClick="javascript:getId('1')" >Get this ID</a></li>

Than, how changes JavaScript code to get the ID of the element? First, remember to add a link to MooTools framework in the <head> tag of the page:



Copy and paste the following code within the <head> tag:

<script type="text/javascript" src="mootools.svn.js"></script>

... and now copy, below the previous code, the following:

<script type="text/javascript">
window.addEvent('load', function(){
$('myList').getElements('li').each(function(el){
el.getElement('a').addEvent('click', function(listID){
alert("The ID of the list element you've chosen is: "+listID);
}.pass(el.id)
);
});
});
</script>

How you can see, I used getElements() method to get all <li> tags within <ul> list with ID "myList ". Every times you click on <a> element contained into a <li> tag, the function display an alert window with the ID of the element you've chosed, passing the ID using .pass(el.id) method. It's all and it's very simple!

Take a look at the source code:

Download source code

Add a comment for other info or request!


Related Content
MooTools Basic Tips for Web Designer (Lesson 1)

blog comments powered by Disqus
weblizzer said...

such a great tutorial. Even i work with mootools lately i still have to learn some techniques in different way.

Sara said...

Thanks, useful and interesting :)

Anonymous said...

I love this blog! Thanks for this post!

Ninja said...

I was looking for something like this! Thanks!

Tonio said...

window.addEvent('domready', function(){

$$('#myList li a').each(function(el){
el.addEvent('click', function(){
alert("The ID of the list element you've chosen is: "+el.getParent().get('id'));
});
});

Simpler, no ? :)

admin said...

good tutorial, any lesson I need them!

Anonymous said...

You don't need MooTools for this, unobstructive javascript is harder to debug for someone that has not written the code.

Anonymous said...

With MooTools, using get(), how do I get the value of the link I click on. I mean, I would like to see an alert "Click me" when I click a link:
Click me

Thanks,
ngungo

Suparna said...

Thank you so much your code help me a lot.

website design said...

thanks for the great post. very informative and well written! thanks for sharing it.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News