Jquery | Kevin Chisholm - Blog

Feb252013 by dcmNo Comments

jQuery Plugin Authoring – The Absolute Basics – Part I

You know a little jQuery, you have used a few jQuery plugins, and now you want to write your own jQuery plugin. Don’t worry, it’s no big deal. In fact it’s fun.

If you have been putting off authoring your first jQuery plugin, it’s time to wrap a bandana around your head, fire up “The Eye of the Tiger” by “Survivor” and figure out how to defeat Apollo Creed. Sorry, for the cheesy 80s reference, I couldn’t resist.

But seriously, it really is no big deal. The most important thing is to get a firm grip on the fundamentals. That part is serious. If you don’t understand what you are doing from a jQuery-architecture standpoint, then you will quickly find yourself in a quagmire of muck and filth, and you don’t want that.

In this article we will discuss the absolute basics of how to author a jQuery plugin:

Wrapping your plugin in a self-executing anonymous function
Extending the jQuery prototype,
Iterating over each element in the jQuery collection returned by your plugin.

This is the big stuff. Once you get your noggin around these concepts, the fun can begin.

A note about Self-executing anonymous functions

These are otherwise known as “immediate functions”. An immediate function is simply a function that is wrapped in parentheses, and followed by a pair of parentheses:

(function(){
	//code here fires right away, you don’t need to call the function
})();

(function(){

//code here fires right away, you don’t need to call the function

})();

You can learn more about immediate functions in my blog post: “Immediate Functions in JavaScript – The Basics” as well as my blog post: “Using an Immediate Function to Create a Global JavaScript Variable That Has Private Scope”

The main point here is to make sure you are comfortable with the concept of an immediate function in JavaScript. It’s important to do before reading further.

Where does my jQuery plugin code go?

Good question. The answer is: In its own file. By convention, you’ll want to create a JavaSript file named jquery.myPlugin.js. Then you’ll need to reference it just as you would any other JavaScript file:

<script src=”[PATH TO]/jquery.myPlugin.js”></script>

1	<script src=”[PATH TO]/jquery.myPlugin.js”></script>

Just make sure you reference jQuery before you reference your plugin.

For simplicity sake, we will reference our jQuery plugin via a set of SCRIPT tags, right in the page (that is perfectly valid, but definitely not practical).

<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>My first jQuery Plugin</title>
        <script src="jquery.js"></script>
    </head> 
    <body>
    	<p>some content here...</p>

	<script>
			//our plugin code is gonna go right here!
	</script>

	<script>
		$(document).ready(function(){
			//we're gonna invoke our plugin here!
		});
	</script>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>My first jQuery Plugin</title>

</head>

<body>

<p>some content here...</p>

//our plugin code is gonna go right here!

</script>

$(document).ready(function(){

//we're gonna invoke our plugin here!

});

</script>

</body>

</html>

Example # 1

(function(){
	$.fn.myPlugin = function() {
		this.each(function(){
			//plugin code goes here
		});
	};	
})();

(function(){

$.fn.myPlugin = function() {

this.each(function(){

//plugin code goes here

});

};

})();

In example # 1 we have the absolute bare-bones code needed for a jQuery plugin. Here are the important points to consider for example # 1:

Wrap your jQuery plugin in an immediate Function

This is considered a best-practice and for good reason. Taking this approach allows you to create as many variables as you need in your plugin, without polluting the global namespace. Don’t overlook this, it allows you complete freedom with regards to the number of variables you need to create, and sandboxes all of these variables very nicely.

Again, an immediate function is simply a function that is wrapped in parentheses, and followed by a pair of parentheses. It fires right away when the JavaScript is evaluated, you don’t need to (and cannot) call the function. It just fires right away and whatever code you implement in that function executes. It’s a great way to provide private variable scope to some code without a whole lotta fuss.

If you are still having a tough time with the concept of immediate functions, stop, do a google search for JavaScript Immediate Function, learn it, live it, ask it out on a date, marry it, and then come back here to keep on reading.

https://www.google.com/search?q=javascript+immediate+function

(I’m serious about this immediate function thingy)

Your jQuery plugin becomes a property of the jQuery prototype object

jQuery is a function. Actually, the code in jQuery follows the factory pattern and returns a function that in-turn returns different kinds of things, depending on what you pass into that function. Most of the time, it returns an HTML collection wrapped with jQuery (hence a jQuery collection object), but again, the actual return value depends on what you are passing in.

Every JavaScript object has a prototype property, this includes functions. jQuery exposes its prototype property as “fn”. So, you simply assign your plugin to be a property of that “fn” object. Once you have done that, jQuery now has a new method that is YOUR plugin.

$.fn.myPlugin = function(){
	//insert awesome code here
};

$.fn.myPlugin = function(){

//insert awesome code here

};

Now you can do this:

$(‘div’).myPlugin();

1	$(‘div’).myPlugin();

Inside of your plugin, the JavaScript keyword “this” is already a jQuery object

Most people know that inside of a jQuery callback, “this” usually refers to the current native DOM element that is being iterated over. When you wrap “this” in jQuery, it becomes a jQuery object. So, we often refer to “this” as “$(this)”.

Inside of your plugin, there is no need to do that because the JavaScript keyword “this” is already a jQuery object. If you refer to “this” as “$(this)”, it’s not going to kill anyone, but it is not necessary and just uses more memory than is needed.

$.fn.myPlugin = function(){
	//”this” is already a jQuery collection object
};

$.fn.myPlugin = function(){

//”this” is already a jQuery collection object

};

Your jQuery plugin returns a jQuery collection

What your jQuery plugin returns depends on the CSS selector that was passed-in. For example, if you do this: $(body).myPlugin(), your jquery plugin will return a jQuery collection that has exactly one element: the BODY tag of your document (unless of course you have more than one BODY element in your page, which would be a bit of a head-scratcher). So, if you have an unordered list that has for example three items, and you invoke your plugin like this: $(ul li).myPlugin(), then your plugin will return a jQuery collection that contains three elements.

Use this.each() to iterate over all of the elements that are returned by your jQuery plugin

jQuery’s .each() method is a lovely little tool that allows you to iterate over a jQuery collection and “do something” to each element. Keep in mind that a jQuery collection can always contain exactly one element, and when it does, then the .each() method will run once. But when a jQuery collection contains multiple elements, then the .each() method will run once for EACH element in that collection.

When you use the .each() method, you pass in an anonymous function, and inside that function you have access to the current element that is being iterated over. It is here that you will need to wrap “this” with jQuery if you want it to be a jQuery object: Use $(this) for the jQuery object that represents the current element, or simply “this” for the native DOM element implementation. This anonymous function takes as its first argument the index of the current element. This is surprisingly handy: what if you want to know if this the the first element in the collection? or the last? That index number will help you with that task.

Now you are ready to write some awesome jQuery plugin code

Thanks for hanging in there. The preceding details were important. I know you are anxious to write some code, but understanding the outer architecture of a jQuery plugin is critical. If you do not understand what was just covered, then you will quickly be awash in spaghetti code that is not working right and will be difficult to debug. I promise you.

Example # 2

//Example # 2A
//run myPlugin against every A tag in the document
$(document).ready(function(){
	$('a').myPlugin();	
});

//Example # 2A

//run myPlugin against every A tag in the document

$(document).ready(function(){

$('a').myPlugin();

});

In example # 2, we invoke our jQuery plugin. We wrap it in a $(document).ready() call so that it only fires once the document is ready.

Invoking our plugin is as simple as $(CSS SELECTOR).myPlugin().

This is because our plugin is a property of the jQuery prototype object, which makes it a completely valid jQuery method. Nice.

Example # 3

//Example # 3A
//run myPlugin against every LI tag in the document
$(document).ready(function(){
	$('li').myPlugin();	
});

//Example # 3B
//run myPlugin against every LI tag in the document that is the last one in a list
$(document).ready(function(){
	$('li:last').myPlugin();	
});

//Example # 3C
//run myPlugin against the BODY tag
$(document).ready(function(){
	$('body').myPlugin();	
})

//Example # 3A

//run myPlugin against every LI tag in the document

$(document).ready(function(){

$('li').myPlugin();

});

//Example # 3B

//run myPlugin against every LI tag in the document that is the last one in a list

$(document).ready(function(){

$('li:last').myPlugin();

});

//Example # 3C

//run myPlugin against the BODY tag

$(document).ready(function(){

$('body').myPlugin();

})

In example # 3, we see how our plugin can behave differently depending on what we pass into it. In each case, the jQuery collection object returned by our plugin will differ, depending again on what CSS selector we passed-in.

Example # 4

(function(){
	$.fn.myPlugin = function() {
		//for each element in the collection
		this.each(function(){
			//make the element green,
//..the background yellow,
//...and the font bold 18px Comic Sans 
			$(this).css({
				'color':'green',
				'background-color': 'yellow',
				'font': 'bold 18px "Comic Sans MS",cursive,sans-serif'
			});
		});
	};	
})();

(function(){

$.fn.myPlugin = function() {

//for each element in the collection

this.each(function(){

//make the element green,

//..the background yellow,

//...and the font bold 18px Comic Sans

$(this).css({

'color':'green',

'background-color': 'yellow',

'font': 'bold 18px "Comic Sans MS",cursive,sans-serif'

});

};

})();

In example # 4, we have included some implementation code so that our jQuery plugin actually does something. I this case, for each element returned in the jQuery collection, we change the CSS so that the element’s color is green, the background color is yellow, and the font is “Comic Sans”. Not too pretty, but just enough so that when we run the code, we can see that our plugin is working perfectly. More importantly, if you vary the CSS selector that is passed-in, you will see that our plugin behaves differently in each case (i.e. the HTML elements that become green with yellow backgrounds and Comic Sans font will vary).

Full Working Code for this Article
http://jsfiddle.net/wdUtL/

Full Working Code for this ArticleWith Comments
http://jsfiddle.net/ewTez/

Summary

In this article we discussed the absolute basics of how to author a jQuery plugin. We covered how to wrap your plugin in a self-executing anonymous function, how to extend the jQuery prototype, and how to iterate over each element in the jQuery collection returned by your plugin.

This example provided in this article was very simple. The main purpose of the article was to provide the overview needed so that you understand how a jQuery plugin is constructed, how it works at the most basic level, and importantly how the value of the JavaScript keyword “this” will vary a bit, depending on where you are in the code.

With a firm understanding of how a jQuery plugin is constructed, we can move on to best practices and more intermediate jQuery plugin authoring techniques.

Helpful Links for jQuery plugin authoring basics

http://docs.jquery.com/Plugins/Authoring

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

http://blog.kevinchisholm.com/jquery/jquery-each-method/

Sep172012 by dcmNo Comments

Harnessing the Power and Simplicity of jQuery.append() and jQuery.prepend()

jQuery

I’m a big believer in making sure that you understand what is going on under the hood when you use jQuery. But there are times when it just makes sense to leverage jQuery; otherwise you would literally wind up just writing your own library.

One of the many such cases is when it comes to creating elements and then injecting them into the DOM. So let’s jump right into a few examples which will make it easier to highlight these features.

First, here is the markup we will be working with for all of the examples:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML5 Template</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head> 
    <body> 
        <div id="foo"></div>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Template</title>

</head>

<body>

</body>

</html>

Native JavaScript

Example # 1:

var foo = document.getElementById('foo');

var txtEl = document.createTextNode("hello");

foo.appendChild(txtEl);

var foo = document.getElementById('foo');

var txtEl = document.createTextNode("hello");

foo.appendChild(txtEl);

Here is the JsFiddle link for Example # 1: http://jsfiddle.net/pvwP4/

When it comes to injecting new elements into the DOM, these methods virtually eliminate the verbose syntax of Native JavaScript

In Example # 1, I wanted to quickly review the absolute minimum native JavaScript needed to append text to an element in the page. Needless to say, if you want to accomplish anything useful, such as appending an unordered list, or complex markup that involves nested elements or images, etc., then you will wind up writing a bit of code. That’s just the state of native JavaScript today.

I tend to use jQuery as little as possible, mainly as an exercise in keeping my native JS skills sharp. But when it comes to creating and appending elements, jQuery.append() and jQuery.prepend() are hard to beat. It just saves so much time.

jQuery.append()

Example # 2:

$("#foo").append("hello");

1	$("#foo").append("hello");

Here is the JsFiddle link for Example # 2: http://jsfiddle.net/tWSW8/

So, in Example # 2, our three lines of JavaScript have been reduced to one line of jQuery. Nice.

Example # 3:

var str= '';
var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){
str += '<li>' + i + '</li>'; 
}

UL.append(str);

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){

str += '<li>' + i + '</li>';

}

UL.append(str);

$("#foo").append(UL);

Here is the JsFiddle link for Example # 3: http://jsfiddle.net/9pHQ2/

And here in Example # 3, we get into the fun stuff. First, one of the absolute joys of jQuery: the ability to create a DOM element by simply passing a set of opening and closing HTML tags to the $() method. Here I pass in an opening and closing DIV tag, and that’s it; we now have a reference to a new element that, while not yet in the DOM, is in memory and fully available to us for whatever we need. We then use a for loop to create LI elements using string concatenation.

Example # 4:

var str= '';
var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    UL.append(LI);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

UL.append(LI);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 4: http://jsfiddle.net/mExAw/ In Example # 4, we start to put jQuery.append() to work. So inside of a for loop, we dynamically create list items, and append them to an unordered list. In order to keep things simple, we just use the value of the counter as the text. A more real-world example would be consuming JSON, and for each item in that JSON, creating the markup we need for the page.

Example # 5:

var str= '';
var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.appendTo(UL);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

LI.appendTo(UL);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 5: http://jsfiddle.net/JMy2J/

So now, in Example # 5, we turn things around by using the jQuery.appendTo() method. It could not possibly be simpler. Instead of UL.append(LI), we just say: LI.appendTo(UL). In other words, first we said: “…to that UL, append this LI”, and now we are saying: “…append this LI to that UL”.

jQuery.prepend()

Example # 6:

var str= '';
var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.appendTo(UL);
}

for (var i = 6; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    UL.prepend(LI);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){

var LI = $("<li></li>");

LI.append(i);

LI.appendTo(UL);

}

for (var i = 6; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

UL.prepend(LI);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 6: http://jsfiddle.net/D3B7G/

In Example # 6, we demonstrate the jQuery.prepend() method. There certainly is no mystery to this: it provides the opposite functionality of jQuery.append(). We create an unordered list, just as we did in the previous examples, but then we create another set of LI elements, and prepend them to the UL. I specifically counted down from 10, so that it would be obvious in the example that we have used jQuery’s prepend() method, and not append().

Example # 7:

var str= '';
var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.appendTo(UL);
}

for (var i = 6; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.prependTo(UL);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){

var LI = $("<li></li>");

LI.append(i);

LI.appendTo(UL);

}

for (var i = 6; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

LI.prependTo(UL);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 7: http://jsfiddle.net/HqKv7/

Example # 7 is virtually the same as Example # 6, except we use jQuery.prependTo(), instead of jQuery.prepend().

Summary

Although this post is focused on jQuery.append() and jQuery.prepend(), we’ve also seen how easy it is to create elements with the $() function. While it is always good to make sure you understand what jQuery is doing and that you can write native JavaScript to accomplish your tasks, jQuery just makes perfect sense in many situations. As you can see, the main reason is that it abstracts away a lot of the time-intensive tedium of cross-browser compatibility.

Helpful Links for jQuery.append() and jQuery.prepend()

jQuery.append()

http://api.jquery.com/append/

http://www.w3schools.com/jquery/html_append.asp

jQuery.prepend()

http://api.jquery.com/prepend/

http://www.w3schools.com/jquery/html_prepend.asp

Aug82012 by dcmNo Comments

JavaScript animation with jQuery.animate() – Introduction

jQuery

“How can I animate web page elements with JavaScript, using jQuery”?

Animation in JavaScript can be tricky. What at first may seem easy, quickly becomes a scattered mess of timeouts and callbacks. But with jQuery.animate(), you have a simple and elegant way of implementing animation in your web page, without all the headaches and jerky performance.

jQuery.animate() has a very simple syntax: Chain the return value of a jQuery collection with the .animate() method, pass in an options object, a speed value, and off you go. It really is that simple.

Before we get into the examples, here is the markup we will use:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>jQuery Animate Example</title>
        <script type="text/javascript" 
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
       ></script>
        <style>
            .moveMe{
                position:relative;
            }
        </style>
    </head> 
    <body> 
        <div class="moveMe">
            Lorem ipsum dolor sit amet
        </div>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery Animate Example</title>

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

></script>

<style>

.moveMe{

position:relative;

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet

</div>

</body>

</html>

Example # 1

$(".moveMe").animate({
"left": "+=300px"
}, 4000);

$(".moveMe").animate({

"left": "+=300px"

}, 4000);

Here is the jsFiddle.net Link for Example # 1: http://jsfiddle.net/jPaHy/

In Example # 1, we use a jQuery selector to return a collection. In this case, the collection contains only one element. Here’s a rundown of the syntax:

The jQuery selector “$(“.moveMe”)” returns a collection of one element
We chain-in the .animate() method to that return value
We pass-in an object to the .animate() method as the first argument
In that object, we have one property: “left”, and the value is: “+=500px”
The second argument that we pass in is the speed, which in this case is 4000 miliseconds (i.e. 4 seconds)

And that’s it!

Example # 2

$(".moveMe")
.animate({
        "left": "+=300px"
}, 2000)
.animate({
        "top": "+=200px"
}, 2000);

$(".moveMe")

.animate({

"left": "+=300px"

}, 2000)

.animate({

"top": "+=200px"

}, 2000);

Here is the jsFiddle.net Link for Example # 2: http://jsfiddle.net/BRWDr/

In Example # 2, we add a second chained .animate() method. There is little difference in the second call; instead of manipulating the “left” property, we manipulate the “top” property, which pushes the text down by 200 pixels.

Example # 3 – Using the jQuery.animate() callback function

$(".moveMe")
.animate({
        "left": "+=300px"
}, 2000,function(){
    $(this)
        .text('all done!')
        .css('color','red');
})

$(".moveMe")

.animate({

"left": "+=300px"

}, 2000,function(){

$(this)

.text('all done!')

.css('color','red');

})

Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/8FZ87/

In Example # 3, we pass-in a third argument. This, of course, is the callback function. What this means is that when jQuery.animate() finishes with the animation, it runs the callback function, if one is passed-in. You could certainly pass-in a named function, or as we have done, you can pass-in an anonymous function. In the callback, we change the color of the text to red, and change the text in the element to “all done!”.

Summary

The amount of JavaScript we would have had to write to accomplish this would have been a total pain in the neck. All that code is in jQuery, and it abstracts away the details, leaving you with a syntax that is both simple and elegant.

Once you have mastered the simple syntax of jQuery.animate(), moving elements around the page becomes trivial

Notice that in the markup, I applied the following CSS to the element that we want to animate: “position: relative;” We needed this because our examples manipulated the “left” and “top” properties. So, if the element was not positioned, nothing would happen when the JavaScript code ran.

The jQuery.animate() method makes it trivial to animate elements in a web page. Once you learn the syntax, it is incredibly easy. Of course, there is much more that can be done, and some impressive advanced features are available. This tutorial was meant only to explain the absolute basics of jQuery.animate(), so that if you have never used it before, you can get started right away.

Helpful Links for the jQuery.animate() method

http://api.jquery.com/animate/

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

http://viralpatel.net/blogs/understanding-jquery-animate-function/

http://james.padolsey.com/javascript/fun-with-jquerys-animate/

http://james.padolsey.com/demos/jquery/easing/

Jul282012 by dcm3 Comments

What’s the difference between jQuery.ajax(), jQuery.get() and jQuery.post()?

jQuery

jQuery offers three Ajax calls that are simple and painless

Although it is a good idea to understand Ajax in the context of native JavaScript, leveraging the power of JavaScript libraries for your Ajax calls is not a bad idea. Depending on the size and complexity of your application, it can often minimize the amount of code you need to write in order to provide the best cross-browser experience.

Question: “What is the difference between jQuery.ajax(), jQuery.get() and jQuery.post() ?”

Answer: jQuery.get() and jQuery.post() contain features that are subsets of jQuery.ajax().

So jQuery.ajax() is the method that provides the most flexibility of the three. You’ll see that the biggest difference from an implementation standpoint is that you pass an object to jQuery.ajax(), which contains the necessary parameters. And as for jQuery.get() and jQuery.post(), here you pass in arguments. So you might say that jQuery.get() and jQuery.post() are both shorthand for jQuery.ajax().

Important Note: Because of the “Same origin policy” enforced by all browsers, I could not make a jsfiddle example for this post. But you can copy and paste these code examples into a simple html file, and just make sure that is a file named test.txt in the same folder. Put a simple message in that text file (i.e. “hello from the text file”).

jQuery.ajax()

Example # 1

jQuery.ajax({
url: 'test.txt',
dataType: 'text',
type: “GET”,
  success: function(data) {
    console.log(data);              
  }
});

jQuery.ajax({

url: 'test.txt',

dataType: 'text',

type: “GET”,

success: function(data) {

console.log(data);

}

});

So, in Example # 1, we use the jQuery.ajax() method. There are certainly more configurable parameters, but here we are using the bare minimum.

You’ll see that there is not much going on here. We just pass an object into the jQuery.ajax() method. That object has four properties: “url,” “dataType,” “type,” and “success”, and here are the details for each property:

url: This is the URL of the file that you want to grab via your ajax call.
dataType: This determines how the return data will be treated (i.e. pure text, html, XML, etc.).
type: This the the request type. Choose “GET” or “POST”. This is actually optional; if you omit it, jQuery will default to “GET”.
success: This is a callback function that is fired after a successful http request has completed. The first argument to the function is the data returned from the server. There are other arguments that can be passed in as well.

As long as you have a file named “test.txt” that has some kind of message, and it is in the same folder as your html file, the contents of that text file will appear in your JavaScript console. (Don’t forget to open the console! : – ). Of course, you can put that file anywhere you want, as long as it is on the same domain as the requesting file.

A video tutorial, explaining the difference between jQuery.ajax(), jQuery.get() and jQuery.post()

Here, in this video, I briefly explain the difference between these three AJAX utilities. You’ll see that I demonstrate how jQuery.get() and jQuery.post() are very similar, and how jQuery.AJAX is a more generalized method that allows you to make either GET or POST AJAX requests.

jQuery.get()

Example # 2

jQuery.get('test.txt',function(data){
    console.log(data)
},'text');

jQuery.get('test.txt',function(data){

console.log(data)

},'text');

Now here, in Example # 2, we use the .get() method, which is a kind of shorthand for jQuery.ajax(). When using jQuery.get(), instead of passing in an object, you pass in arguments. At minium, you’ll need the first two arguments: the URL of the file you want to retrieve (i.e. ‘test.txt’), and a success callback. In this example, we also passed in a third argument: ‘text,’ which told jQuery that we wanted to treat the return message as text.

The jQuery.get() method is recommended when you want to make a quick and dirty Ajax call and you are sure it will be a GET. So here, there’s not much more to it. Short and sweet.

jQuery.post()

Example # 3

jQuery.post('test.txt',function(data){
    console.log('post response-&gt; ' + data)
},'text');

jQuery.post('test.txt',function(data){

console.log('post response-> ' + data)

},'text');

And finally, in Example # 3, we used jQuery.post(). And in exactly the same manner as jQuery.get(), this method is like using jQuery.ajax(), and specifying a “type” of “POST.” So, this method is recommended if you need to make a quick Ajax call via POST, and don’t need to make a lot of configuration decisions.

What About Multiple AJAX Calls?

When you have code that depends on the mutual success of multiple Ajax calls, things can get messy. Quite often, a developer might implement an AJAX call inside the success function of another one. This can work, but what if there is a total of three AJAX calls? or even four? Well, what you wind up with is a pattern called the “Pyramid of Doom”:

jQuery.get('serverPage-1.php',function(data1){
	jQuery.get('serverPage-2.php',function(data2){
		jQuery.get('serverPage-3.php',function(data3){
			jQuery.get('serverPage-4.php',function(data4){
				//now we have know all four AJAX calls have completed
			});
		});
	});
});

jQuery.get('serverPage-1.php',function(data1){

jQuery.get('serverPage-2.php',function(data2){

jQuery.get('serverPage-3.php',function(data3){

jQuery.get('serverPage-4.php',function(data4){

//now we have know all four AJAX calls have completed

});

The Pyramid of Doom is a JavaScript anti-pattern that should be avoided. If you are already using jQuery, you can leverage the power of the jQuery.when() method, which can be leveraged to treat multiple AJAX calls as one asyncronous event:

var A = $.get(serverPage.xyz);
var B = $.get(serverPage.xyz);
var C = $.get(serverPage.xyz);

$.when(A,B,C).done(funtion(){
    //act upon the collective success of A,B and C
});

var A = $.get(serverPage.xyz);

var B = $.get(serverPage.xyz);

var C = $.get(serverPage.xyz);

$.when(A,B,C).done(funtion(){

//act upon the collective success of A,B and C

});

To learn more about using the jQuery.when() method to manage multiple AJAX calls in JavaScript, you can read these posts:

http://blog.kevinchisholm.com/javascript/jquery/using-jquery-deferred-to-manage-multiple-ajax-calls/

http://blog.kevinchisholm.com/javascript/jquery/using-the-jquery-promise-interface-to-avoid-the-ajax-pyramid-of-doom/

Summary

If you are wondering whether you should use jQuery.ajax(), jQuery.get() or jQuery.post(), it is really up to you. One way to approach it might be to ask yourself: “Am I writing a multi-purpose function that will be able to perform either a GET or a POST? And I do I want this function to accommodate dynamic settings such as dataType or data?” If the answer to these questions is “yes,” then use jQuery.ajax(), and wrap it with your own custom function that takes an object as an argument. If you are thinking “nah, I just need to make a quick GET or POST Ajax call, then get the data, do something with it, and use jQuiery.get() or jQuery.post().

Helpful Links for jQuery.ajax(), jQuery.get() and jQuery.post()

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

Jul212012 by dcmNo Comments

Iterating Over a DOM Collection with the jQuery.each Method

jQuery

jQuery makes it super easy to get a reference to a collection of DOM elements. The jquery.each method allows you to execute a function against each one of the elements in the collection.

Solving problems is one of jQuery’s best qualities, and the beauty of the jQuery.each method is that it solves a very common problem: how to iterate a collection of DOM elements. Now in order to work through this task, one might be inclined to set up a for-loop. This approach is not at all wrong; in fact, on some levels it makes perfect sense. The thing is, in tackling it this way you run into a few avoidable problems. First, there is a lot of boilerplate code. In other words, to set up the for-loop you would need a counter variable, which we’ll call “i”. And since we might want to iterate a collection of DOM elements more than once, we’d need to make the “i” variable private, which means using a function to create private or “local” scope. Also, 80% of our for-loop would be repeated code. So, you get the picture… our problems are mounting, and they most assuredly are avoidable. So, here’s where the beauty of the jQuery.each method comes into play: it provides abstraction for creating a for-loop. This means that we need only provide the collection and a callback method that we wanted executed for each iteration of the loop.

The jQuery.each method is the go-to tool when you need to iterate a collection of DOM elements. Let’s say you have a bunch of elements in the page. Maybe that bunch is “every <a> tag” or “every <li> inside of the <ul> with the class sales”, or each <div> element that is a child of <div class=”members”>.

Here is how you would create a reference to each of those collections

jQuery will return a collection with one or more members. But how do you iterate over that collection and “do something” to each one? You can accomplish this by chaining the .each() method to the return value, and of course, pass a callback to that method.

jQuery.each Method – Basic Syntax

In the above example, where you see “selector”, that represents a CSS-like query such as “p” or “#some-id p img”, etc., that you would pass to jQuery. Now you can see that we have passed a callback function to the each() method. And inside of that callback, we would take care of any tasks that are specific to the elements over which we are currently iterating.

So, for an example, we will create a click-event handler for each <li> inside of a <ul>. Here is the markup we will work with:

With that markup in mind, consider the following code:

Example # 1

Notice that in Example # 1 we use $(this). Now just in case you are not familiar with this pattern, $(this) equals “the current element”, and it happens twice in our code. The first instance of $(this) on line # 2 refers to the element that is currently being iterated over (i.e. the current “UL LI”). The second $(this) on line # 3 represents the element that was just clicked. This is because we want to change the color of the element that was just clicked to red.

From a pseudocode perspective, here is what we have done:1- For each <li> that is inside of a <ul>, add a click event handler
2 – In the click-event handler, we say “If you click me, make my text red”

Example # 2

In Example # 2, we change the logic a bit so that only an <li> with the class “workday” is returned in the collection, which means that the “saturday” and “sunday” <li> elements do have a click event handler assigned.

Here is the JsFiddle link for this example: http://jsfiddle.net/WHkkA/. Simply remove the .workday class from the CSS selector to see Example # 1 work.

Summary

The jQuery .each() method is used to iterate over the members of a jQuery collection. There is definitely more fun stuff that can be done with this method, but this is just a very basic overview of what the method does and how to use it.

Important Note: Try not to confuse this with the jQuery.each() method. That is a similar concept, but more of a general-purpose iteration method that is a static method call to the jQuery object, not a method of a jQuery collection.

Mar262012 by dcmNo Comments

How to Use the jQuery replaceWith Method

jQuery

The replaceWith() method provides a way to completely remove an element and put another in its place

Most of the time, jQuery is used to add click event handlers to DOM elements, and there’s nothing wrong with this. In fact, jQuery is so helpful in this context, it’s hard to argue against using it for your event handling / delegation. But just be aware… there are other tasks that come up, and some of them can get rather messy. One example is replacing one DOM element with another. Now this may sound simple, but with vanilla JavaScript, this kind of work can get pretty tedious. Normally, I recommend learning how to do things with vanilla JavaScript that you would want to do with jQuery, but there are times when this kind of wheel reinvention becomes a bad idea.

So, this is where the jQuery replaceWith() method comes in; it allows you to chop out one piece of the page and replace it with another. You simply specify the original section of the DOM as well as the new chunk, and then jQuery takes care of all the work. And what makes this method so helpful is the expressive syntax; on a high-level, it’s a simple as A.replaceWith(B). You really do have to thank the folks from jQuery, for packing a great deal of abstraction into this one method. If you don’t believe me, go ahead and try this yourself using just vanilla JavaScript. I think you’ll find that it’s pretty tedious.

Example # 1

In example # 1, we have attached an event handler to the element with the id: “foo”. When clicked, that element is removed from the page, and replaced with a piece of markup defined in a string. Yes, it’s that easy, and there are certainly more interesting things you can do with this jQuery method.

Summary

Replacing one section of the page with another piece of markup is quite easy with the jQuery replaceWith() method. The syntax is very straight-forward and if you are already familiar with jQuery, there are quite a few possibilities.

Helpful links for the jQuery replaceWith method

http://api.jquery.com/replaceWith/

http://www.w3schools.com/jquery/html_replacewith.asp

http://stackoverflow.com/questions/730916/whats-the-difference-between-jquerys-replacewith-and-html

http://stackoverflow.com/questions/5248721/jquery-replacewith-fade-animate

Mar72012 by dcmNo Comments

Two Alternatives to the jQuery Document Ready Function for JavaScript

jQuery

There are two alternatives to document ready that are a bit easier to type

Most JavaScript programmers are familiar with jQuery’s document ready function. There is no doubt that it is a very helpful way to wrap your JavaScript with a cross-browser compatible function that will not run until the document has achieved a “ready” state. While the syntax is fairly simple, there are two slightly less verbose alternatives to the exact same functionality.

Example # 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three variations on the jQuery document ready function</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
        $(document).ready(function(){
          console.log("the document is ready")
        });
        </script>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Three variations on the jQuery document ready function</title>

$(document).ready(function(){

console.log("the document is ready")

});

</script>

</head>

<body>

</body>

</html>

In Example # 1, we have the standard syntax for the jQuery document ready function.

Example # 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three variations on the jQuery document ready function</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
        $(function(){
          console.log("the document is ready")
        });
        </script>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Three variations on the jQuery document ready function</title>

$(function(){

console.log("the document is ready")

});

</script>

</head>

<body>

</body>

</html>

In Example # 2, we omit the “document / ready” portion of the equation, and simply insert our function in the following expression $().

Example # 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three variations on the jQuery document ready function</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
        $().ready(function(){
          console.log("the document is ready")
        });
        </script>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Three variations on the jQuery document ready function</title>

$().ready(function(){

console.log("the document is ready")

});

</script>

</head>

<body>

</body>

</html>

In Example # 3, we chain a jQuery ready() function to the return value of the jQuery object: $().ready(). So, when the jQuery object is ready, so is our code.

Summary

There is no doubt that the jQuery document .ready() function is super-useful. There is however, more than one way to invoke this functionality.

Helpful links for the jQuery document .ready() function

http://api.jquery.com/ready/

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

http://rpheath.com/posts/403-jquery-shorthand-for-document-ready

http://think2loud.com/653-jquery-document-ready-howto/

Jan22012 by dcm1 Comment

jQuery Under the Hood with Paul Irish

jQuery

If you’ve never poked around inside of jQuery, you should. Paul’s videos are a great way to get started

I decided to ring in the new year with two of Paul Irish’s videos that I had book-marked, but had not gotten around to viewing: 10 Things I Learned from the jQuery Source and 11 More Things I Learned from the jQuery Source.

In these two videos, you have Paul’s screen, so that you can follow his code, and a small sub-screen of his head while he talks, so that you can follow his hilarious commentary and thought pattern. My only complaint: there is so much good stuff here to dive into that it takes an hour to watch a 30 minute video because of the constant temptation to hit “pause” and then fire up JSFiddle and play around with the concepts that he discusses.

10 Things I Learned from the jQuery Source – YouTube

In general, exploring the un-minified version of jQuery is just plain ol’ good sense. There is a tendency to simply use jQuery and treat it as some magic black box that “just works, and works great…” But the fact of the matter is, there is only one thing going on inside of that giant self-executing function: JavaScript. That is it.

Everything that jQuery does for you, you could have done for yourself… but, jQuery is better, stronger and faster than the average bear. Fair enough. But, that does not mean that we should not lift up the hood, poke around and learn from the code inside… because what is going on in there is pretty dammed cool. The jQuery folks do things in some very interesting ways and there are tons (and I do mean tons) of neat stuff to learn from.

11 More Things I Learned from the jQuery Source – YouTube

Highlights of Paul’s videos include a brief discussion of jQuery’s “no conflict” feature, his decision to hijack the .ready() method, and a hilarious discussion of how jQuery detects the presence of Internet Explorer (and the technique used is just so brilliantly creative that I had to once again pause the video, copy the code while squinting at the YouTube page, and try it in notepad myself… it just works).

If you are a JavaScript developer, you owe it to yourself to check out these videos. Paul Irish is pretty funny, and he is one of the top web developers out there. This combination makes all of his videos a pleasure to watch (and most importantly, to learn from).

Nov282011 by dcmNo Comments

Writing More Expressive and Readable jQuery Code with Method Chaining

jQuery

You can chain jQuery methods in a way that makes your code more readable, and allows you to be more expressive in the way that you traverse and manipulate DOM elements

Most of us are introduced to jQuery via the following scenario: when the user clicks an element, you want something to happen to that element. You Google the code, you copy the code, you edit the code so that it matches your DOM elements, it works, you are hooked, you add “jQuery” to your resume. An oft-told tale.

But, what about when the user clicks an element, and we want numerous thing to happen to elements that are in the neighborhood? Perhaps we want the parent element to turn blue, and then we want the <a> inside of the <span> that is a sibling to change it’s href attribute….etc. Sure, we can do all this using jQuery methods such as parent(), find() and end(). But the code starts to get a little verbose. One way in which we can write this kind of code in a slightly more elegant manner is by chaining method calls together. It makes the code more expressive and a little easier to read.

Example # 1

$(document).ready(function(){
	$("div#foo div.inside p a.extra").click(function(){
		$(this).css("background-color","yellow");
		var parent = $(this).parent();
		$(parent).css("background-color","red");
	});
});

$(document).ready(function(){

$("div#foo div.inside p a.extra").click(function(){

$(this).css("background-color","yellow");

var parent = $(this).parent();

$(parent).css("background-color","red");

});

In example # 1, we query a specific selector, change its background color, use the parent() method to find the element’s parent, and then change the parent element’s background color to red. Pretty simple stuff. But, this code can be written better.

Example # 2 A

$("div#foo div.inside p a.extra").click(function(){
    $(this).css("background-color","yellow").parent().css("background-color","red")
});

$("div#foo div.inside p a.extra").click(function(){

$(this).css("background-color","yellow").parent().css("background-color","red")

});

Example # 2 B

$("div#foo div.inside p a.extra").click(function(){
    $(this)// the element that was clicked....
	.css("background-color","yellow") // change the background color of the clicked link to yellow
	.parent() // select the parent element: '<span>'
	.css("background-color","red") // change the background color to red
});

$("div#foo div.inside p a.extra").click(function(){

$(this)// the element that was clicked....

.css("background-color","yellow") // change the background color of the clicked link to yellow

.parent() // select the parent element: '<span>'

.css("background-color","red") // change the background color to red

});

In example # 2 A, because $(this) returns a jQuery object, we can avoid further queries by simply “chaining” subsequent method calls. Chaining refers to using the return value of one method to kick off another method call, and so on. The concept is like that of a “chain reaction” in that one return value drives the call to the next method, and so on. In example # 2 B, we have the exact same code, but we break each of the “chained” methods calls to a new line, which makes the code even more expressive and easier to follow (comments have been added as well). JavaScript does not care about this white space, so you are free to organize your code in any way you like, which allows you to “express” your thoughts, or “logic” in a way that you feel works best.

This next example is a bit long, but what I wanted to accomplish was:

Provide full page markup so that you can copy the entire code, paste it into notepad and run the file, or use jsfiddle.net
Create an example where we chain methods together that walk up and then down the DOM, mutating multiple elements, without ever having to create another query

Example # 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery - Method Chaning - Example</title>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    </head>
        <script>
            $(document).ready(function(){
                $("div#foo div.inside p a.extra").click(function(){
                    $(this)
						.css("background-color","yellow")
					.parent()
						.css("background-color","red")
					.parent()
						.css({
							"font-family": "georgia",
							"font-size": "22px",
							"color": "green"
							})
					.find("span.inside")
						.css("text-decoration","underline")
					.find("a")
						.attr({
							"href" : "http://www.apple.com",
							"target" : "_blank"
						})
						.text("now I am a link to apple.com")
					.end()
					.end()
					.end()
					.end()
						.append(" -> more text added to a.extra ");
                });
            });
        </script>
    <body>
        <div id="foo">
            <div class="inside">
                <p>Item A
                    <span class="inside">inside content
                        <a href="#">inside link</a>
                    </span>
                    <span class="extra">extra content here...
						<a href="#" class="extra">extra link</a>
					</span>
                </p>
                <p>Item B
                    <span  class="inside">inside content
                        <a href="#">inside link</a>
                    </span>
                    <span class="extra">extra content here...
						<a href="#" class="extra">extra link</a>
					</span>
                </p>
                <p>Item C
                    <span  class="inside">inside content
                        <a href="#">inside link</a>
                    </span>
                    <span class="extra">extra content here...
							<a href="#" class="extra">extra link</a>
					</span>
                </p>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery - Method Chaning - Example</title>

</head>

$(document).ready(function(){

$("div#foo div.inside p a.extra").click(function(){

$(this)

.css("background-color","yellow")

.parent()

.css("background-color","red")

.parent()

.css({

"font-family": "georgia",

"font-size": "22px",

"color": "green"

})

.find("span.inside")

.css("text-decoration","underline")

.find("a")

.attr({

"href" : "http://www.apple.com",

"target" : "_blank"

})

.text("now I am a link to apple.com")

.end()

.append(" -> more text added to a.extra ");

});

</script>

<body>

<p>Item A

<span class="inside">inside content

<a href="#">inside link</a>

</span>

<span class="extra">extra content here...

<a href="#" class="extra">extra link</a>

</span>

</p>

<p>Item B

<span class="inside">inside content

<a href="#">inside link</a>

</span>

<span class="extra">extra content here...

<a href="#" class="extra">extra link</a>

</span>

</p>

<p>Item C

<span class="inside">inside content

<a href="#">inside link</a>

</span>

<span class="extra">extra content here...

<a href="#" class="extra">extra link</a>

</span>

</p>

</div>

</body>

</html>

In example # 3, we use the jQuery parent(), find(), and end() methods to move up and then back down the DOM, mutating elements along the way, without ever having to write a second query. The next example is the exact same code, but heavily commented, to make it easier to follow-along.

Example # 4

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery - Method Chaning - Example</title>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    </head>
        <script>
            $(document).ready(function(){
                $("div#foo div.inside p a.extra").click(function(){
                    $(this)
						// change the background color of the clicked link to yellow
						.css("background-color","yellow")
					// select the parent element: '<span>'
					.parent()
						// change the background color to red
						.css("background-color","red")
					// select the parent element: <p>
					.parent()
						// change three css properties in one statement by passing an an object as an argument to the .css() method
						.css({
							"font-family": "georgia",
							"font-size": "22px",
							"color": "green"
							})
					// find and select the span inside of this <p> tag that has the class "inside"
					.find("span.inside")
						// add an underline
						.css("text-decoration","underline")
					// find and select the <a> tag inside of this element
					.find("a")
						// change the href and target elements
						.attr({
							"href" : "http://www.apple.com",
							"target" : "_blank"
						})
						// change the element's text property
						.text("now I am a link to apple.com")
					// return to selection: <span.inside>
					.end()
					// return to selection: <p>
					.end()
					// return to selection: <span >
					.end()
					// return to original selection: "div#foo div.inside p a.extra"
					.end()
						// append some text
						.append(" -> more text added to a.extra ");
                });
            });
        </script>
    <body>
        <div id="foo">
            <div class="inside">
                <p>Item A
                    <span class="inside">inside content
                        <a href="#">inside link</a>
                    </span>
                    <span class="extra">extra content here...
						<a href="#" class="extra">extra link</a>
					</span>
                </p>
                <p>Item B
                    <span  class="inside">inside content
                        <a href="#">inside link</a>
                    </span>
                    <span class="extra">extra content here...
						<a href="#" class="extra">extra link</a>
					</span>
                </p>
                <p>Item C
                    <span  class="inside">inside content
                        <a href="#">inside link</a>
                    </span>
                    <span class="extra">extra content here...
							<a href="#" class="extra">extra link</a>
					</span>
                </p>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery - Method Chaning - Example</title>

</head>

$(document).ready(function(){

$("div#foo div.inside p a.extra").click(function(){

$(this)

// change the background color of the clicked link to yellow

.css("background-color","yellow")

// select the parent element: '<span>'

.parent()

// change the background color to red

.css("background-color","red")

// select the parent element: <p>

.parent()

// change three css properties in one statement by passing an an object as an argument to the .css() method

.css({

"font-family": "georgia",

"font-size": "22px",

"color": "green"

})

// find and select the span inside of this <p> tag that has the class "inside"

.find("span.inside")

// add an underline

.css("text-decoration","underline")

// find and select the <a> tag inside of this element

.find("a")

// change the href and target elements

.attr({

"href" : "http://www.apple.com",

"target" : "_blank"

})

// change the element's text property

.text("now I am a link to apple.com")

// return to selection: <span.inside>

.end()

// return to selection: <p>

.end()

// return to selection: <span >

.end()

// return to original selection: "div#foo div.inside p a.extra"

.end()

// append some text

.append(" -> more text added to a.extra ");

});

</script>

<body>

<p>Item A

<span class="inside">inside content

<a href="#">inside link</a>

</span>

<span class="extra">extra content here...

<a href="#" class="extra">extra link</a>

</span>

</p>

<p>Item B

<span class="inside">inside content

<a href="#">inside link</a>

</span>

<span class="extra">extra content here...

<a href="#" class="extra">extra link</a>

</span>

</p>

<p>Item C

<span class="inside">inside content

<a href="#">inside link</a>

</span>

<span class="extra">extra content here...

<a href="#" class="extra">extra link</a>

</span>

</p>

</div>

</body>

</html>

In example # 4, we have the exact same code as example # 3, with comments added.

Summary

When a jQuery method returns a jQuery object, you can take advantage of that behavior by “chaning” subsequent method calls to the return value of the previous method. When using this approach, you can execute multiple DOM statements from the result of one query. The end result is code that is more expressive and easier to read.

Helpful links for chaining jQuery methods

http://ejohn.org/blog/ultra-chaining-with-jquery/

http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

http://forum.jquery.com/topic/jquery-method-chaining-returned-object-something-i-don-t-get

http://www.jquery-tutorial.net/introduction/method-chaining/