Bubbling Library > Examples

Dispatcher (YAHOO.plugin.Dispatcher): Tutorials


Dynamic Navigation Theory: Dispatcher + Bubbling Core Object = Dynamic Website

See how the left menu loads the corresponding content in the central area of the page.

Dynamic Navigation Theory: Dispatcher + Bubbling Core Object = Dynamic Website (ADVANCED) - NEW

This is a more advanced example. Learn how to include external components that will be loaded onDemand in the main area of the page.

Dynamic Navigation Theory: Loading Mask + Dispatcher + Bubbling Core Object = Dynamic Website (WITH LOADING MASK) - NEW

The same example, but this time including a LOADING MASK to block user actions during the loading process.

TabView Example - Dynamically Loading Content - Emulating an IFrame within the tabs - NEW

Each tab controls the actions within its own area using Bubbling Core, and it loads the new content demand using dispatcher.

Dispatcher + YUI Panels: Loading the BODY using AJAX (content with script tags)

The Dispatcher controls the loading process using the YUI Connection Manager, and it will display the response within the Panel's Body, executing the remote and inline scripts.

Dispatcher Example - Dynamically loading content with script inside

This is an example of the DISPATCHER feature over two DIV tags. You can use the dispatcher to manage the content inside each DIV. This feature will guarantee the execution of the scripts (remote and inline "script" tags) during the URI request.

TabView and Dispatcher Example - Dynamically loading content with script inside

This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to manage the content inside the tab. This feature will guarantee the execution of the scripts (remote and inline "script" tags) during the dataSrc request.

TabView and Dispatcher Example - Dynamically loading content with child tabview inside

This is an example of the DISPATCHER feature over the YUI tabview component. You can use the dispatcher to manage the "child tabview" inside each tab.

TabView, Datatable and Dispatcher Example - Dynamically loading content with datatable inside

This is an example of the DISPATCHER feature over the YUI tabview component. You can use the dispatcher to manage the content inside the tab, and include another YUI component (YUI Datatable) during the dataSrc request.

TabView, Accordion and Dispatcher Example - Dynamically loading content with accordion inside

This is an example of the DISPATCHER feature over the YUI tabview component. You can use the dispatcher to manage the content inside the tab, and include another tabview with accordion layout.

TabView and Dispatcher Example - Autoloading process to refresh tab every 30 sec

This is an example of the DISPATCHER feature over the YUI tabview component. If the first tab is active then the content will be reloaded every 30 seconds otherwise don´t do nothing to prevent unnecessary traffic.

Dispatcher Plugin and YUI Browser History Manager

The dispatcher plugin includes a built-in integration with the YUI Browser History Manager. Which means that you can use the extension with the tabview, layout and a simple DIV as well, and the dispatcher controls the actions in all these areas using the YUI BHM.

How to pass parameters thru the dispatcher

In this example, you will see how to pass parameters in the initialization process, and then use these parameters in the different moments during the loading process.

How to avoid memory leaks

In this example, you can see how the first tab "Datatable Control" defines the rules to destroy the YUI Datatable before changing the content of the tab (which means that every time you click on the first tab, the dispatcher will destroy the DataTable control, releasing the memory and then will display the new content). Also, by default, the dispatcher will release all the listeners defined for a dynamic area before displaying the new content (YAHOO.util.Event.purgeElement).

Dynamic content with inline scripts

You can also use the dispatcher to execute inline JS code without using AJAX to load the content.

CSS Injection Example

Using the dispatcher plugin you will be able to inject CSS rules on demand in your application. The rules can be written in line or thru a remote file loaded thru AJAX using the YUI connection manager.

Dynamic content with remote scripts (FULLPATH)

Defining the path for the remote assets using the fullpath.

Dispatcher Example - Customizing the script inline execution

By default, dispatcher injects inline scripts using an script tag. If you want to pre-process the scripts and inject those scripts using eval or any other execution routine, you can re-define the evaluation routine ("evalRoutine") for a certain dynamic area.