Tuesday, March 10, 2009

jQuery hijack plugin - nice addition to jQuery UI 1.7

I have just published a jQuery plugin that I've used with great success on many of my last projects - jQuery hijack. What hijacking is and why is it of any importance?

The amazing world of widgets

When loading a widget on a page, say tab or dialog, we are often loading its content from another URL via AJAX. This is a common technique and nothing new - we may e.g. use jQuery.load() or jQuery.tabs() from Jquery UI to achieve this. Let's say we are loading a table containing a product list to a tab. In this table we have some columns so we can sort it by clicking on a column header and page the results by using the pager links we developed.

What happens when we click on any link used to e.g. sort or go to next page in our loaded content? It replaces the whole page. The same thing happens when we have e.g. a search form within our tab content and we submit it. Although completely understandable (and there are many ways to avoid it), it's not exactly the best behavior. What can help you - is hijacking. jQuery hijack plugin was designed exactly to come to your rescue.

Hijacking to the rescue

Hijacking or hijaxing is a term used by Chris Thatcher a long time ago in a jQuery UI thread, where he proposed a way of capturing all the links within a widget content and making them reload only that widget. And this is exactly the core functionality of jQuery hijack plugin.

By using the plugin, we can call a simple one function jQuery.hijack() and voila - from now on, all links and forms are hijacked - so paging links in the tab will simply display another page of results in this tab, search form will also display results inline - everything requires only one line of code (usually).

More info

The plugin works flawlessly with jQuery UI widgets, like tabs or dialogs, I also heavily used it with jqModal plugin. This 1KB plugin also allows you to:

  • skip hijacking some forms/links
  • use click() handlers for links to skip following them at all
  • skip submitting forms (validation)
  • always run a particular function after reloading content (e.g. to init some objects)

I've created a demonstration page for plugin features where you can see it in action with jQuery UI. You may download the plugin at its Google code page. The plugin is dual licensed under MIT/GPL licenses.


Mcweekly said...

any thoughts of adding "history" so that back button works?

Unknown said...

Personally I never needed it, but it looks as this history plugin could be nicely integrated with hijack. There are a few history-related plugins, but this one seems pretty active.

Alister Cameron said...

For me the success event never fires after I submit a form. I have the jquery form js file; as far as I can tell I have everything in order, but no go.

Can you suggest any ideas as to why this is happening?

The symptom I have at the moment is that I click SUBMIT on a form, and it saves, but the UI tab is meant to be updated with the response. Instead, the form just stays there and only when I refresh the whole page do I see that indeed the form was submitted properly (I see data has changed).

So I'm trying to work out what I need to do to get the returned HTML to appear, if indeed it appears at all.

It has me stumped!

I'd show you, but it's all behind an admin login. Sorry!


Unknown said...

The plugin itself uses success() handler from jquery.form plugin, so probably there is some conflict with your code if you're using it too. Can't tell much more without the code.

Updating the tab after submitting the form / clicking the link is the very thing the plugin was created for so if you could somehow provide me with a small test case or URL (narrow it down to the smallest failing code), please let me know.

Alister Cameron said...

Krzysztof, I worked it out. Funny really.

I was forcing a 302 redirect from my domain with a www to my domain without it. I had coded in a link that was going to the www version, and the forms plugin can't deal with a response that involves a 302 redirect.

Anyway, it's solved.



Mike said...

Thanks for this plugin. I am using Jquery UI Tabs and ASP.NET. I was having so many problems with viewstate not being correct after post. I then tried to have the tabs use frames, but that was causing even more headaches for some reason and hitting the database more than necessary. I put in your plugin, and within 5 minutes everything is working great. Thanks, I really appreciate it.

Jermaine Oneill said...

Individually I  required it, but it looks as that JQuery  plug-in could be perfectly corporated with hijack. There are a few JQuery -related plug-ins, but this one seems fairly effective.