Apr
25
2010
jQuery // MooTools // script // web

Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

Author An article by qeqnes    Comments No Comments

I’ve been dabbling with Dojo quite a bit lately. I feel great about my MooTools and jQuery skills but I’m a bit still raw when it comes to Dojo. What’s important that I keep in mind, however, is that the tasks I’m trying to accomplish are the same — the syntax is simply different. Here are a few basic JavaScript tasks and the syntax to accomplish them within each awesome framework.

Execute Code when the DOM is Ready

Dojo Toolkit

dojo.ready(function() {
	//do stuff
});

jQuery

$(document).ready(function() {
	//do stuff
});

MooTools

window.addEvent('domready',function() {
	//do stuff
});

Collect Elements

Dojo Toolkit

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');

jQuery

var myElement = jQuery('#myElement');
var divs = jQuery('div');

MooTools

var myElement = document.id('myElement');
var divs = $$('div');

Create Event Listeners

Dojo Toolkit

dojo.connect(dojo.byId('myElement'),'onclick',function() {
	alert('You clicked me!');
});
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1dojo.connect(dojo.byId(‘myElement’),’onclick’,function() {
2 alert(‘You clicked me!’);
3});

jQuery

jQuery('#myElement').click(function() {
	alert('You clicked me!');
});

MooTools

document.id('myElement').addEvent('click',function() {
	alert('You clicked me!');
});
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1document.id(‘myElement’).addEvent(‘click’,function() {
2 alert(‘You clicked me!’);
3});

Create a New Element, Inject Into Document.Body

Dojo Toolkit

dojo.create('div',{
	innerHTML: 'This is a new element',
	id: 'myElement'
},dojo.body());
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1dojo.create(‘div’,{
2 innerHTML: ‘This is a new element’,
3 id: ‘myElement’
4},dojo.body());

jQuery

$('<div id="myElement">This is a new element</div>').appendTo('body');

MooTools

new Element('div',{
	id: 'myElement',
	text: 'This is a new element'
}).inject(document.body);
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1new Element(‘div’,{
2 id: ‘myElement’,
3 text: ‘This is a new element’
4}).inject(document.body);

Execute AJAX Requests

Dojo Toolkit

dojo.xhrPost({
	url: 'save.php',
	content: {
		id: dojo.byId('user-id').value
	}
	load: function(response) {
		alert('Received the following response:  ' + response);
	}
});
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1dojo.xhrPost({
2 url: ‘save.php’,
3 content: {
4 id: dojo.byId(‘user-id’).value
5 }
6 load: function(response) {
7 alert(‘Received the following response: ‘ + response);
8 }
9});

jQuery

jQuery.ajax({
	url: 'save.php',
	type: 'post',
	data: {
		id: jQuery('#user-id').val()
	},
	success: function(response) {
		alert('Received the following response:  ' + response);
	}
});
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1jQuery.ajax({
2 url: ‘save.php’,
3 type: ‘post’,
4 data: {
5 id: jQuery(‘#user-id’).val()
6 },
7 success: function(response) {
8 alert(‘Received the following response: ‘ + response);
9 }
10});

MooTools

new Request({
	url: 'save.php',
	method: 'post',
	data: {
		id: document.id('user-id').value
	},
	onSuccess: function(response) {
		alert('Received the following response:  ' + response);
	}
}).send();
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1new Request({
2 url: ‘save.php’,
3 method: ‘post’,
4 data: {
5 id: document.id(‘user-id’).value
6 },
7 onSuccess: function(response) {
8 alert(‘Received the following response: ‘ + response);
9 }
10}).send();

Animate the Opacity of an Element

Dojo Toolkit

dojo.anim('myElement',{ opacity: 0.7 }, 250);

jQuery

jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl

MooTools

document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);

See? Dojo, jQuery, and MooTools aren’t that different. Same problems, different solution syntax. Like Pete Higgins says: It’s just JavaScript!

Tags: , ,

Related Posts

About the Author:

Leave a comment