jQuery cookieJar bug fix

Bug Fix

Found a little bug in the cookieJar script I recently released.

If you try to create a second cookieJar it over writes the previous cookieJar object.

The fix returns a new instance to a cookieJar as was intended

Sorry about the bug

Downloads

jquery.cookiejar.js (6.54 KB)
jquery.cookiejar.pack.js (2.06 KB)
August 14, 2007 | Filed Under cookieJar, jQuery, javascript | Leave a Comment 

jQuery Tablesorter Cookie Widget

Introduction

I’ve recently been doing some work for a client who had links on each table header which reloaded the page and had php reorder the table contents. Very slow and added alot more work onto the server, not a good idea. I was certain that I had seen javascript based tablesorters some where, and didn’t want to write my own.

Enter tableSorter 1.x a great piece of work by Christian Bach which has the wonderful ability to convert any table with the help from jQuery, into a client side sortable table. I had just one problem with this, when the page was reloaded the table sorting was lost. Enter the even better almighty tablesorter 2.x with added widget support, and custom parsers wow this sound like it was for me, I just needed to make a cookie widget. So I did.

Requirements

Note: It’s worth noting that for this to work correctly each table will need it’s own id. When a table of the same id has the table sorter applied it will sort it in the same way it was previously.

Compatibility

So far the widget has been tested in windows using the following browsers.

The Script 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(function($) {
  $.tablesorter.addWidget({
    id: 'cookie',
    format: function(table) {
      var sortList = table.config.sortList;
      var tablesorterCookieJar = $.cookieJar('tablesorter');
      if ( sortList.length > 0) {
        tablesorterCookieJar.set($(table).attr('id'), sortList);
      } else {
        var sortList = tablesorterCookieJar.get($(table).attr('id'));
        if (sortList && sortList.length > 0) {
          jQuery(table).trigger('sorton', [sortList]);
        }
      }
    }
  });
})(jQuery);

Usage

When starting your tablesorter on a table, you just need to add one little bit to say hey use this widget.

1
2
3
4
5

jQuery(function($) {
  $('.tablesort').tablesorter({
    widgets: ['cookie']
  });
});

Explanation

It’s a very simple widget.

Here the widget is add to tablesorter plugin, using the addWidget method. Passing an object containing and id which is a string a nd a format method. The id is used later to specify that it’s this widget we want to use.

1
2

$.tablesorter.addWidget({
    id: 'cookie',

Here is the bulk of the widget, the format method. This method is called when ever the table gets formatted, this is triggered by the user changing the table sort order or when initialised. tablesorter calls the format method passing in a table object, which contains config data and the actual table data it’s self, this can be manipulated to reformat the table. tableSorterCookieJar gets an instance of the cookieJar object with the name tablesorter, this is to store the table id and sort order of the table.

3
4
5

    format: function(table) {
      var sortList = table.config.sortList;
      var tablesorterCookieJar = $.cookieJar('tablesorter');

If the sortList contains data this means the user triggered an event and the format method of the widget was called, we then simple store this information for later use, using the table id as a way of recognising the table from all rest.

6
7

      if ( sortList.length > 0) {
        tablesorterCookieJar.set($(table).attr('id'), sortList);

Else if the sortList is empty and doesn’t yet contain any sort data it means that the table is being initialised. At this point the widget tries to get the previously stored sort order from the cookieJar. If this was successful it triggers the sorton event which was bound to the table by tablesorter (very handy), it passes the sortList from the previously stored sort order, this sorts the table how it was sorted last time. If no data was found in the cookieJar nothing is done.

8
9
10
11
12
13

      } else {
        var sortList = tablesorterCookieJar.get($(table).attr('id'));
        if (sortList && sortList.length > 0) {
          jQuery(table).trigger('sorton', [sortList]);
        }
      }

I hope this breif tutorial to how the tablesorter plugin widgets work make sense and is of use.

Documentation

Pass the widget id “cookie” as parget of the widgets array when you initialise the tablesorter on a table (see usage example).

Downloads

Downloads

jquery.tablesorter.cookie.example.html
jquery.tablesorter.cookie.js (1.26 KB)
jquery.tablesorter.cookie.pack.js (1.27 KB)
August 13, 2007 | Filed Under jQuery, tablesorterCookieWidget | 10 Comments 

jQuery cookieJar

Dan G. Switzer, II wrote here pointing out there are some important things to be taken into consideration while using cookies and this plugin.
1) Cookies are sent with each request header.
2) The total Cookie size per domain is generally 4K (which is per the spec http://www.ietf.org/rfc/rfc2109.txt.) This is not a per Cookie limit, but a total name-value pair.

Introduction

I’m writing a tablesorter 2.0 plugin which I will release here shortly, along with tutorial. The plugin allows the sort order of the table to be stored in a cookie, which is then restored upon a table of the same id loading.

I had the need to store multiple values in a single cookie, it would be crazy to store each tables value in a separate cookie. So I started looking for a solution and couldn’t really find a easy one to use, and nothing for jQuery but cookie which can only store a single value in cookies. Ajaxian revealed that CookieJar: JSON Cookies by Lalit Patel existed a great idea of storing a JSON encoded object as the cookie value. It seems that this has already been implemented into Mootools. I suddenly felt the need to create a jQuery plugin.

Requirements

Compatibility

So far the plugin has been tested in windows using the following browsers.

Usage

Javascript - Simple set, get

1
2
3

var myCookieJar = $.cookieJar('myCookieJar');
myCookieJar.set('test1', 'hello world');
alert(myCookieJar.get('test1'));

Javascript - Chained set, get

1
2

$.cookieJar('myCookieJar').set('test1', 'hello world');
alert($.cookieJar('myCookieJar').get('test1'));

Javascript - Larger Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

jQuery(function($) {
    // load the cookieJar into an object
    var accessCookie = $.cookieJar('accessInfo');
 
    // get the name from the cookieJar
    var name = accessCookie.get('name');
 
    // check that the name is defined
    if (typeof name == 'undefined') {
        // name was undefined, prompt for a name
        var name = prompt('Your name please');
        // store the name in the cookieJar
        accessCookie.set('name', name);
    }
 
    // show the name from the cookieJar on in tag with
    // id access-name
    $('#access-name').text(accessCookie.get('name'));
 
    // get the accessLog from the cookieJar
    var accessLog = accessCookie.get('accessLog');
 
    // check the that accessLog is an Array object
    if (typeof accessLog != 'object' || accessLog.constructor != Array) {
        // accessLog wasn't an Array object, set it as an Arrray object
        var accessLog = [];
    }
 
    // add the current date as a string to the begining
    // of the accessLog Array
    accessLog.unshift(new Date().toString());
 
    // store the accessLog Array in the cookieJar
    accessCookie.set('accessLog', accessLog);
 
    // loop though all the elements in the Array object accessLog
    $.each(accessLog, function(index, value) {
        // append the value to the unordered list
        $('#access-log ul').append('<li>'+value+'</li>');
    });
 
    // show the cookieJar JSON encoded string
    $('#cookie-contents').text(accessCookie.toString());
});

Documentation

You’ll find most of the code documented.
But here is an outline of the methods.

cookieJar.construct(name, [object options) object
Not usually directly called, just use “var myCookieJar = jQuery.cookieJar(’name’, myOptions)”
options object
bool debug
To show debug logging, default false
bool cacheCookie
To not reload the cookie on each get, default true.
string cookiePrefix
Stops the name of cookieJars clashing with any other cookies, default ‘jqCookieJar_’
object cookie
Any options that you want to pass to the cookie plugin, default { path: ‘/’, expires: 365 }
cookieJar.set(string name, value) bool
Sets a value in the cookie jar using a name to identify it
cookieJar.get(string name) mixed
Gets a value from the cookie jar using a name to identify it
cookieJar.remove([string name]) bool
Removes a value from the cookie jar using a name to identify it No name will clear the cookie jar of all values
cookieJar.setFromObject(object object) bool
Uses the object as the set of values to store in the cookie jar
cookieJar.toObject() object
Returns the contents of the cookie jar as an object
cookieJar.toString() string
Returns the contents of the cookie jar as a JSON encoded string
cookieJar.destroy() bool
Removes the cookie containing the cookie jar from the server

Note: The cookieJar is loaded and cached upon construct. Once the cookie jar is loaded it doesn’t reread the cookie again. This can be disabled via the options see cacheCookie.

Downloads

jquery.cookiejar.example.html
jquery.cookiejar.js (6.54 KB)
jquery.cookiejar.pack.js (2.06 KB)
jquery.json.js
jquery.cookie.js
August 11, 2007 | Filed Under cookieJar, jQuery, javascript | 10 Comments