jQuery & Cookies (get/set/delete & a plugin)

In this post I would like to share javascript functions that will help you easily get, set, delete and basically manage your cookies. Also, link to jQuery Cookie plugin, it’s improved version with more functions and of course easy to read and short examples on how to use these functions.

I will try to keep this post short and will not explain what cookies are and how to eat them. There are plenty of articles covering it already.

Here are javascript functions by Peter-Paul Koch to getCookie(), setCookie() and deleteCookie():

function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}
/*
  Changed function names from readCookie(), createCookie()
  and eraseCookie() to getCookie(), setCookie() and
  deleteCookie().
*/

Here is an example that shows you how to use those functions in your javascript to create, edit and delete your cookies:

// Create/write a cookie and store it for 1 day
setCookie('myCookie', 'myValue', 1);

// Get my cookie
getCookie('myCookie');

// Delete/erase my cookie
deleteCookie('myCookie');

These 3 javascript functions are all you need to manage your cookies, but if you want to do it in “jQuery style” than you can use jQuery Cookie plugin or it’s improved version.

Here is how to use jQuery Cookie plugin in your code:

// Setting a cookie
$.cookie('myCookie':'myValue');

// Creating cookie with all availabl options
$.cookie('myCookie2', 'myValue2', { expires: 7, path: '/', domain: 'example.com', secure: true });

// Get a cookie
$.cookie('myCookie');

// Delete a cookie
$.cookie('myCookie', null);
With an improved version of the plugin you can set and get multiple cookies in one call. The improved version of the jQuery Cookie pluin only adds few additional bytes. So it really worth it. 
// Set multiple cookies
$.cookie({ 'cookie1':'value1', 'cookie2':'value2' });

jQuery Mobile

jQuery Mobile is an attempt to create a javascript framework that would work on all major mobile browsers. In this post I will try to lay down all the facts that I could find about jQuery Mobile, so that you are up to date.

jQuery team has mentioned that they were planning and started to work on jQuery for Mobile devices when they announced jQuery 1.4. John Resig said that they already had different mobile devices from sponsor for testing purposes. Anyway, jQuery Mobile is officially announced now, but there is a very little information about it.

Here are some facts that I found:

  1. jQuery Mobile will be in core, NOT as a separate distribution like jquery.mobile.js
  2. jQuery UI team will improve current jQuery UI and develop new mobile components (initial designs).
  3. Release of the jQuery Mobile and new jQuery UI components is planned for October 2010.
  4. As of writing of this post, jQuery Mobile source code is not available. The code will be pushed to the jQuery core’s GitHub repository and announced on the official jQuery mobile page.
  5. You can help jQuery Mobile project by testing jQuery core on your mobile devices at TestSwarm.

That’s all I could find on jQuery Mobile for now. Subscribe to my RSS or follow me on Twitter to stay updated about news related to jQuery Mobile.

jQuery.live() – event binding to AJAX loaded elements

jQuery.live() function was introduced in jQuery version 1.3. It makes it easy to dynamically bind events to DOM elements that have not yet been created. In other words, it helps you to easily attach events to AJAX loaded elements that match your criteria.

NOTE:
If for some reason you are using old versions of jQuery, prior to 1.3, you will need to use event delegation or another method as they are described in my previous post named “How to bind events to AJAX loaded elements in jQuery 1.2.x”.

So, how does .live() function works?

It uses event delegation technique to bind to the events that fire on your page. In other words, it binds an event to the DOM tree’s root and listens to all events. When an event is fired it checks it’s originator and checks if we have bound any events to that particular DOM element.

// Example usage of jQuery().live() function
$('.mySelector').live('click', function(event){
    // my click event handler
});

// As of jQuery 1.4.1 .live() can accept
// multiple events, just like .bind() does
$('input').live('focus blur', function(event){
    // fires on focus and blur
});

You can also pass in additional data to your events to overcome some issues caused by closure. This was introduced in jQuery 1.4. Also, it worth mentioning that data is passed when the binding is made. Keep this in mind when you pass in dynamic data.

$('.mySelector').live('click', {myVar: 'myVal'}, function(event){
    // my click event handler
});

NOTE:
Some events were not supported cross browser in jQuery 1.3. Events like submit were supported in Firefox only. This is resolved in jQuery 1.4. Other methods that were not supported cross browser in jQuery 1.3 include: focusin, focusout, mouseenter, mouseleave, etc.

NOTE:
.live() function also works with custom events.

jQuery.live() function performance

Because .live() uses event delegation and performs additional checks, it will always be slower then events attached to the DOM elements using .bind() function (this includes shorthands like: .click(), .submit(), etc.). However, you can improve your .live() function performance providing context (as of ver. 1.4).

// Using context for better performance
// Note that context is a DOM element, not jQuery
$('.mySelector', $('.myParent')[0]).live('click', function(event){
    // my faster click event
});

Unbinding events attached using .live() function

.unbind() function equivalent of .live() function is .die(). You can unbind ALL events attached using .live() function from an element by simply calling .die(). If you want to remove a specific event or a specific handler function of a specific event type, you can call .die('event', functionHandler).

// Remove ALL events attached using .live()
$('.mySelector').die();

// Remove myFunk() from click event
$('.mySelector').die('click', myFunk);

function myFunk(){
   alert("Clicked!");
}

If you have any questions or need any help, you can ask me on Facebook.

How to check loaded jQuery UI version?

In this post I will show how to check currently loaded jQuery UI version on the page. Unlike checking loaded jQuery version ( $().jquery ), checking jQuery UI version is a bit different.

Checking currently loaded jQuery UI version on the page:

// Returns jQuery UI version (ex: 1.8.2) or undefined
$.ui.version

// Alternatively
jQuery.ui.version

You would most probably use it in the if statement:

if($.ui && $.ui.version){
    // jQuery UI is loaded
}
You can also check if jQuery UI is loaded or not:
// Checking if jQuery UI is loaded or not
if($.ui){
    // jQuery UI is loaded
}else {
    // jQuery UI is not loaded
}

jQuery YouTube plugin demo

Long overdue demo for my jQuery YouTube plugin – jYouTube is now available here. The plugin can fetch and get you any YouTube video’s screenshot or thumbnail by its URL or video id.

Here is an example:

// Getting video screenshot by YouTube video ID
$.jYoutube('rSUfWXcNAOw');

// Returns video thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

By default the plugin will return URL of the video screenshot (480×360). If you just need a video thumbnail (120×90) pass an optional second parameter "small".

See the plugin in action on jQuery YouTube demo page.

I hope you will find the plugin useful.