One of the most requested functionalities for the developers that work with YUI Library is the dynamic execution of the Ajax's response content, principally when we utilized the TabView component. The incompatibilities of the browsers, cause that the execution of the code inserted in the pages using the innerHTML property is not a standard mechanism, neither if you try to use a reference to a remote script ( Ej. ). I decided to study in depth this subject.

After several study days, I made out in the light this extension of YUI library, that we will call Dispatcher. This singleton object will be created during the page load, and require only the "utilities" package of the YUI library, and will guarantee several important points:

• All of the contents that will be loaded thru the dispatcher will be executed even if the script are remote.
• All the script inside a content will be executed according to the order of apparition.
• All the contents will be included in the DOM's structure before beginning the execution. This means that you can references an element inside this structure.

The dispatcher is able to manipulate three difference type of execution, and several execution children at the same time, so the global object represented by "YAHOO.plugin.Dispatcher" can be utilized without no restriction of threads, achieving thus manipulating several dynamic areas in the same page. Below, you can see the three modes for this object:

• Request a remote URL, substitution on the DOM's elements (also aggregation for accumulative contents) and automatic execution.
• Processing a content that was provided by another script, in this case the dispatcher will do the substitution and execution process.
• Dynamic management of contents provided by an Tabview YUI object, so the dispatcher will pre-process the content before the substitution mechanism of the "Tab" object, and then start the execution of the scripts after the Tab object had concluded the operation, in this case the process is transparent for the "TabView" object.

The graphic below represents the UML activity diagram for the general process:

I will describe a couple of examples of how utilize the dispatcher. In the first example we point out an association of the dispatcher and a tabview object.

The dispatcher's general initialization and the tabview:

<link rel="stylesheet" type="text/css" href="../jscripts/yui/build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="../jscripts/yui/build/tabview/assets/border_tabs.css">
<script type="text/javascript" src="../jscripts/yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../jscripts/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../jscripts/yui/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="../jscripts/yui-cms/build/dispatcher/dispatcher.js"></script>

The only difference between a common tabview implementation and this one is the inclution of the dispatcher script ("/yui-cms/build/dispatcher/dispatcher.js"). This script create automatically the dispatcher singleton object through the namespace YAHOO.plugin.Dispatcher.

Next during the tab's initialization process you need to interconnect every tab of the tabview with the dispatcher object through one simple code line:

var tabView = new YAHOO.widget.TabView({id: 'demo'}); 
YAHOO.plugin.Dispatcher.delegate (new YAHOO.widget.Tab({ label: 'Inline Scripts', dataSrc: 'tabs/xhtml.with.inline.scripts.html', active: true }), tabView);
YAHOO.plugin.Dispatcher.delegate (new YAHOO.widget.Tab({ label: 'Remote Scripts', dataSrc: 'tabs/xhtml.with.remote.scripts.html', cacheData: true }), tabView);

The method "delegate" of the dispatcher will modifying the charging methods of every tab in order that the dispatcher may accomplish his work, the first parameter of this method is the new tab's object reference, and as a second parameter (optional) is the tabview object reference, and will be used by the dispatcher for adding the new tab to the tabview object, although that can be done manually.

Tthe dispatcher's general initialization:

It´s very similar to the previous example.

<script type="text/javascript" src="../jscripts/yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../jscripts/yui-cms/build/dispatcher/dispatcher.js"></script>

Unlike the previous example, where the object tab inside the tabview does the fetch process for every tab, in that case we can request the remote URL thru the dispatcher directly:

YAHOO.plugin.Dispatcher.fetch ( 'boxwithinlinescript', 'tabs/xhtml.with.inline.scripts.html' );
YAHOO.plugin.Dispatcher.fetch ( 'boxwithremotescript', 'tabs/xhtml.with.remote.scripts.html', {action: 'add'} ); 

This code guarantees that the dispatcher goes to accomplish all the process, beginning from the request, the contents' parsing, the scritp tags processing, inclusion of the contents without script inside the element reference, and finally, the execution of the scripts.