the world. according to koto

• deface it,
• steal user's form values
• redirect to form a phishing attack
• look at cookies
• try to send malware through a drive-by download attack
• and many more...

• track user's actions on a vulnerable website (clicks, form submits),
• track outside links,
• monitor pages content and report any interesting HTML elements (e.g. the secret credentials)

$('.cloned-input').removeClass('hasDatepicker').datepicker(); 

• new datepicker is not instantiated at all
• JS errors occur while instantiating new datepicker
• even if datepicker is cloned, it refers to the old field

Solution

$input = $('.cloned-input'); 
// remove still present related DOM objects
$input.siblings('.ui-datepicker-trigger,.ui-datepicker-apply').remove();
// remove datepicker object and detach events 
$input
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();

1. before cloning destroy the datepicker on the base input
2. clone(true)
3. recreate the datepicker on base input
4. use unbind() and recreate datepicker on cloned input

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.

Example 1

<input type="text" name="demo1" />

    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
             "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
            }
    };

    $('input[name=demo1]').optionTree(option_tree);

Example 2 - change event and configuration

<input type="hidden" name="demo2" />

    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
             "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
            }
    };

    var options = {empty_value: -1, choose: '...'};

    $('input[name=demo2]').optionTree(option_tree, options)
                          .change(function() { alert('Field ' + this.name  + ' = ' + this.value )});

Example 3 - preselected options

<input type="hidden" name="demo3" />

    var option_tree = {
       "Red": {"Default":100},
       "Blue": {"Variant 1": {"Default":100, "Another":101},
        "Variant 2": {"Default":100, "Another":102, "and another":103}
       }
    };

    var options = {preselect: {'demo3': 100}}; // value for default option (include field name)

    $('input[name=demo3]').optionTree(option_tree, options)
                          .change(function() { alert('Field ' + this.name  + ' = ' + this.value )});

More info