jQuery's ajax method's success callback function takes three parameters. Hereis the api .

success(data, textStatus, jqXHR);

So if you are making ajax call using jQuery the code might look like

$.ajax({  url: "ajax/test.html",  success: function (data, textStatus, jqXHR) {    console.log(data);  },});

ajax using jquery-ujs

If you are using Rails and jquery-ujs then you might have code like this

<a href="/users/1" data-remote="true" data-type="json">Show</a>

$("a").bind("ajax:success", function (data, status, xhr) {  alert(data.name);});

Above code will not work. In order to make it work the very first element passedto the callback must be an event object. Here is the code that will work.

$("a").bind("ajax:success", function (event, data, status, xhr) {  alert(data.name);});

Remember that jQuery api says that the first parameter should be "data" then whywe need to pass event object to make it work.

Why event object is needed

Here is snippet from jquery-ujs code

success: function(data, status, xhr) {  element.trigger('ajax:success', [data, status, xhr]);}

The thing about trigger method is that theevent object is always passed as the first parameter to the event handler. Thisis why when you are using jquery-ujs you have to have the first parameter in thecallback function an event object.

With jQuery it was easy.

After a few hours I had iconfirm.

This project is deprecated now.

return false

$("a").click(function () {  console.log("clicked");  return false;});

First ensure that above code is executed on domready. Now if I click on any linkthen two things will happen.

e.preventDefault() will be called .e.stopPropagation() will be called .

e.preventDefault()

As the name suggests, calling e.preventDefault() will make sure that thedefault behavior is not executed.

<a href='www.google.com'>click me</a>

If above link is clicked then the default behavior of the browser is to take youto www.google.com. However by invoking e.preventDefault() browser will notgo ahead with default behavior and I will <strong>not</strong> be taken towww.google.com.

e.stopPropagation

When a link is clicked then an event "click event" is created. And this eventbubbles all the way up to the top. By invoking e.stopPropagation I am askingbrowser to not to propagate the event. In other words the event will stopbubbling.

<div class="first">  <div class="two">    <a href="www.google.com">click me</a>  </div></div>

If I click on "click me" then "click event" will start bubbling. Now let's saythat I catch this event at .two and if I call e.stopPropagation() then thisevent will never reach to .first .

e.stopImmediatePropagation

First note that you can bind more than one event to an element. Take a look atfollowing case.

<a class="one">one</a>

I am going to bind three events to the above element.

$("a").bind("click", function (e) {  console.log("first");});$("a").bind("click", function (e) {  console.log("second");  e.stopImmediatePropagation();});$("a").bind("click", function (e) {  console.log("third");});

In this case there are three events bound to the same element. Notice thatsecond event binding invokes e.stopImmediatePropagation() . Callinge.stopImmediatePropagation does two things.

Just like stopPropagation it will stop the bubbling of the event. So anyparent of this element will not get this event.

However stopImmdiatePropagation stops the event bubbling even to the siblings.It kills the event right then and there. That's it. End of the event.

Once again calling stopPropagation means stop this event going to parent. Andcalling stopImmediatePropagation means stop passing this event to other eventhandlers bound to itself.

If you are interestedhere is link to DOM Level 3 Events spec.

Back to original problem

Now that I have described what preventDefault, stopPropagation andstopImmediatePropagation does lets see what changed in jQuery 1.4.3.

In jQuery 1.4.2 when I execute "return false" then that action was same asexecuting:

e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();

Now e.stopImmediatePropagation internally calls e.stopPragation but I haveadded here for visual clarity.

Fact that return false was calling e.stopImmeidatePropagation was a bug. Getthat. It was a bug which got fixed in jquery 1.4.3.

So in jquery 1.4.3 e.stopImmediatePropagation is not called. Checkout thispiece of code from events.js of jquery code base.

if (ret !== undefined) {  event.result = ret;  if (ret === false) {    event.preventDefault();    event.stopPropagation();  }}

As you can see when return false is invoked then e.stopImmediatePropagationis <strong>not</strong> called.

It gets complicated with live and a bug in jQuery 1.4.3

To make the case complicated, jQuery 1.4.3 has a bug in whiche.preventStopImmediatePropagation doest not work. Here isa link to this bugI reported.

To understand the bug take a look at following code:

<a href='' class='first'>click me</a>$('a.first').live('click', function(e){    alert('hello');    e.preventDefault();    e.stopImmediatePropagation();});$('a.first').live('click', function(){    alert('world');});

Since I am invoking e.stopImmediatePropagation I should never seealert world. However you will see that alert if you are using jQuery 1.4.3.You can play with it here .

This bug has been fixed as perthis commit. Note that the commit mentioned was done after the release of jQuery 1.4.3. Toget the fix you will have to wait for jQuery 1.4.4 release or use jQuery edge.

I am using rails.js (jquery-ujs). What do I do?

As I have shown "return false" does not work in jQuery 1.4.3 . However I wouldhave to like to have as much backward compatibility in jquery-ujs as muchpossible so that the same code base works with jQuery 1.4 through 1.4.3 sincenot every one upgrades immediately.

This commitshould make jquery-ujs jquery 1.4.3 compatible.Many issues have been logged atjquery-ujs and I will take a look at all of them one by one. Please do provideyour feedback.

<div id="lab">  <ul id="list">    <li><a href="">USA</a></li>  <ul>  <p>    <a href=''>USA</a>  </p></div>

I want to get all links that contains the word USA. Simple enough. jQuerysupports contains selector.

$(":contains('USA')");

Above query results in following items.

[html, body#body, div#lab, ul#list, li, a, ul, p, a]

That is because contains looks forgiven string under all the descendants.

has method to rescue

jQuery has method which returns the list ofelements which have a descendant which has the given string.

b = $("*").has(":contains('USA')");

Above query results in following items.

[html, body#body, div#lab, ul#list, li, ul, p]

Final result

a = $(":contains('USA')");b = $("*").has(":contains('USA')");c = a.not(b);console.log(c);

Above query results in following items.

 [a, a]

$("a:first").live("click", function () {  log("clicked once");  return false;});$("a:first").live("click", function () {  log("clicked twice");  return false;});

I was expecting that I would see both the messages. However jQuery only invokesthe very first message.

return false does two things. It stops the default behavior which is go andfetch the link mentioned in the href of the anchor tags. Also it stops theevent from bubbling up. Since live method relies on event bubbling, it makessense that second message does not appear.

Fix is simple. Just block the default action but let the event bubble up.

$("a:first").live("click", function (e) {  log("clicked once");  e.preventDefault();});$("a:first").live("click", function (e) {  log("clicked twice");  e.preventDefault();});

$(function () {  $(".fadein img:gt(0)").hide();  setInterval(function () {    $(".fadein :first-child")      .fadeOut()      .next("img")      .fadeIn()      .end()      .appendTo(".fadein");  }, 3000);});

appendTo removes and attaches elements

In order to understand what's going on above, I am constructing a simple testpage. Here is the html markup.

<div id="container">  <div class="lab">This is div1</div>  <div class="lab">This is div2</div></div>

Open this page in browser and execute following command in firebug.

$(".lab:first").appendTo("#container");

Run the above command 5/6 times to see its effect. Every single time you runJavaScript the order is changing.

The order of div elements with class lab is changing because if a jQueryelement is already part of document and that element is being added somewhereelse then jQuery will do cut and paste and not copy and paste . Againelements that already exist in the document get plucked out of document and thenthey are inserted somewhere else in the document.

Back to the original problem

In the original code the very first image is being plucked out of document andthat image is being added to set again. In simpler terms this is what ishappening. Initially the order is like this.

Image1Image2Image3

After the code is executed the order becomes this.

Image2Image3Image1

After the code is executed again then the order becomes this.

Image3Image1Image2

After the code is executed again then the order becomes this.

Image1Image2Image3

And this cycle continues forever.

However it is important to understand what goes on behind the scene for manyreasons. And one of the important reasons is the performance of Rich Client. Asmore and more web pages use more and more jQuery code, understanding of howjQuery selects elements will speed up the loading of pages.

What is a selector engine

HTML documents are full of html markups. It's a tree like structure. Ideallyspeaking all the html documents should be 100% valid xml documents. However ifyou miss out on closing a div then browsers forgive you ( unless you have askedfor strict parsing). Ultimately browser engine sees a well formed xml document.Then the browser engine renders that xml on the browser as a web page.

After a page is rendered then those xml elements are referred as DOM elements.

JavaScript is all about manipulating this tree structure (DOM elements) thatbrowser has created in memory. A good example of manipulating the tree iscommand like the one give below which would hide the header element. However inorder to hide the header tag, jQuery has to get to that DOM element.

jQuery("#header").hide();

The job of a selector engine is to get all the DOM elements matching thecriteria provided by a user. There are many JavaScript selector engines in themarket. Paul Irish hasa nice articleabout JavaScript CSS Selector Engine timeline .

Sizzle is JavaScript selector engine developed byJohn Resig and is used internally in jQuery. In this articleI will be showing how jQuery in conjunction with Sizzle finds elements.

Browsers help you to get to certain elements

Browsers do provide some helper functions to get to certain types of elements.For example if you want to get DOM element with id header thendocument.getElementById function can be used like this

document.getElementById("header");

Similarly if you want to collect all the p elements in a document then you coulduse following code .

document.getElementsByTagName("p");

However if you want something complex like the one given below then browserswere not much help. It was possible to walk up and down the tree howevertraversing the tree was tricky because of two reasons: a) DOM spec is not veryintuitive b) Not all the browsers implemented DOM spec in same way.

jQuery("#header a");

Later selector API came out.

The latest version of all the major browsers support this specificationincluding IE8. However IE7 and IE6 do not support it. This API providesquerySelectorAll method which allows one to write complex selector query likedocument.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)" .

It means that if you are using IE8 or current version of any other modernbrowser then jQuery code jQuery('#header a') will not even hit Sizzle. Thatquery will be served by a call to querySelectorAll .

However if you are using IE6 or IE7, Sizzle will be invoked for jQuery('#headera'). This is one of the reasons why some apps perform much slower on IE6/7compared to IE8 since a native browser function is much faster than elementsretrieval by Sizzle.

Selection process

jQuery has a lot of optimization baked in to make things run faster. In thissection I will go through some of the queries and will try to trace the routejQuery follows.

$('#header')

When jQuery sees that the input string is just one word and is looking for an idthen jQuery invokes document.getElementById . Straight and simple. Sizzle is notinvoked.

$('#header a') on a modern browser

If the browser supports querySelectorAll then querySelectorAll will satisfy thisrequest. Sizzle is not invoked.

$('.header a[href!="hello"]') on a modern browser

In this case jQuery will try to use querySelectorAll but the result would be anexception (at least on firefox). The browser will throw an exception because thequerySelectorAll method does not support certain selection criteria. In thiscase when browser throws an exception, jQuery will pass on the request toSizzle. Sizzle not only supports css 3 selector but it goes above and beyondthat.

$('.header a') on IE6/7

On IE6/7 querySelectorAll is not available so jQuery will pass on this requestto Sizzle. Let's see a little bit in detail how Sizzle will go about handlingthis case.

Sizzle gets the selector string '.header a'. It splits the string into two partsand stores in variable called parts.

parts = [".header", "a"];

Next step is the one which sets Sizzle apart from other selector engines.Instead of first looking for elements with class header and then going down,Sizzle starts with the outer most selector string. As perthis presentation from Paul IrishYUI3 and NWMatcher (Link is not available) also goright to left.

So in this case Sizzle starts looking for all a elements in the document.Sizzle invokes the method find. Inside the find method Sizzle attempts to findout what kind of pattern this string matches. In this case Sizzle is dealingwith string a .

Here is snippet of code from Sizzle.find .

match: {     ID: /#((?:[\w\u00c0-\uFFFF-]|\\.)+)/,     CLASS: /\.((?:[\w\u00c0-\uFFFF-]|\\.)+)/,     NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF-]|\\.)+)['"]*\]/,     ATTR: /\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,     TAG: /^((?:[\w\u00c0-\uFFFF\*-]|\\.)+)/,     CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,     POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,     PSEUDO: /:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},

One by one Sizzle will go through all the match definitions. In this case sincea is a valid tag, a match will be found for TAG. Next following functionwill be called.

TAG: function(match, context){     return context.getElementsByTagName(match[1]);}

Now result consists of all a elements.

Next task is to find if each of these elements has a parent element matching.header. In order to test that a call will be made to method dirCheck. Inshort this is what the call looks like.

dir = 'parentNode';cur = ".header"checkSet = [ a www.neeraj.name, a www.google.com ] // object representationdirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML )

dirCheck method returns whether each element of checkSet passed the test. Afterthat a call is made to method preFilter. In this method the key code is below

if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n]/g, " ").indexOf(match) >= 0) )

For our example this is what is being checked

" header ".indexOf(" header ");

This operation is repeated for all the elements on the checkSet. Elements notmatching the criteria are rejected.

More methods in Sizzle

if you dig more into Sizzle code you would see functions defined as +, > and~ . Also you will see methods like

enabled: function(elem) {          return elem.disabled === false && elem.type !== "hidden";    },disabled: function(elem) {          return elem.disabled === true;     },checked: function(elem) {          return elem.checked === true;     },selected: function(elem) {          elem.parentNode.selectedIndex;          return elem.selected === true;     },parent: function(elem) {          return !!elem.firstChild;     },empty: function(elem) {          return !elem.firstChild;     },has: function(elem, i, match) {          return !!Sizzle( match[3], elem ).length;     },header: function(elem) {          return /h\d/i.test( elem.nodeName );     },text: function(elem) {          return "text" === elem.type;     },radio: function(elem) {          return "radio" === elem.type;     },checkbox: function(elem) {          return "checkbox" === elem.type;     },file: function(elem) {          return "file" === elem.type;     },password: function(elem) {          return "password" === elem.type;     },submit: function(elem) {          return "submit" === elem.type;     },image: function(elem) {          return "image" === elem.type;     },reset: function(elem) {          return "reset" === elem.type;     },button: function(elem) {          return "button" === elem.type || elem.nodeName.toLowerCase() === "button";     },input: function(elem) {          return /input|select|textarea|button/i.test(elem.nodeName);     }},first: function(elem, i) {          return i === 0;     },last: function(elem, i, match, array) {          return i === array.length - 1;     },even: function(elem, i) {          return i % 2 === 0;     },odd: function(elem, i) {          return i % 2 === 1;     },lt: function(elem, i, match) {          return i < match[3] - 0;     },gt: function(elem, i, match) {          return i > match[3] - 0;     },nth: function(elem, i, match) {          return match[3] - 0 === i;     },eq: function(elem, i, match) {          return match[3] - 0 === i;     }

I use all these methods almost daily and it was good to see how these methodsare actually implemented.

Performance Implications

Now that I have little more understanding of how Sizzle works, I can betteroptimize my selector queries. Here are two selectors doing the same thing.

$("p.about_me .employment");$(".about_me  p.employment");

Since Sizzle goes from right to left, in the first case Sizzle will pick up allthe elements with the class employment and then Sizzle will try to filter thatlist. In the second case Sizzle will pick up only the p elements with classemployment and then it will filter the list. In the second case the right mostselection criteria is more specific and it will bring better performance.

So the rule with Sizzle is to go more specific on right hand side and to go lessspecific on left hand side. Here is another example.

$(".container :disabled");$(".container input:disabled");

The second query will perform better because the right side query is morespecific.

$("#lab").animate({ height: "200px" }).hide();

If I pass a parameter to hide then it would start working.

$("#lab").animate({ height: "200px" }).hide(1);

As it turns out I did not have proper understanding of how effects work injQuery.

animate method uses a queue inside. This is the queue to which all the pendingactivities are added.

$("#lab").animate({ height: "200px" }).animate({ width: "200px" });

In the above code element is being animated twice. However the second animationwill not start until the first animation is done. While the first animation ishappening the second animation is added to a queue. Name of this default queueis fx. This is the queue to which jQuery adds all the pending activities whileone activity is in progress. You can inquire an element about how many pendingactivities are there in the queue.

$("#lab")  .animate({ height: "200px" })  .animate({ width: "200px" })  .animate({ width: "800px" })  .queue(function () {    console.log($(this).queue("fx").length);    $(this).dequeue();  })  .animate({ width: "800px" })  .queue(function () {    console.log($(this).queue("fx").length);    $(this).dequeue();  });

In the above code, twice the current queue is being asked to list number ofpending activities. First time the number of pending activities is 3 and thesecond time it is 1.

Method show and hide also accepts duration. If a duration is passed then thatoperation is added to the queue. If duration is not passed or if the duration iszero then that operation is not added to queue.

$("#lab").hide(); // this action is not added to fx queue$("#lab").hide(0); // this action is not added to fx queue$("#lab").hide(1); // this action is added to fx queue

Coming back to the original question

When show or hide method is invoked without any duration then those actions arenot added to queue.

$("#lab").animate({ height: "200px" }).hide();

In the above code since hide method is not added to queue, both the animate andthe hide method are executed simultaneously. Hence the end result is thatelement is not hidden.

It could be fixed in a number of ways. One way would be to pass a duration tohide method.

$("#lab").animate({ height: "200px" }).hide(1);

Another way to fix it would be to pass hiding action as a callback function toanimate method.

$("#lab").animate({ height: "200px" }, function () {  $(this).hide();});

Another way would be to explicitly put hide method in a queue.

$("#lab")  .animate({ height: "200px" })  .queue(function () {    $(this).hide();  });

Since hide method is not added to queue by default, in this case I haveexplicitly put the hide method to the queue.

Note that inside a queue method you must explicitly call dequeue for the nextactivity from the queue to be picked up.

$("#lab")  .animate({ height: "200px" })  .queue(function () {    $(this).hide().dequeue();  })  .animate({ width: "200px" });

In the above code if dequeue is not called then second animation will nevertake place.

Also note that methods like fadeTo, fadeIn, fadeOut, slideDown, slideUp andanimate are ,by default, added to default queue.

Turning off all animations

If for some reason you don't want animation then just set $.fx.off = true.

$.fx.off = true;$("#lab").animate({ height: "200px" }, function () {  $(this).hide();});

Above code is telling jQuery to turn off all animations and that would result inthe element hiding in an instant.

$('p').live('click', function({})

In the above case jQuery does nothing with the selected p elements. Since theresult does not really matter, it is a good idea to remove such codes from thedocument ready callbacks list.

So instead of doing this

$(function(){  $('p').live('click', function({})})

just do this

$('p').live('click', function({})

Going a step further

John just landedthis commit which adds delegatemethod .

Html markup

<div id="lab">  <p>p inside lab</p></div><p>p outside lab</p>

If you want to track all the clicks on p then you could write like this.

$(document).delegate("p", "click", function () {  log("p was clicked");});

However if you only want to track clicks on 'p' which are inside the id labthen you can write like this.

$("#lab").delegate("p", "click", function () {  log("p was clicked");});

Note this functionality is in jQuery edge and is not available in jQuery 1.4.1.So you will have to get jQuery code from github to play with it.

If you are interested in the jQuery.live vs jQuery.fn.live discussion thenfollowthis thread.

<style>  p {    display: inline;  }  #hello p {    display: none;  }</style><div id="container">  <div id="hello">    Hello World    <p>this is p inside hello</p>  </div></div>

jQuery code.

$("p").show();

You can see the result here . Notice that when pis shown then display property of p is inline which is what it should be.All is well.

Now I'll change the css a little bit and will try the same code again. New cssis .

<style>  #container p {    display: inline;  }  #hello p {    display: none;  }</style>

See the result here . Notice that displayproperty of p is block instead of inline .

Where did jQuery go wrong?

jQuery did not do anything wrong. It is just being a bit lazy. I'll explain.

Since the element was hidden when jQuery was asked to display it, jQuery had noidea where the element should have display property inline or block. SojQuery attempts to find out the display property of the element by askingbrowser what the display property should be.

jQuery first finds out the nodeName of the element. In this case value would beP. Then jQuery adds a P to body and then asks browser what is the displayproperty of this newly added element. Whatever is the return value jQueryapplies that value to the element that was asked to be shown.

In the first experiment, css style p { display: inline; }said that all pelements are inline. So when jQuery added a new p element to body and askedbrowser for the display property, browser replied 'inline' and 'inline' wasapplied to the element. All was good.

In the second case, I changed the stylesheet #container p { display: inline; }to have only p elements under id hello to have inline property. So when jQueryadded a p element to body and asked for display type, browser correctly repliedas 'block'.

So what's the fix.

Find the parent element (#hello) of the element in question ( p in this case) .jQuery should add a new p element to the #hello and then jQuery would get theright display property.

fadeTo method of jQuery ,strangely, fades eventthe hidden elements.

Here is html markup.

<style>  #hello p {    display: none;  }</style><div id="hello">  <p>this is p inside hello</p></div><p>This is p outside hello</p>

Since the first p is hidden, you will see only one p element in the browser.Now execute following jQuery code.

$('p').fadeTo('slow', 0.5');

You will see both the p elements.

jQuery goes out of its way to make sure that hidden elements are visible. Hereis fadeTo method.

fadeTo: function( speed, to, callback ) {return this.filter(":hidden").css("opacity", 0).show().end().animate({opacity: to}, speed, callback);}

Also notice that for a hidden element fadeTo operation starts with opacity ofzero, while other elements will go down towards zero.

Checkout the same demo in slow motion and notice that while the first p elementemerges out of hiding, the other p element is slowing fading. This might causeunwanted effect . So watch out for this one.

• First Demo
• Second Demo
• Third Demo

I will take a simple case of animating a div from height of 34 to 100.

Here is test case.

$(function () {  $("#lab").css({ background: "yellow", height: "34px", margin: "10px" });  $("a").click(function () {    $("#lab").animate({ height: "100" });    return false;  });});

Html markup is .

<a href="">click me</a><div id="lab">Hello World</div>

Inside the animate for each property an fx object is created.

jQuery.each( prop, function( name, val ) {  var e = new jQuery.fx( self, opt, name );}

Calling new on jQuery.fx returns a JavaScript object instance.

fx: function( elem, options, prop ) {this.options = options;this.elem = elem;this.prop = prop;if ( !options.orig ) {options.orig = {};}}

Next in the animate method is a call to e.custom .

start = 34;end = 100;unit = "px";e.custom(start, end, unit);

start, end and unit values are gleaned from the current state of div.

Here is custom method .

custom: function( from, to, unit ) {this.startTime = now();this.start = from;this.end = to;this.unit = unit || this.unit || "px";this.now = this.start;this.pos = this.state = 0;var self = this;function t( gotoEnd ) {return self.step(gotoEnd);}t.elem = this.elem;if ( t() && jQuery.timers.push(t) && !timerId ) {timerId = setInterval(jQuery.fx.tick, 13);}},

As you can see every 13 milliseconds a call to step method is made.

step method is where real calculation is done. Here is the code.

step: function( gotoEnd ) {  var t = now();  var n = t - this.startTime;  this.state = n / this.options.duration;  pos = jQuery.easing['swing'](this.state, n, 0, 1, this.options.duration);  this.now = this.start + ((this.end - this.start) * this.pos);  this.update();}

this.startTime is the time when the call to animate was invoked. The stepmethod is called periodically from custom method. So the value of t isconstantly changing. Based on the value of t, value of n will change. Someof the values of n I got was 1, 39, 69, 376 and 387.

While invoking animate method I did not specify a speed. jQuery picked up thedefault speed of 400. In this case the value of this.options.duration is 400.The value of state would change in each run and it would something along theline of 0.0025, 0.09, 0.265, 0.915 and 0.945 .

If you don't know what easing is then you should readthis articleby Brandon Aaron. Since I did not specify easing option, jQuery will pickupswing easing .

In order to get the value of next position this easing algorithm needs state, nand duration. When all of it was supplied then pos would be derived. The valueof pos over the period of animation would change and it would be somethinglike 0, 0.019853157161528467, 0.04927244144387716, 0.9730426794137726,0.9973960708808632.

Based on the value of pos value of now is derived. And then update methodis called to update the screen.

update method has following code that invokes _default method.

jQuery.fx.step._default)( this )

_default method has following code which finally updates the element.

fx.elem.style[fx.prop] = Math.max(0, fx.now);

fx.now value was set in the custom method and here that value was actuallyapplied to the element.

You will have much better understanding of how animate works if you look at thesource code. I just wanted to know at a high level what's going on and these aremy findings.

jQuery makes it extremely easy to deal with JSON data. In the below exampleserver sends a success message to browser. The JSON data looks like this.

{ 'success': 'record was successfully updated' }

The jQuery code to handle JSON data looks like this.

$.ajax({  type: "GET",  url: "test.js",  dataType: "json",  success: function (json) {    $("#result").text(json.success);  },});

It all looks good and the code works with jQuery 1.3 .

However if you upgrade to jQuery 1.4 then above code will stop working. Why?jQuery 1.4 does strict JSON parsing using native parse method and any malformedJSON structure will be rejected.

How jQuery 1.3 parses JSON structure

jQuery 1.3 uses JavaScripts eval to evaluate incoming JSON structure. Openfirebug and type following example.

s = " { 'success' :  'record was updated' } ";result = eval("(" + s + ")");console.log(result);

You will get a valid output.

Note that all valid JSON structure is also valid JavaScript code so evalconverts a valid JSON structure into a JavaScript object. However non JSONstructure can also be converted into JavaScript object.

JSON specification says that all string values must use double quotes. Singlequotes are not allowed. What it means is that following JSON structures are notvalid JSON.

{ 'foo' : 'bar' }{ foo: 'bar' }{ foo: "bar" }{ "foo" : 'bar' }

Even though above strings are not valid JSON if you eval them they will producea valid JavaScript object. Since jQuery 1.3 uses eval on strings to convert JSONstructure to JavaScript object all the above mentioned examples work.

However they will not work if you upgrade to jQuery 1.4 .

jQuery 1.4 uses native JSON parsing

Using eval to convert JSON into JavaScript object has a few issue. First is thesecurity. It is possible that eval could execute some malicious code. Secondlyit is not as fast as native parse methods made available by browsers. Howeverbrowsers adhere to JSON spec and they will not parse malformed JSON structures.Open firebug and try following code to see how native browser methods do notparse malformed JSON structure. Here is the link to the announcement ofFirefox support for native JSON parsing. John Resig mentioned the need for jQuery to have native JSON parsing supporthere .

s = " { 'success' :  'record was updated' } ";result = eval("(" + s + ")");console.log(result); /* returns valid JavaScript object */result2 = window.JSON.parse(s);console.log(result2); /* throws error */

As you can see a string which was successfully parsed by eval failed bywindow.JSON.parse . It might or might not fail in chrome. More on that later.Since jQuery 1.4 will rely on browsers parsing the JSON structure malformed JSONstructures will fail.

In order to ensure that JSON is correctly parsed by the browsers, jQuery doessome code cleanup to make sure that you are not trying to pass somethingmalicious. You will not be able to test this thing directly using firebug but ifyou make an AJAX request and from server if you send response then you canverify the following code.

Following JSON structure will be correctly parsed in jQuery 1.3 . However thesame JSON structure will fail in jQuery 1.4 . Why? Because of dangling openbracket [ .

' { "error" : "record was updated" }';

jQuery 1.4 has following code that does some data cleanup to get around thesecurity issue with JSON parsing before sending that data to browser forparsing. Here is a snippet of the code.

// Make sure the incoming data is actual JSON// Logic borrowed from http://json.org/json2.jsif (/^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]").replace(/(?:^|:|,)(?:\s*\[)+/g, "")))

Not all browsers parse JSON same way

Earlier I mentioned that following JSON structure will not be correctly parsedby browsers.

 { 'a':1 } 

All browsers will fail to parse above JSON structure except chrome . Look atthis blog titled Cross Browser JSON parsing to getmore insight into this issue.

I have malformed JSON and I want to use jQuery 1.4

If you have malformed JSON and you want to use jQuery 1.4 then you should sendthe datatype as text and then convert the returned JSON structure using eval.Here is one way you can do that.

$.ajax({  url: "/url",  dataType: "text",  success: function (data) {    json = eval("(" + data + ")");    // do something with json  },});

Ben Alman suggested another way in thecomment section.

/* this should be the very first JavaScript inclusion file */<script type=text/javascript language=javascript>window.JSON = null;</script>

jQuery attempts to parse JSON natively. However if native JSON parsing is notavailable then it falls back to eval. Here by setting window.JSON to nullbrowser is faking that it does not have support for native JSON parsing.

Here are thetwocommitswhich made most of the changes in the way parsing is done.

Use JSONLint if you want to play with various stringsto see which one is valid JSON and which one is not.

jQuery 1.4 fixed them all.

In this article I am going to discuss how jQuery brought support for thesemethods in jQuery. If you want a little background on what is live method andhow it works then you should readthis articlewhich I wrote sometime back.

focus and blur events

IE and other browsers do not bubble focus and blur events. And that is incompliance with the w3c events model. As per thespecfocus event and blur event do not bubble.

However the spec also mentions two additional events called DOMFocusIn andDOMFocusOut. As per thespecthese two events should bubble. Firefox and other browsers implementedDOMFocusIn/DOMFocusOut . However IE implemented focusin and focusout and IEmade sure that these two events do bubble up.

jQuery team decided to pick shorter name and introduced two new events:focusin and focusout. These two events bubble and hence they can be usedwith live method.This commitmakes focusin/focusout work with live method. Here is code snippet.

if (document.addEventListener) {  jQuery.each({ focus: "focusin", blur: "focusout" }, function (orig, fix) {    jQuery.event.special[fix] = {      setup: function () {        this.addEventListener(orig, handler, true);      },      teardown: function () {        this.removeEventListener(orig, handler, true);      },    };    function handler(e) {      e = jQuery.event.fix(e);      e.type = fix;      return jQuery.event.handle.call(this, e);    }  });}

Once again make sure that you are using focusin/focusout instead offocus/blur when used with live .

mouseenter and mouseleave events

mouseenter and mouseleave events do not bubble in IE. However mouseoverand mouseout do bubble in IE. If you are not sure of what the difference isbetween mouseenter and mouseover thenwatch this excellentscreencast by Ben.

The fix that was applied to map for focusin can be replicated here to fixmousetner and mouseleave issue.This is the committhat fixed mouseenter and mouseleave issue with live method.

jQuery.each(  {    mouseenter: "mouseover",    mouseleave: "mouseout",  },  function (orig, fix) {    jQuery.event.special[orig] = {      setup: function (data) {        jQuery.event.add(          this,          fix,          data && data.selector ? delegate : withinElement,          orig        );      },      teardown: function (data) {        jQuery.event.remove(          this,          fix,          data && data.selector ? delegate : withinElement        );      },    };  });

Event detection

Two more events are left to be handled: submit and change. Before jQuery appliesfix for these two events, jQuery needs a way to detect if a browser allowssubmit and change events to bubble or not. jQuery team does not favor browsersniffing. So how to go about detecting event support without browser sniffing.

Juriy Zaytsev posted an excellent blog titledDetecting event support without browser sniffing. Here is the short and concise way he proposes to find out if an event issupported by a browser.

var isEventSupported = (function () {  var TAGNAMES = {    select: "input",    change: "input",    submit: "form",    reset: "form",    error: "img",    load: "img",    abort: "img",  };  function isEventSupported(eventName) {    var el = document.createElement(TAGNAMES[eventName] || "div");    eventName = "on" + eventName;    var isSupported = eventName in el;    if (!isSupported) {      el.setAttribute(eventName, "return;");      isSupported = typeof el[eventName] == "function";    }    el = null;    return isSupported;  }  return isEventSupported;})();

In the comments section John Resig mentioned that this technique can also beused to find out if an event bubbles or not.

John committed following code to jQuery.

var eventSupported = function (eventName) {  var el = document.createElement("div");  eventName = "on" + eventName;  var isSupported = eventName in el;  if (!isSupported) {    el.setAttribute(eventName, "return;");    isSupported = typeof el[eventName] === "function";  }  el = null;  return isSupported;};jQuery.support.submitBubbles = eventSupported("submit");jQuery.support.changeBubbles = eventSupported("change");

Next task is to actually make a change event or a submit event bubble if ,basedon above code, it is determined that browse is not bubbling those events .

Making change event bubble

On a form a person can change so many things including checkbox, radio button,select menu, textarea etc. jQuery team implemented a full blown change trackerwhich would detect every single change on the form and will act accordingly.

Radio button, checkbox and select changes will be detected via change event.Here is the code.

click: function( e ) {var elem = e.target, type = elem.type;if ( type === "radio" || type === "checkbox" || elem.nodeName.toLowerCase() === "select" ) {return testChange.call( this, e );}},

In order to detect changes on other fields like input field, textarea etckeydown event would be used. Here it the code.

keydown: function( e ) {var elem = e.target, type = elem.type;if ( (e.keyCode === 13 && elem.nodeName.toLowerCase() !== "textarea") ||(e.keyCode === 32 && (type === "checkbox" || type === "radio")) ||type === "select-multiple" ) {return testChange.call( this, e );}},

IE has a proprietary event called beforeactivate which gets fired before anychange happens. This event is used to store the existing value of the field.After the click or keydown event the changed value is captured. Then these twovalues are matched to see if really a change has happened. Here is code fordetecting the match.

function testChange(e) {  var elem = e.target,    data,    val;  if (!formElems.test(elem.nodeName) || elem.readOnly) {    return;  }  data = jQuery.data(elem, "_change_data");  val = getVal(elem);  if (val === data) {    return;  }  // the current data will be also retrieved by beforeactivate  if (e.type !== "focusout" || elem.type !== "radio") {    jQuery.data(elem, "_change_data", val);  }  if (elem.type !== "select" && (data != null || val)) {    e.type = "change";    return jQuery.event.trigger(e, arguments[1], this);  }}

Here isthe committhat fixed this issue.

jQuery.event.special.change = {filters: {focusout: testChange,click: function( e ) {var elem = e.target, type = elem.type;if ( type === "radio" || type === "checkbox" || elem.nodeName.toLowerCase() === "select" ) {return testChange.call( this, e );}},// Change has to be called before submit// Keydown will be called before keypress, which is used in submit-event delegationkeydown: function( e ) {var elem = e.target, type = elem.type;if ( (e.keyCode === 13 && elem.nodeName.toLowerCase() !== "textarea") ||(e.keyCode === 32 && (type === "checkbox" || type === "radio")) ||type === "select-multiple" ) {return testChange.call( this, e );}},// Beforeactivate happens also before the previous element is blurred// with this event you can't trigger a change event, but you can store// information/focus[in] is not needed anymorebeforeactivate: function( e ) {var elem = e.target;if ( elem.nodeName.toLowerCase() === "input" && elem.type === "radio" ) {jQuery.data( elem, "_change_data", getVal(elem) );}}},setup: function( data, namespaces, fn ) {for ( var type in changeFilters ) {jQuery.event.add( this, type + ".specialChange." + fn.guid, changeFilters[type] );}return formElems.test( this.nodeName );},remove: function( namespaces, fn ) {for ( var type in changeFilters ) {jQuery.event.remove( this, type + ".specialChange" + (fn ? "."+fn.guid : ""), changeFilters[type] );}return formElems.test( this.nodeName );}};var changeFilters = jQuery.event.special.change.filters;}

Making submit event bubble

In order to detect submission of a form, one needs to watch for click event on asubmit button or an image button. Additionally one can hit 'enter' usingkeyboard and can submit the form. All of these need be tracked.

jQuery.event.special.submit = {  setup: function (data, namespaces, fn) {    if (this.nodeName.toLowerCase() !== "form") {      jQuery.event.add(this, "click.specialSubmit." + fn.guid, function (e) {        var elem = e.target,          type = elem.type;        if (          (type === "submit" || type === "image") &&          jQuery(elem).closest("form").length        ) {          return trigger("submit", this, arguments);        }      });      jQuery.event.add(this, "keypress.specialSubmit." + fn.guid, function (e) {        var elem = e.target,          type = elem.type;        if (          (type === "text" || type === "password") &&          jQuery(elem).closest("form").length &&          e.keyCode === 13        ) {          return trigger("submit", this, arguments);        }      });    }  },  remove: function (namespaces, fn) {    jQuery.event.remove(      this,      "click.specialSubmit" + (fn ? "." + fn.guid : "")    );    jQuery.event.remove(      this,      "keypress.specialSubmit" + (fn ? "." + fn.guid : "")    );  },};

As you can see if a submit button or an image is clicked inside a form thesubmit event is triggered. Additionally keypress event is monitored and if thekeyCodeis 13 then the form is submitted.

live method is just pure awesome. It is great to see last few wrinkles gettingsorted out. A big Thank You to Justin Meyer ofJavaScriptMVC who submitted most of the patch forfixing this vexing issue.

$(".coda-slider-wrapper ul a.current").parent().next().find("a").click();

with this code

var direction = "next";$(".coda-slider-wrapper ul a.current").parent()[direction]().find("a").click();

I had never seen anything like that. In the above mentioned article, Remi usednext and prev methods. However I wanted to know all the options I could passsince this feature is not very documented.

Snippet from jQuery source code

Here is code from jQuery that makes that above method work.

jQuery.each(  {    parent: function (elem) {      return elem.parentNode;    },    parents: function (elem) {      return jQuery.dir(elem, "parentNode");    },    next: function (elem) {      return jQuery.nth(elem, 2, "nextSibling");    },    prev: function (elem) {      return jQuery.nth(elem, 2, "previousSibling");    },    nextAll: function (elem) {      return jQuery.dir(elem, "nextSibling");    },    prevAll: function (elem) {      return jQuery.dir(elem, "previousSibling");    },    siblings: function (elem) {      return jQuery.sibling(elem.parentNode.firstChild, elem);    },    children: function (elem) {      return jQuery.sibling(elem.firstChild);    },    contents: function (elem) {      return jQuery.nodeName(elem, "iframe")        ? elem.contentDocument || elem.contentWindow.document        : jQuery.makeArray(elem.childNodes);    },  },  function (name, fn) {    jQuery.fn[name] = function (selector) {      var ret = jQuery.map(this, fn);      if (selector && typeof selector == "string")        ret = jQuery.multiFilter(selector, ret);      return this.pushStack(jQuery.unique(ret), name, selector);    };  });

As you can see, a variety of selectors can be passed to jQueryCollection[].

If you want to give a try, any jQuery enabled site should perform all of thebelow mentioned code without any problem.

var a = $("a:first");var log = console.log;log(a["parent"]());log(a["parents"]());log(a["next"]());log(a["prev"]());log(a["nextAll"]());log(a["prevAll"]());log(a["siblings"]());log(a["children"]());log(a["contents"]());

<div>  <p>This is p</p></div>

Following jQuery code will do the work.

$(document).ready(function () {  var div = $("<div></div>");  var p = $("<p></p>").text("this is p").appendTo(div);  $("body").append(div);});

A better way to accomplish the same is presented below.

$("<div></div>")  .append("<p></p>")  .find("p")  .text("this is p")  .end()  .appendTo("body");

Using .end() you can go back one level. And you can use .end() any number oftimes to get out of a deeply nested tag.

$("<div></div>")  .append("<p></p>")  .find("p")  .append("<span></span>")  .find("span")  .text("this is span")  .end()  .end()  .appendTo("body");

All the JavaScript code mentioned in this blog should be tried on firebug.

The super popular live method was added tojQuery 1.3 . It works just great. Except when it does not work. As per thedocumentation this method does not work in following cases: blur, focus,mouseenter, mouseleave, change, submit .

How binding events work in jQuery

$("a").click(function () {  console.log("clicked");});

In above case click event is bound to all the links in the document. jQuerystores such binding information as data attribute of the bound element. Thisis how I can access the list of all functions bound to an element.

$("a").data("events"); // Object click=Object

If a new link is dynamically added then that new link will not get this clickbehavior. To solve this problem I can use live method.

Trying out live event

$("a").live("click", function () {  console.log("clicked");});

If I add a new a tag dynamically then that tag will automatically get the newclick behavior. That's great.

Just like the previous section, now I am going to find the events bound to aelement. However when I execute following code I get undefined .

$('a').data('events')); //undefined

Why is that. In the previous section I showed that all the events bound to anelement are stored as the data attribute of that element. Well, live isdifferent. live events are not bound to the element directly. They are bound tothe top level 'document'. I can verify this by trying out this code

jQuery.data(document, "events").live; //Object

How does live method work

live methods do not set anything on elements directly. All the event handlersare set at the document level. It means that in order for live methods to work,event bubbling is required. If you don't know what event bubbling is thenread her . It also means thatevent should not be stopped while it is propagating to document. If eventpropagation is stopped then event handlers bound at the document level willnever know about that event and live method will fail.

The strategy to let someone else deal with the event is calledevent delegation.

When live method is called then a binding is done at the document level. Looselytranslated this is what is basically happening.

$(document).bind("click", function (event) {  var $target = $(event.target);  if ($target.is("p")) {    console.log("p was clicked");  }});

As you can see when a click on p event bubbles all the way to the top thenthat event is captured by document and necessary action is taken if the targetelement matches.

It is clear that if the click event is stopped before it reaches document thenlive method will not work. I will show you an example.

<div id="parent">  Languages  <p>Java</p>  <p>Javascript</p></div>

$("p").live("click", function (e) {  console.log("p was clicked");});

If I click on Java or Javascript I get a message on console. live is workinggreat. Now I'll stop the event propagation when event reaches to div.

$("p").live("click", function (e) {  console.log("p was clicked");});$("#parent").click(function (e) {  console.log("stopping propagation");  e.stopPropagation();});

Now you will notice that live is no more working.

live does not work when event bubbling is not supported

In the previous section I showed that when event does not bubble up to documentthen live fails. It means that all the events that do not bubble will not work.Which means that events like blur, focus, mouseenter, mouseleave, change andsubmit which do bubble in IE will not work in IE. However note that these eventswill continue to work in Firefox.

<select id="lab1a" name="sweets" multiple="multiple">  <option>Chocolate</option>  <option selected="selected">Candy</option>  <option>Taffy</option>  <option selected="selected">Caramel</option>  <option>Fudge</option>  <option>Cookie</option></select><div id="lab1b" style="color:red;"></div>

$("#lab1a").live("change", function () {  var str = "";  $("select option:selected").each(function () {    str += $(this).text() + " ";  });  $("#lab1b").text(str);});

Above code will work in firefox but it will not work in IE.

Here is an example of an event that does not work in IE: onchange event.

DOM models suggest thatonchange event should bubble. However msdn documentation clearly says thatonchange event does not bubble.

Make all the live method problems go away

To recap live method will not work in following cases:

• live method works on event propagation, if an event is stopped while it isbubbling then live will not work.
• IE does not support bubbling for certain events. live method on those eventswill not work in IE.

There is a way to get around to both the problems.

Brandon Aaron developedlivequery plugin which was finallymerged into jQuery as live method. livequery plugin solves both the problemslisted above and the code works in IE too.

First step is to include this plugin

<script  src="http://github.com/brandonaaron/livequery/raw/master/jquery.livequery.js"  type="text/javascript"></script>

Now try this code.

$("p").livequery("click", function (e) {  alert("p was clicked");});$("#parent").click(function (e) {  alert("stopping progpagation");  e.stopPropagation();});$("#lab1a").livequery("change", function () {  var str = "";  $("select option:selected").each(function () {    str += $(this).text() + " ";  });  $("#lab1b").text(str);});

<select id="lab1a" name="sweets" multiple="multiple">  <option>Chocolate</option>  <option selected="selected">Candy</option>  <option>Taffy</option>  <option selected="selected">Caramel</option>  <option>Fudge</option>  <option>Cookie</option></select><div id="lab1b" style="color:red;"></div><div id="parent">  Languages  <p>Java</p>  <p>Javascript</p></div>

If I click on 'Java' or 'Javascript' I will get proper response even thoughevent propagation is being stopped. Also even though change event does notbubble in IE, above code works in IE.

livequery works because livequery ,unlike live, method does not do binding atthe document level. livequery does binding at the element level. You can findthat out by running following code.

$("p").data("events");

Above code will produce result if I am using livequery. Above code will notproduce any result if I am using live method.

The key piece of code in the plugin that makes all this work is

// Create a timeout to check the queue and actually run the Live Queries$.livequery.timeout = setTimeout($.livequery.checkQueue, 20);

Every 20 milliseconds livequery runs all the bindings defined in livequery andthen binds the matched element with the event.

By understanding the internals of how live and livequery are implemented, nowyou can choose to use livequery in certain cases where live will not work. Alsoit helps to understand how live actually works.

Live method finds elements and then throws it away. Not very efficient.

A typical use of live method is something like this.

$("p").live("click", function (e) {  console.log("p was clicked");});

As it has already been discussed a live method registers events at documentlevel.

However when $('p').live(...) is evaluated then jQuery first goes and findsall the p elements. And then what does it do with those elements. Nothing.That's right. jQuery throws away all those p elements which were just foundwithout using them. What a waste.

If your application has a lot of live methods and this might slow down theperformance of the application.

A better solution would have been to design an API like this one:

$.live('p', 'click', function(){..});~~~jQuery is flexible and I can create my own live method but it will add to the confusion. Another solution would be to make the call to live method without first finding all those `p` element. Here is how it can be done.~~~javascriptvar myDocument = $(document);myDocument.selector = 'p';myDocument.live('click', function(){  console.log('p was clicked');});

In the above case no element will be selected only to be thrown away. This ismuch better.

Seeing is believing

In the previous section, I showed how live method can be made to work withoutfirst selecting the elements. However a friend of mine asked me if I couldconclusively prove that in the real live method a find is actually done. Andin my solution a find call is not done.

Here I am showing you the overriding find method. In this method I amoverriding the original find method. I will put a log message before passing thefind method to the original method.

(function () {  var originalFindMethod = jQuery.fn.find;  jQuery.fn.find = function () {    console.log("find was called");    originalFindMethod.apply(this, arguments);  };})();$(document).ready(function () {  $("p").live("click", function () {    console.log("p was clicked");  });});

In the above case you will get message on firebug console confirming that findis indeed invoked when live method is called.

Here is revised version of live. Try this one.

(function () {  var originalFindMethod = jQuery.fn.find;  jQuery.fn.find = function () {    console.log("find was called");    originalFindMethod.apply(this, arguments);  };})();$(document).ready(function () {  var myDocument = $(document);  myDocument.selector = "p";  myDocument.live("click", function () {    console.log("p was clicked");  });});

Above version does not print 'find was called'.

I have following code which depends on jQuery.

var Search = {  initAction: function ($elm) {    if ($elm.attr("value").length === 0) {      $elm.attr("value", "search");    }  },  blurAction: function ($elm) {    if ($elm.attr("value") === "search") {      $elm.attr("value", "");    }  },};Search.initAction($("#query_term_input"));Search.blurAction($("#query_term_input"));

Everything is cool.

Next, company decides to use a cool JavaScript widget that depends on Prototypelibrary. After adding the Prototype library my code starts failing. I have beenasked to fix my code.

I can obviously go through the code and do a mass find $ and replace $ withjQuery. This is error prone.

A better solution would be to make use ofself invoking functionand redefine $ to jQuery .

var Search = (function ($) {  return {    initAction: function ($elm) {      if ($elm.attr("value").length === 0) {        $elm.attr("value", "search");      }    },    blurAction: function ($elm) {      if ($elm.attr("value") === "search") {        $elm.attr("value", "");      }    },  }; // return})(jQuery);Search.initAction(jQuery("#query_term_input"));Search.blurAction(jQuery("#query_term_input"));

var foo = {  first: function () {    console.log("I am first");  },  second: function () {    console.log("I am second");  },};foo.first();foo.second();

Everything works fine.

Now there is a need for function second to call function first. Try this andit will fail.

var foo = {  first: function () {    console.log("I am first");  },  second: function () {    console.log("I am second");    first();  },};foo.second();

One way to fix this problem is to hardcode value foo inside the secondfunction. Following code works.

var foo = {  first: function () {    console.log("I am first");  },  second: function () {    console.log("I am second");    foo.first();  },};foo.second();

Above code works but hardcoding the value of foo inside the object literal isnot good. A better way would be to replace the hardcoded name with this .

var foo = {  first: function () {    console.log("I am first");  },  second: function () {    console.log("I am second");    this.first();  },};foo.second();

All is good.

Chasing this

Javascript allows one to create function inside a function. Now I am changingthe implementation of method second. Now this method would return anotherfunction.

var foo = {  first: function () {    console.log("I am first");  },  second: function () {    return function () {      this.first();    };  },};foo.second()();

Also note that in order to invoke the returned function I have double ()() atthe end.

Above code does not work. It did not work because this has changed. Now thisin second function refers to the global object rather than referring to thefoo object.

Fix is simple. In the function second store the value of this in a temporaryvariable and the inner function should use that temporary variable. Thissolution will work because of Javascript's inherent support for closure.

var foo = {  first: function () {    console.log("I am first");  },  second: function () {    var self = this;    return function () {      self.first();    };  },};foo.second()();

Javascript is all about interactions. When an event happens then somethingshould happen. For example hover, click, focus, mouseover etc are basic eventswhich are used on a regular basis. jQuery provides a method calledbind to bind an action to anevent. For example, if we want an alert message when we click on a link thenthat can be done like this.

$("a").bind("click", function () {  alert("I have been clicked");});

jQuery also allows developers to make use of custom events. How it is going tohelp us, we are going to see it shortly. First let's take a look at a basiccalendar application.

This is a simple javascript calendar which primarily does four things: rendercalendar itself, pull data from API and update calendar with API data, abilityto collapse event information and ability to expand event information.

Code looks like this.

function redrawForMonth(d) {  //business logic to render calendar  $("#monthly_calendar_umbrella").updateCalendarWithAPIData();  $("#monthly_calendar_umbrella").ExpandAllEvents();}function updateCalendarWithAPIData() {  //business logic to get the data from API and appending data to appropriate date cell}function CollapseAllEvents() {  //business logic}function ExpandAllEvents() {  //business logic}

In the above case we have four methods. If all the implementation is filled outand helper methods are added then ,in total, we'll have tons of methods.

And slowly, it'll become difficult to see which methods act on the main elementmonthly_calendar_umbrella.

Let's look at the same functionality if implemented using jQuery custom events.

$("#monthly_calendar_umbrella")  .bind("redrawForMonth", function (e, d) {})  .bind("updateCalendarWithAPIData", function (e, d) {})  .bind("CollapseAllEvents", function (e) {})  .bind("ExpandAllEvents", function (e) {});

First difference, you will notice is how nicely all the actions possible on themain element are laid out. In this case just one look at the code tells me thatfour actions can be performed on the main element. This was not so obvious fromthe first version of the code.

In this case, I am binding events such as 'redrawFroMonth' to the element.Obviously 'redrawForMonth' is not a native event such as 'click' or 'submit'.This is what I mean by binding 'custom events' to elements. In this case'redrawForMonth' is a custom event.

The other thing that is not so obvious is the shift in focus. Traditionaljavascript programming has been too obsessed with the elements that is clickedor submitted that causes an action. The emphasis has been too much on keepingthe code around the element that creates an action. In this case the code hasbeen developed around the element that is being acted upon.

Now, the last part of the discussion is how to trigger custom events. Well,jQuery has a method calledtrigger .

Note that while binding a function is passed. The first parameter of thatfunction is always an event handler. In the below example I am passing only oneparameter even though the function takes two parameters: event handler elementand the parameter I defined.

$("#monthly_calendar_umbrella").trigger("redrawForMonth", new Date());

Recently I was discussing how to create a jQuery plugin with a friend of mine.In the end I had a base code that should work as a starting point of any jQueryplugin.

Take a look here .

Let's say that I have bound all the links to display an alert.

$("a").bind("click", function (e) {  e.preventDefault();  alert("clicked");});

Mine is a large application and a co-worker has added another javascript filewhich does this

$("a").bind("click", function (e) {  e.preventDefault();  alert("hello");});

Now if I click on a link I get two alerts. Not good. One way to debug would beto go through all the included javascript files.

However it would be cool if there is a way to find all the click handlersassociated with an element.

jQuery has data method which ituses internally to store information. jQuery uses data method to store all thehandlers associated with an element. We could use this information to ouradvantage. Here I am trying to find out all the click handlers associated withthe first link.

var output = jQuery.data($("a").get(0), "events");jQuery.each(output.click, function (key, value) {  alert(value);});

The output looks like this

function (e) { e.preventDefault(); alert("clicked"); }function (e) { e.preventDefault(); alert("hello"); }

jQuery.data method is also very useful if you want to store some informationabout an element. For example, in an application you need to store informationabout people. In the html page you are only displaying names. And when a name isclicked then you want to display age, hometown and the company they work for.You can store information about each user using jQuery.data and you can retrieveit when username is clicked.

<div id="parent">  Languages  <p>Java</p>  <p>Javascript</p></div>

And here is the javascript code. Run the code with jQuery-1.3.2 .

$(document).ready(function () {  $("#parent").click(function () {    alert("parent was clicked");  });  $("#parent p").click(function () {    alert("p was clicked");  });});

When you click on Java then you will get two alerts. That is because the clickon element p will propagate outward and it will be caught by element div whichhas onclick trigger.

If you do not want the event to propagate then here is a way to stop it.

$(document).ready(function () {  $("#parent").click(function () {    alert("parent was clicked");  });  $("#parent p").click(function (e) {    alert("p was clicked");    e.stopPropagation();  });});

Stopping the default behavior

Converting a regular html link into an AJAX request is easy. One of the thingsyou need to do is to return false so that the click operation does not performits default behavior.

$("a").bind("click", function () {  alert("clicked");  return false;});

However there is another way to handle such cases. preventDefault stops thedefault behavior. The same code could be written as

$("a").bind("click", function (e) {  e.preventDefault();  alert("clicked");});

Not sure why but I have noticed that e.preventDefault() should be the firstline in the function. If I switch the order of e.preventDefault and alertmessage in the above javascript then it does not work in Firefox/mac.

function foo() {  var x = 100;  alert(x);  for (var x = 1; x <= 10; x++) {}  alert(x);}foo();

What do you think the value of second alert will be. I thought it would be 100but the answer is 11. That's because the scope of a local variable in Javascriptis not limited to the loop. Rather the scope of a local variable is felt allover the function.

Before you look at the next piece of code remember that defining a variablewithout the var prefix makes that variable a global variable.

fav_star = "Angelina"; /* it is a global variable */function foo() {  var message = "fav star is " + fav_star;  alert(message);  var fav_star = "Jennifer";  var message2 = "fav star is " + fav_star;  alert(message2);}foo();

What do you think would be the alert value first time? I thought it would beAngelina but the correct answer is undefined. That is because it does notmatter where the variable is defined. As long as the variable is definedanywhere within a function then that variable will be set to undefined. It iswhen the statement is executed then the value of the variable changes fromundefined to Jennifer.

Thanks to my friend Subba Rao for bringing this feature of Javascript to myattention and for discussing it.

What are we talking about

My main concern is that as Javascript developer I should not be polluting globalnamespace. I could write the calendar code like this.

showCalendar = function (options, d) {};calendarHeaderMonth = function (opts) {};calendarHeaderWeek = function (opts) {};calendarData = function (opts) {};drawCalendar = function (opts, d) {};getCellID = function (year, month, day) {};// use showCalendarshowCalendar({}, new Date());

You can see that the main method that I want to expose to global namespace isshowCalendar. However I am also exposing six other functions to globalnamespace. It means that if some user has declared a global namespace functionnamed getCellID then my getCellID is going to collide with the user'sfunction. This is not good.

Goal

The goal is to refactor the code in such a way that only one methodshowCalendar is exposed to the global namespace. In order to test the code atthe very end of the javascript I will invoke a call to method getCellID.

showCalendar = function (options, d) {};calendarHeaderMonth = function (opts) {};calendarHeaderWeek = function (opts) {};calendarData = function (opts) {};drawCalendar = function (opts, d) {};getCellID = function (year, month, day) {};// use showCalendarshowCalendar({}, new Date());// this call should fail but is not failing nowgetCellID(2009, 5, 4);

The above call to getCellID is currently being executed successfully. It meansI have polluted the global namespace. I am going to fix it.

Solution

The solution is to put all the code inside a function. In a function all thevariables and functions declared are scoped only to that function. Out of thatfunction, inner functions cannot be used. Inside this function only one methodshowCalendar would be exposed.

Here is the solution.

(function () {  // by not declaring var this variable is going to be at global namespace  showCalendar = function (options, d) {};  var calendarHeaderMonth = function (opts) {};  var calendarHeaderWeek = function (opts) {};  var calendarData = function (opts) {};  var drawCalendar = function (opts, d) {};  var getCellID = function (year, month, day) {};})();showCalendar({}, new Date());// this call will failgetCellID(2009, 5, 4);

In the above case the call to showCalendar was successful. However call togetCallID failed. That's good. It means I am not polluting the globalnamespace.

If you notice carefully in the above case after declaring an anonymous functionI am invoking that function by having () at the end. You can read more aboutself-invoking function here.

Here is a great articlewhich describes in detail how to wrap your javascript code inside a jQueryplugin. The article did a great job of explaining the basics however it took mea while to understand the self-invoking functions.

Self-invoking functions

self-invoking functions are anonymous functions declared on run time and theninvoke it right then and there. Since they are anonymous functions they can't beinvoked twice. However they are a good candidate for initialization work whichis exactly what is happening in the jQuery plugin pattern.

Declaring a function

A function can be declared in two ways:

function hello() {  alert("Hello");}var hello = function () {  alert("Hello");};

The end result in the above two javascript statement was same. In the end avariable named hello was created which is a function.

Please note that in the above case only the functions are declared. They are notinvoked. In order to invoke the function we have to do this

var hello = function () {  alert("Hello");};hello();

How do we invoke an anonymous function. We need to call () on the anonymousfunction. But before that we need to wrap the whole command in (). Take a lookat this

// originalfunction hello() {  alert("Hello");}// step1 wrap everything in () so that we have a context to invoke(function hello() {  alert("Hello");})(  // now call () to invoke this function  function hello() {    alert("Hello");  })();

The final result is weird looking code but it works and that is how an anonymousfunction is declared and invoke on run time.

With this understanding now it becomes easier to see what is happening in thiscode

(function ($) {  // ....})(jQuery);

In the above case an anonymous function is being created. However unlike myanonymous function this anonymous function take a parameter and the name of thisparameter is $. $ is nothing else but jQuery object that is being passed whileinvoking this function.