The web has changed and with it the way we develop websites. Today, the web is becoming a place where we develop web apps, rather than websites. We use third party API's to create our next mashups. So knowing how to make a cross-site AJAX request or requests that do not comply with the same origin policy is a must. In this article, you will learn 4 cross-site AJAX request methods (plus 4 bonus legacy methods and links to jQuery plugins).

This methods will be handy to overcome Same origin policy as well. Browsers will throw an error if you are making AJAX request to the same domain but with different protocol (to https from http), use different port (http://same-domain.com:81) or subdomain.

This article reviews the following 4 methods and discusses their advantages & disadvantages. Also, summarise cases when they are better used.

Here is the list of methods:

1. CORS (Cross-Origin Resource Sharing)
2. JSONP
3. window.postMessage
4. Setting up a local proxy
5. + 4 bonus legacy methods (document.domain, window.name, iframe, flash)
6. + list of JavaScript libraries and jQuery plugins for making XSS requests.

Before we dive into the method details, let's cover most common cases:

• Firstly, if you are trying to read data that is available as RSS feed, you are better off with universal RSS to JSON converter powered by Google.
• Secondly, if you are accessing data from some popular website API, it's more likely they support JSONP as well. See their documentation.

JSONP is a cross browser method that does not rely on any browser hacks. It is supported by all browsers and many javascript libraries provide methods that make JSONP request seamless.

Anyone who used jQuery, starts with a CSS selector to either attach an event or apply some DOM manipulation. The power of jQuery lies in it’s CSS selector. One of the reasons why jQuery become so popular is probably in the concept shift it made to front-end development. Instead of starting your code with javascript function definitions, you start with DOM element selection and straight to your business requirements manipulating those elements. It abstracted away the problems of code structure and let you get on with your needs by selecting the objects you need.

Sometimes your code might require to identify how many elements were selected by jQuery. It might be to identify if there are any elements on the page or to use the number of elements in some other way. For example to set rowspan on your newly created table row. In this post, you will learn how to find out how many elements were selected and see some examples.

jQuery selector returns an array of elements jQuery object that has .length attribute. So the easiest way is to get the length of returned jQuery object. The size of that object will be equal to the number of selected elements. Also, you can use built in jQuery helper function called .size(). It returns the same value as .length property. So you can use .length or .size() depending on your choice, whichever makes your code more readable.

Examples

Assume we have the following HTML structure:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

Here is how you get the number of selected elements and check if there are any elements on the page.

1. Check the number of elements:

   $('.container').length;  // returns 1
   $('.item').length;       // returns 2
   
   // Same with .size()
   $('.container').size();  // returns 1
   $('.item').size();       // returns 2

2. Check if there are any elements:

   if($('.container').size() > 0) {
     // There is an element with class "container"
   } else {
     // There is no element with class "container"
   }

Let's see another example. Consider we have the following mark-up for a shopping cart with several order lines in it.

<div class="shopping-cart">
  <div class="order-line">Product 1 – <span>$4.99</span></div>
  <div class="order-line">Product 2 – <span>$9.99</span></div>
</div>

Business requirement: Show a modal box with special offer, if user has more than 1 products in his/her shopping cart.

if($('.shopping-cart .order-line').length > 1) {
  // Show modal box with special offer
}

In this post you will learn how to add a table column with a row count in it. If you are looking for "how to add a new table row", please refer to previous post.

Recently, a user on the jQuery mailing list asked how she could automatically add a table row counter into her table. She wanted to add a new column to her table and display the row number, so that her users could refer to row numbers while communicating. The user had the following HTML table markup:

<table class="transactions">
  <tr>
    <td>Order 1</td>
    <td>$10.99</td>
  </tr>
  <tr>
    <td>Order 2</td>
    <td>$4.50</td>
  </tr>
</table>

For cases like this, where you can be sure that there would be no table cell rowspans and there are only trs and tds. Then, jQuery code to add a counter is straightforward.

$('.transactions tr td:first-child').each(function(i){
  $(this).before('<td>'+(i+1)+'</td>');
});

Here, we are selecting first child td tags of all tr tags in a table with a transactions class. Then, we are iterating through them and passing a zero based index to the loop. While looping though the first row cells, we are adding new column just using .before('<td>'+(i+1)+'</td>') method. The resulting table would have the following markup:

<table class="transactions">
  <tr>
    <td>1</td>
    <td>Order 1</td>
    <td>$10.99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Order 2</td>
    <td>$4.50</td>
  </tr>
</table>

However, for cases when tables have header rows and footer, the above script may not behave as expected. That is why we have to take into the consideration table headers and footers. So the code snippet above will become:

$(".transactions").each(function(){
  $('th:first-child, thead td:first-child', this).each(function(){
    var tag = $(this).prop('tagName');
    $(this).before('<'+tag+'>#</'+tag+'>');
  });
  $('td:first-child', this).each(function(i){
    $(this).before('<td>'+(i+1)+'</td>');
  });
});

This code takes into the account the table headers and adds "#" header column for the counter. Still, this code is not as universal as it could have been. Let’s take into the account the possibility of row spans and multi line header rows and rewrite the code into the jQuery plugin with options.

So, here is the final code:

(function($){
  $.fn.extend({
    tableAddCounter: function(options) {
      
      // set up default options 
      var defaults = { 
        title:  '#',
        start:  1,
        id:     false, 
        class:  false,
      };

      // Overwrite default options with user provided
      var options = $.extend({}, defaults, options);

      return $(this).each(function(){
        // Make sure this is a table tag
        if($(this).is('table')){

          // Add column title unless set to 'false'
          if(!options.title) options.title = '';
          $('th:first-child, thead td:first-child', this).each(function(){
            var tagName = $(this).prop('tagName');
            $(this).before('<'+tagName+' rowspan="'+$('thead tr').length+'" class="'+options.class+'" id="'+options.id+'">'+options.title+'</'+tagName+'>');
          });
        
          // Add counter starting counter from 'start'
          $('tbody td:first-child', this).each(function(i){
            $(this).before('<td>' + (options.start + i) + '</td>');
          });
        
        }
      });
    }
  });
})(jQuery);

Plugin features

• Can set custom settings as a hash parameter to the plugin:
  • title - counter column header text
  • start - the number to start the counter
  • id - CSS "id" to add to all the counter tds
  • class - CSS "class" to add to all the counter tds
• It takes into consideration table header's row and column spans.
• Gracefully degrade for browsers that do not support javascript.
• Keeps your HTML mark up clean.
• Make your tabular data more readable.

Example code

// Add row count with default settings
$('.myTables').tableAddCounter(); 

// Provide your settings for 
// column name, css class and start counter from 26
var options = { 
  name: "Count", 
  class: "counter",
  start: 26
};
$('.myTables').tableAddCounter(options);

Here is the original table (to the left) and new table (to the right) with row columns automatically added.

This post describes how to get & set element’s attributes. Using jQuery you can get/set any attributes like id, class, style, name, title, etc. on any tag (<div>, <span>, <p>, etc.). This can be done using jQuery's .attr() and .prop() methods. If you are using jQuery version earlier than 1.6, then you have .attr() only.

The two methods are named accordingly to work with element's attributes and properties. The distinguish between them two was introduced in jQuery 1.6. For versions prior to 1.6 you don't need to worry about the difference and use .attr() in all cases. However, if you are working with newer versions of the library, you need to understand the difference between the two. You can read more about the difference between attributes and properties here and here. But before you dive into the details, let's see some examples.

Consider we have the following HTML tags on our page with corresponding attributes:

<div class="myContainer" id="wrapper">
  Some content 
  <a id="siteLink" title="Google" href="">link</a>
  <input type="checkbox" id="mycheckbox" checked="checked" />
</div>

In order to get container's id and the link's title attributes, we would use the following jQuery code:

// Get the ID of the selected div
var divID = $("div.myContainer").attr("id"); // "SiteLink"

// Get title attribute of a link
var linkTitle = $("#siteLink").attr("title"); // "Google"

// Get checkbox's "checked" state
$("#mycheckbox").prop("checked"); // returns boolean "true"
$("#mycheckbox").attr("checked"); // returns string "checked"

To set element’s attributes, you need to add it's value as the second parameter to the function.

// Add title to a link
$("a#siteLink").attr("title", "This is a link");

// Set table cell's collspan attribute
$("td.myDoubleCell").attr("colspan", 2);

// Mark checkbox as checked
$("#mycheckbox").prop("checked", true);

Additional notes

Here are some additional notes related to setting and getting attributes with jQuery that you should know:

1. In most cases you use would want to use .prop() method. It is programmer friendly. It returns values of the right types which makes your code more readable and easy to understand, whereas .attr() always return string value. For example: .prop("checked") above returned boolean, style properties would return object with style properties that you can work on, etc.

2. If jQuery selection returns more than one element, .attr()/.prop() functions would change only the first element’s attribute. If you need to change them all, you will have to do it in .each() loop.

   // Assume we have many links on our page
   $('a').prop('target', '_blank'); // Set target of the first link only
   
   // Setting the target of all links in the loop
   $('a').each(function(){
     $(this).prop('target', '_blank');
   });

3. Finally, you are not limited to W3 Consortium defined set of HTML attributes. You can also set your own attributes with their own values.

   //This code adds myAttr attribute with the value of 10
   $("#container").attr("myAttr", "10");
   
   // Read the value
   $("#container").attr("myAttr");

This post shows you how to reset HTML form using jQuery. Also, in the notes section below, you will find a list of special cases and things to keep in mind while resetting form.

Please note that this post discusses 2 cases of resetting a form:

1. Resetting form values to their default/initial values (similar to clicking on form "reset" button);
2. Clearing form values (clearing form values, no matter what their default values were).

1. Reset form values

Probably, you already tried to use $("your-form").reset() method and got the following error:

TypeError: $(...).reset is not a function

That is because jQuery does not have .reset() method. However, DOM form elements have .reset() method. It resets form values to their initial values. In other words, if we had an input field with value="set on server" attribute set, and then, user typed in some other random text. On reset() that input fields value would be reset to "set on server" again and not to " ".

That out of the way, here is how you can reset a form using "pure" JavaScript.

// JavaScript only syntax
getElementById("your-form-id").reset();

// Using jQuery selectors
$('.my-form-class')[0].reset();

Here is a better way to reset your form with jQuery. Simply trigger a reset event on your form.

// jQuery syntax
$('.my-form-class').trigger("reset");

Notes on method 1

Things to remember:

• Form values are reset to their initial/default values. They are not cleared/emptied.
• Hidden values are not reset. If you have changed hidden input field values, you will have to reset them manually. You can do it by subscribing to reset event.

2. Clear form

The difference between clearing and resetting a form is that in clearing form values we clear all form fields. In other words, we will not reset them to their default values, but will replace their content with "" (empty space).

In other to do that, we will have to go through each field in the form and set its' value to "".

UPDATE: Replaced the code with the one from learningjquery.com. It creates a clearForm jQuery plugin.

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Here is how to use clearForm jQuery plugin:

// Call it on your <form>
$('form').clearForm();

Notes on method 2

Put the plugin definition code into jquery.clearform.js file and include it your project.

This post covers all about jQuery’s .type() method. You will learn what it does, see its’ usage examples and understand the difference between jQuery’s .type() and JavaScripts’ typeof operator.

Without further ado, let’s find an answer to the following question.

What does $.type() do?

jQuery.type() method returns internal JavaScript class name of the passed argument.

jQuery.type(1)       // "number"
jQuery.type("foo")   // "string"
$.type(true)         // "boolean"
$.type(undefined)    // "undefined"
$.type(function(){}) // "function"
$.type(new Date())   // "date"
$.type(/test/)       // "regexp"
$.type(null)         // "null"

You might argue, why should I use jQuery .type() function when JavaScript already has native typeof operator that does just that. Well, you are in luck. In our previous post I explained why JavaScript’s typeof operator fails in what it’s supposed to do and excels in something else. Take the time and read the article.

When would you need it?

The method is very handy when writing a jQuery plugin or a function that can receive different type of arguments (e.g. $.css(Array or String)) or take optional parameters (e.g. $.click([eventData], function)).

In the case of $.click() method above:

/* You can either check:
  - eventData's type
  - fn === undefined
*/
click: function(eventData, fn){

    if($.type(fn) === "undefined"){
      fn = eventData;
      eventData = {default: "value"};
    }

}

Notes and Caveats

I would like to leave you with some notes on $.type() method:

• as of jQuery 1.9 $.type(new Error()) will return "error"
• if the argument type is not one of the list below, method will return "object":
  • Boolean
  • Number
  • String
  • Function
  • Array
  • Date
  • RegExp
  • Object
  • Error

This post will explain the root cause of the Reference Error in your browser’s console log. Also, list most common cases with examples and solutions. Without any further ado, lets see what a reference error is.

This is a common JavaScript error that says: you are trying to access a variable or call a function that has not been defined yet.

Reproducing the error:

// VARIABLES
foo; // ReferenceError: foo is not defined
var foo;
foo; // No more errors

// FUNCTIONS
bar(); // ReferenceError: bar is not defined
bar = function(){};
bar() // No errors

By now, you might have guessed the reason behind the "ReferenceError: $ is not defined" error. It is exactly the same as the bar() example above, but the name of the function is $ instead of bar this time. So, what it means is that we are trying to access the method $ that has not been defined yet. When is it possible? Only when jquery.js file has not been loaded successfully before we tried to call $().

Some common cases when error may occur

1. Problem: Path to your jquery.js file is broken and it can not be found (Error 404).

   <script src="/wrong/path-to/jquery.min.js"></script>

   Solution: fix your path to jquery.js file. If your project is a public website, you better use Google hosted jQuery file.

   <script src="/correct/path-to/jquery.min.js"></script>

2. Problem: jQuery plugin is included before jQuery file.

   <script src="/path-to/jquery.plugin.js"></script>
   <script src="/path-to/jquery.min.js"></script>

   Solution: Include jquery.js file before any jQuery plugin files.

   <script src="/path-to/jquery.min.js"></script>
   <script src="/path-to/jquery.plugin.js"></script>

3. Problem: You are including jQuery file without the protocol in the URL and accessing the page from your local file system.

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

   Solution: Temporarily add HTTP protocol (http:// instead of //) in the URL while you are developing.

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

4. Problem: jQuery file is included from the web, but you don't have an internet connection. It is a silly mistake, but you would be surprised how ofter it happens.

   <script src="http://www.example.com/js/jquery.min.js"></script>

   Solution: Include local jquery.js file copy or connect to the internet :)

   <script src="/js/jquery.min.js"></script>

If the above cases do not solve your case, try to figure out why jQuery is not loaded before the line where this error is thrown.

Testing if certain checkbox is checked using jQuery is pretty simple task. But I, just like many other developers, keep forgetting the exact syntax. So I decided to carry on a little research on the subject and gather all related information including small caveats and write this article for the future reference.

This post covers 4 methods to check if checkbox is checked. All methods especially do the same thing: test if checkbox has checked property set. But depending on the version of jQuery you are using, the methods may vary. Lets consider we have the document setup below and see how to test checkbox checked using different versions of jQuery.

<input id="checkbox"  type="checkbox" name="one" value="1" checked="checked">
<input id="checkbox2" type="checkbox" name="two" value="2">
<input id="checkbox3" type="checkbox" name="thr" value="3">

Using jQuery version 1.6 or newer

As I mentioned above, we need to check the checked property of an element and correct way of doing it is to use .prop() method. So if other methods do not add any value to your code’s readability, please use the first method below.

// First method - Recommended
$('#checkbox').prop('checked')  // Boolean true

// Second method - Makes code more readable (e.g. in if statements)
$('#checkbox').is(':checked')  // Boolean true

// Third method - Selecting the checkbox & filtering by :checked selector
$('#checkbox:checked').length  // Integer >0
$('#checkbox:checked').size()  // .size() can be used instead of .length

// Fourth method - Getting DOM object reference
$('#checkbox').get(0).checked  // Boolean true
$('#checkbox')[0].checked      // Boolean true (same as above)

Earlier version of jQuery (up to v1.5)

jQuery version 1.6 introduced .prop() method to get HTML/DOM element’s property instead of an attribute. Prior to version 1.6 we had to use .attr() method instead. Read more about the difference between .prop() and .attr().

// First method - Recommended
$('#checkbox').attr('checked')  // Boolean true

// Second, Third & Fourth methods – The same as for version 1.6. See above.

Caveats & problems

What if your jQuery selector has a set of more than one checkbox? This is how the methods above will behave?

Case 1:
<input class="check" type="checkbox" name="one" checked="checked">
<input class="check" type="checkbox" name="two">

Case 2:
<input class="check" type="checkbox" name="two">
<input class="check" type="checkbox" name="one" checked="checked">

// Case 1:
$('#checkbox').prop('checked') // true
$('#checkbox').is(':checked')  // true
$('#checkbox:checked').length  // 1
$('#checkbox')[0].checked      // true

// Case 2:
$('#checkbox').prop('checked') // false
$('#checkbox').is(':checked')  // true
$('#checkbox:checked').length  // 1
$('#checkbox')[0].checked      // false

jQuery attribute selector $('elem[name]') does not return updated property value. So use other methods instead.

$('#checkbox[checked]').length;        // Integer 1
$('#checkbox').prop('checked', false); // Uncheck the checkbox
$('#checkbox[checked]').length;        // Still returns 1, not 0

Select all checked checkboxes on the page or within a container.

$("input[type=checkbox][checked]"); // All checkboxes in the document that are checked

This is all I could find on the subject. Please bookmark or share the article so that it is easier to find it later.

jQuery's .end() method is one of the most rarely used methods that I know of. In this post I would like share remind you what it does and how we can use it to make our jQuery code more readable.

Firstly, what does it do?

Put simply .end() cancels the last filtering action and returns a set like it was before the filtering was applied. It's best explained with an example. Consider we have this HTML code:

<ul>
  <li>One</li>
  <li>Two</li>
  <li class="special">>Three</li>
</ul>

$('li')  // would have all 3 elements

$('li').filter('.special')  // would have 1 (third) element only

$('li').filter('.special').end()  // would have all 3 elements again

Now, the main question: Why on earth would you need it?! It is actually very useful when you have to apply different methods on several sub-selections in your DOM. The game development fits this case perfectly. I have seen beautiful and easy to understand game code that was made possible by a combination of custom jQuery selectors, extending jQuery and .end() method.

Couple of examples

To give you an idea of what a code of some hypothetical game might look like:

check_mines = function(from, to_coord){  // don't pay attention to this building block
     $("#game-canvas")

          .find("div:ships")
               .moveElements(from, to_coord)
          .end()

          .find("div:mines")
               .killIfClose(to_coord)
          .end()

          .find("div:healthPack")
               .addHealthIfClose(to_coord)
               .markHealthPackUsed(to_coord)
          .end();

};
SomeGame.register(check_mines);  // don't pay attention to this building block

As you can see, .end() helps us group related actions and make the code more readable.

Let's consider more realistic case. Let's say we have an article with images, links etc. (eg. Wikipedia articles). We need to add .content-img class to all images, than add .external-link to all external links, and finally apply a tooltip plugin to all the links that have .tooltip class within the article.

<div class="article">
     <p>Text ... </p>
     ...
</div>

$(".article")

    .find("img")
        .addClass("content-image")
    .end()  // back to .article set

    .find("a:external")
        .addClass("external-link")
    .end() // back to .article set

    .find("a.tooltip")
        .tooltip()
    .end(); // don't really need it here, but nice to have for symmetry

The above case is better written in 3 separate lines of codes of course, but it here to help explain the purpose of the .end().

NOTE:
If you do several filtering, you must call .end() several times as well.

$(".article").find("a").filter(".tooltip").end().end();

Hope you will find useful cases for .end() in your projects.

This post shows you how to bind JavaScript functions that will fire when user navigates away from your page, closes browser or a tab. Browsers have native JavaScript events on window object: unload and beforeunload. beforeunload is a proprietary event introduced by Microsoft and supported by other browsers, but not all.

Please note, these events will be fired when user navigates away from the current page. This includes when user:

• closes the browser or a tab;
• clicks on any link (does not matter if it's to other domain or the current domain);
• types any URL to the browser bar and leaves the page;
• clicks browser's page reload, back, forward buttons.

NOTE
You must test your code, because the behavior of how browsers handle unload event has changed even in different versions of the browsers.

Catching browser/tab close event with JavaScript

Since unload is a native JavaScript event, we can get away without using jQuery at all.

window.onunload = function(){
    // do some clean up
    clearLocalStorage();
};

If you are using alert(), confirm() or making AJAX requests here, please see what browsers block them belove.

Subscribing to browser/tab close using jQuery

jQuery introduced $.unload() event shorthand in v1.0 and deprecated it in v1.8. $.unload() is a shorthand for .bind('unload', handler).

$(window).unload(function() {
    // Do some code clean up
});

How browsers handle alert(), confirm() and AJAX requests on unload event?

The document unload event was originally designed to let JavaScript to do some clean up. For example, clear or set cookies, but most of the time it is used to fire alert/confirm box or make an AJAX request to the server. This led to bad user experience and browsers started to block these methods in unload event.

Here is what each browser does:

• Chromer/Safari (WebKit)
  • alert(), confirm() - blocked (confirm() returns false), AJAX request - not sent.
• Firefox
  • alert(), confirm() - blocked (throws an internal NS_ERROR_NOT_AVAILABLE exception), AJAX requests - sent on page reload, but not on tab close.
• IE9
  • alert(), confirm() - not blocked, AJAX requests - not sent.
• Opera
  • alert(), confirm() - blocked, AJAX requests - not sent.

Browsers that have pop-up window blockers will block all window.open() function calls in unload event handler.

There have been many method additions and deprecations in the last jQuery releases, but never so many changes that remove previous deprecations and make backward incompatible changes in a single release. Final release of jQuery 1.9 will be announced today. This article will help you get an overview of what’s changing and how to get prepared. So lets review these changes.

1) $.browser is no longer available

$.browser added in v1.0, deprecated since v1.3 and now it's gone. If possible use browser feature detection ($.support) instead of browser sniffing ($.browser). The documentation says that it may be moved to a plugin, but it's not yet (well, not considering jQuery Migrate of course). If you haven't used $.support before, we will cover it in our next post.

For those who really need just the browser sniffing feature back, you can copy-paste the highlighted code from jQuery 1.8.3's core here.

2) .andSelf() is renamed to .addBack()

.andSelf() added in v1.2, deprecated in v1.8. It's used for adding previous selection set to the current set in the chain.

For example: $('.first-set').children().andSelf() - would return a set with all children of the .first-set, plus .first-set's themselves. It took no arguments and now it has been replaced by .addBack() method that does the exact same thing, but accepts optional selector argument to filter out the set. So with the example above you could say: $('.first-set').children().addBack('div') - return all children of .first-set, plus .first-set's that are <div>s.

3) Removed deprecated .sub()

.sub() added in v1.5, deprecated in v1.7. Lets you create a copy of jQuery object, so that methods' default behaviours could be overwritten.

For example you could overwrite jQuery's .data() methods so that it would try to fetch required data from your server if it's not found on the element.

(function() {
  var copy = jQuery.sub();

  copy.data = function(element, key, value) {
    // Make sure user is trying to get, not set data
    if(!!value) return jQuery.data.apply(this, arguments);

    // Get data using default jQuery.data() method
    var data = jQuery.data.apply(this, arguments);

    if(!data) {
      // if no data, get it from the server
      data = $.ajax({ AJAX_INFO });
    }

    // Once we have the data, cache it using
    // original $.data() and return to the callee
    return jQuery.data.apply(this, arguments, data);
  };

  copy(document).ready(function($) {
    alert($(".test-elem").data();
  });

})();

If you want to study how it was accomplished, here is the related code from 1.8.3 code base.

4) Can't toggle through click events, only visibility

.toggle() added in v1.0, deprecated in v1.8. There were 2 .toggle() methods: one that animates show/hide, the other toggles click events. The one that toggles through click handlers is removed. So .toggle(function(){}, function(){}) will not work. Here is the related code in jQuery Migrate plugin.

5) No more $('img').error()

.error() added in v1.0, deprecated in v1.8. Not to be confused with $.error() method, that throws new Error(msg);

6) .attr() for working with attributes only

.attr('value', newValue) used to set property instead of attribute. To set current value use .prop('value', newValue) and .val(newValue) for form elements.

Learn the difference between property and attribute.

7) Removed "hover" pseudo-event

"hover" – there is no more event called hover. Instead use "mouseenter mouseleave". Please note, that only pseudo-event name is no longer available. You can still use .hover() method.

8) Global AJAX events triggered on document

ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxComplete, ajaxStop now must be bound to 'document'.

9) Internal undocumented changes

There are also some other internal methods that were either changed or removed (like .data('events') and $.clean()), but since they are not documented I guess you are not using them.

How to deal with all the changes?

As you can see jQuery 1.9 throws away many deprecated methods, but the team understands that there is a lot of code in production that relies on these features. So jQuery team provided us with jQuery Migrate plugin that makes code written prior to 1.9 work with it.

If you use unminified version of the plugin, it will log warning messages in console if your code uses any of the deprecated methods. The minified file is for production and it does not throw any warnings.

This is not a catchy post title or usual marketing trick. 2 hours is actually how long it would take to learn QUnit for an average developer (provided you are familiar with JavaScript and web dev basics of course). Well, that's how long it took me to learn. I read the docs (very short and concise), read QUnit tests of some popular jQuery plugins, wrote some tests of my own, and all these got me to the point where I could answer QUnit related questions on StackOverflow.

First, I was planning to cover all the basics of QUnit in this article, but then I thought, getting the message out would yield more positive results. The message that learning everything (and I mean everything) about QUnit testing takes no more than couple of hours. I believe this would make a better impact on jQuery/JavaScript community as a whole. This article will outline the basics and guide you through the optimal learning process (with links to resources).

Let's get started

Learning QUnit at first might be overwhelming. But once you learn that its' API has only 14 methods (and some of them are just negation of others, e.g. equal() & notEqual()), the learning process gets more manageable and easy. Here is an overview of those 14 methods mentioned above:

• 8 assertions (equal(), notEqual(), deepEqual(), notDeepEqual(), strictEqual(), notStrictEqual(), ok(), throws())
• 3 assertion organisation methods, also known as test suites in other unit testing frameworks (module(), test(), asyncTest())
• 3 helper methods to test async methods, such as AJAX, setTimeout(), callbacks, etc. (expect(), stop(), start())

This out of the way, we are ready to learn QUnit.

Here are 4 steps that will (1) introduce you to unit testing and QUnit, (2) cover all API methods, (3) show and discuss some common testing scenarios and (4) see how others are using it:

1. Read an Introduction to unit testing. The article introduces the idea of unit testing and sets the stage to and introduces QUnit. - 20 min
2. Go through those 14 methods we talked about above (assert, async assert, test). The API explanations are very short and to the point. - 30 min
3. See some examples of testing javascript and jQuery code using QUnit in the cookbook. - 40 min
4. Read and examine some tests on GitHub: - 30 min
   • Unit test of QUnit written in QUnit (good place to start);
   • jQuery UI unit tests
   • jQuery Migrate plugin’s unit tests

Hopefully, you will spend the next 2 hours learning QUnit and your next jQuery plugin/JavaScript code will be covered by tests. Please, help to spread the word and share the link.

PS. In upcoming posts we will cover other testing frameworks such as Mocha and Jasmine (has syntax that resembles Ruby's rspec), object stubbing and mocking with Sinon.JS, and some alternatives to assertions with Chai. Also, to make coding more pleasant we'll cover CoffeeScript as well. So stay tuned: Like us on Facebook, follow on Twitter or subscribe to RSS.

As it was described in our previous post “How to prepare your plugin for the new jQuery plugins site” you will need to add a manifest file if you want your plugin to appear on the new jQuery plugins site. In this post we will cover everything you need to know about the manifest file, how to format it and where to put it.

What is a jQuery plugin manifest file?

It is a JSON file (not JavaScript literal) that carries all necessary information about your plugin. Information like: plugin name, description, version, author, homepage, licenses, plugin dependencies, etc. The upcoming plugins.jquery.com site will use this data to populate its’ database and create an individual pages for each plugin.

Manifest file naming conventions

The manifest file’s name must be yourpluginname.jquery.json. For example, jTwitter plugins manifest file name would be named: jtwitter.jquery.json. Please be advised, at first the file name was planned to be package.json (following common.js conventions). However, after some discussions it was changed to *.jquery.json.

There is also a concept of suites. Suites are a way to namespace many plugins in a single repository (e.g. jQuery UI would name their fils: ui.tabs.jquery.json). Suites are created manually by jQuery team.

It’s been over a year since the unfortunate event that whipped out the plugins.jquery.com site’s database. But sometimes unfortunate events lead to better things and that’s the case with the Plugins site. Instead of trying to reinvent the wheel and create a website equally useful for plugin users and plugin developers (while fighting spam, maintaining the servers, etc.), the team decided to embrace the power of existing tools. Now plugin developers will maintain their code on GitHub taking full advantage of all its’ features, while jQuery Foundation concentrates on building a better user experience for “plugin users”.

This means that plugin development and maintenance lifecycles are moving over to more confortable and more suitable for this kind of work GitHub platform.

There seems to be a lot of confusion among “plugin users”, that they’ll need to deal with GitHub and such. “NO” – plugin users will see all necessary information about the plugin on a user friendly plugins.jquery.com website.

In this post I will show how to dynamically change document's title using JavaScript and jQuery. Browsing the web (and StackOverflow) I saw a lot of posts that say you can't do it using jQuery. Actually, there is a jQuery syntax that is basically a wrapper for javascript code (see below).

Note: just to clarify, by document title we mean the text that is displayed in the browser window or a tab.

The best way to change the document title is to use native javascript api document.title.

document.title = "New text set by JavasSript";

The equivalent jQuery code of js code above.

$(document).prop('title', 'New text set by jQuery');

Example

Let's say we need to change the tab title text when a user clicks on a button. Here is a jQuery code to do just that:

<html>
<head>
  <title>Initial page title</title>
  <script src="path-to/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#clickme').click(function(){
        document.title = $(this).val();
        // jQuery syntax alternative
        // $("title").text( $(this).val() );
      });
    });
  </script>
</head>
<body>
  <input type="button" id="clickme" name="clickme" value="Click me!" />
</body>
</html>

To conclude, you are better off using document.title, because it is cross-browser and has performs better.

Alternative jQuery syntax has been tested in all major browsers.

In this post I would like to explain the difference between double (==) and triple (===) equals in JavaScript/jQuery. A quick and short explanation is that == does type coercion (conversion) before checking for equality; and === does strict equation which requires values to have the same type as well.

Here is what it means:

0 == false     // true
0 === false    // false, because they have different types (int, bool)
1 == "1"       // true
1 === "1"      // false, because they have different types (int, string)
null == undefined // true
null === undefined // false

Detailed (longer) explanation

When you use == the javascript interpreter will convert one side of the comparison according to these rules:

• When comparing a number and a string, the string is converted to a number value.
• When comparing a boolean, the boolean is converted to 1 if it is true and +0 if it is false.
• When object is compared with a number or a string, the object is converted to its’ default value (.valueOf(), .toString()). If these methods are missing a runtime error is thrown.
• When comparing an object and another object, no type conversion is made. They are equal only if they refer the same object.

When you use === the javascript interpreter will not convert values to primitive types and make sure that the operands have the same value as well as the same type.

"foo" === "foo"  // true, both operands are of type String
new String("foo") === new String("foo")  // false, 2 Objects refer diff object instances

Detailed comparison information can be found on Mozilla Developer Network page. Here is the summary:

• Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions
• Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another
• Two Boolean operands are strictly equal if both are true or both are false
• Two distinct objects are never equal for either strictly or abstract comparisons
• An expression comparing Objects is only true if the operands reference the same Object
• Null and Undefined Types are == (but not ===)

Greasemonkey is a Firefox add-on that lets you run JavaScript on web pages you specify. Using Greasemonkey you can improve and change the way websites look and behave (see examples of what is possible here). To learn more about it see it's official site, to learn how to include and write your own custom scripts (aka "user scripts") visit coder's manual.

Usually Greasemonkey scripts work with the DOM and jQuery is the best way to do that. So, no wonder you'll want to include jQuery into your custom scripts. Here are 3 ways to include jQuery library into your user script.

If you are targeting for Greasemonkey 0.8.0+ you can use @require. It runs once when the script is being installed, hence downloaded once. This is preferred and most efficient way to add jQuery.

// ==UserScript==
// @name     My jQuery Test
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

// Do your magic here
$(".ads").remove();

If you are developing for older versions of Greasemonkey you have 2 options. Either add the whole jQuery library code into your Greasemonkey script file or dynamically add a <script> tag to the page.

Adding jQuery library right in your custom script

// ==UserScript==
// @name     My jQuery Test
// ==/UserScript==

// include jQuery library
/*!
 * jQuery JavaScript Library v1.6.2
 * http://jquery.com/
 *
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2011, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Thu Jun 30 14:16:56 2011 -0400
 */
(function(a,b){function cv(a){return f.isWindow(a)? ...

One more method to add jQuery

One more way to add jQuery is by attaching <script> tag to the document. You can read more about it and grab the code here.

Don't forget to check if jQuery is already loaded

if (unsafeWindow.jQuery === undefined) {
  // jQuery is NOT loaded
} else {
  // jQuery is already loaded
}

Recently, I wrote my first jQuery Globalization plugin introductory post. I mentioned that I will write a tutorial for Globalization plugin and I am. While writing the tutorial I thought I’ll write one of my short Friday jQuery tips.

In this post you will learn how to check if a specific jQuery Globalization plugin language file is loaded or not. Globalization plugin saves localization data and all information in jQuery.cultures object. By default English language is added. So if you add "Inuktitut" language (code iu) the jQuery.cultures object will be extended and will have jQuery.cultures.iu object in it.

So to check if particular language file is loaded all we need to do is to check if jQuery.cultures.langCode is defined. Here is an example:

if($.cultures.iu){
    // Inuktitut jquery.glob.iu.js lang file is loaded
}else {
    // Inuktitut language is not loaded, load it here
}

Some cultures have different alphabet, so they will have that appended in their language and culture names. For example Inuktitut has Syllabics (iu-Cans) and Latin alphabets (iu-Latn), So you will not be able to check the file existence with the code above. Here is a syntax to do it:

if($.cultures.iu-Latin){
    // Will not work
}

// Better way to check if the lang file is loaded
if($.cultures["iu-Latn"]){
    // Inuktitut jquery.glob.iu-Latn.js lang file is loaded
}else {
    // Inuktitut language is not loaded, load it here
}

This post gives you a short JavaScript function to detect your iPad users. Without any further ado, a javascript code to detect iPad users:

function isiPad(){
    return (navigator.platform.indexOf("iPad") != -1);
}

You can also detect browser version and some other stuff by parsing user agent string. Here is an iPad Safari’s user agent string for your reference:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Recently a friend of mine got himself an iPad and I couldn’t not notice how his internet browsing device preferences are changing (PC & iPad). More and more people are using hand held devices namely iPad to browse the internet. So it’s about time to show your iPad visitors some love and display your website designed specifically for iPad.

Let’s see how to do this. There are two way:

1. Redirect iPad visitors
2. Apply different CSS file for iPad users

Most of the posts on the internet related to iPad user detection are suggesting and showing you how to redirect (including myself in my previous iPhone & iPod detection post). However, I would recommend the second option, applying different CSS file.

You can apply the same technique described in applying different styling for javascript enabled browser with CSS post and apply different CSS rules for iPad visitors.

Sidenote: If you decide to redirect iPad users rather than apply different CSS style rules, than I would recommend using server side detection and redirection. You can see an example PHP code by David Walsh.

This is the first post of a series that are dedicated to jQuery’s new Microsoft contributed Globalization plugin or shortly jquery.glob.js. In this first post I will try to cover the very basics like library licensing, “the good & the bad” and some thoughts on how it could be improved (IMO).

I will be post some jQuery globalization plugin tutorials in coming days, so bare with me.

Before we jump into licensing and support issues, first things are first. What’s up with the name? It’s confusing! When did we start calling localization (l10n) a globalization?! I haven’t seen any g12n abbreviations lately, have you? When I first came across it, I thought it was some wicked jQuery solution to "global variables are evil" idea or solution to some other problem that I am not even familiar with :) Don’t you agree, it’s confusing a bit.

So, there you go. One little improvement: "Don’t confuse, rename it!"

Before we talk about the jQuery globalization plugin license, let me mention that this plugin is now officially supported by jQuery Project. Which means that it will be under continues improvement by jQuery core team and will be compatible with the future jQuery and jQuery UI releases. Also globalization plugin will become a part of the jQuery UI project.

jQuery Project officially supports jQuery Globalization plugin.

Now, the legal stuff – the license. Because jQuery project accepted the globalization plugin as officially supported (and of course because Microsoft agreed to its terms) jQuery Globalization plugin is distributed under the same license as core jQuery.js. So you are safe to do pretty much anything.

jQuery Globalization plugin is licensed under the same non-restrictive terms as the core jQuery.js

After playing with the plugin for a while I realized that it does not do any DOM manipulations and you certainly don’t expect any animations. So what’s the point of having it as jQuery plugin and not a general JavaScript globalization/localization library? This way a larger community could benefit from it. I guess it was more of marketing decision rather than technical.

JavaScript library alternative to globalization plugin would be nice.

To be honest, JavaScript and jQuery community had a lack of localization libraries and jQuery Globalization plugin with over 350 localizations is a great solution. Surely, plugin’s exposed function names and namespacing could be improved, and most probably will be, but we’ll talk about it in our next “jQuery Globalization plugin tutorial” post. Stay tuned…