Close
Loading, please wait...
This announcement will hide in 60 seconds
November 21, 2008 Categories  Layouts  Bubbling library official website in English... Sitio oficial en español de la librería bubbling...

Is there a way to fire an event when the content of a div changes?

2007-05-14
RSS Channel bookmark this link
Home   Knowledge Base 
To change the DIV's content you need an object to manage the DOM and the XHR connection (a script to management the DOM element), the Dispatcher extension can do this job for you.

Clic here to see an example

Loading the new content thru ajax:
  YAHOO.plugin.Dispatcher.fetch (
    'div_id_or_reference',
    'new_remote_content.html',
    {
      before: function () {},
     after: function () {}
   }
  );

Define the new content manually:
 YAHOO.plugin.Dispatcher.process (
   'div_id_or_reference',
    'new innerHTML content for the DIV in XHTML',
   {
      before: function () {},
      after: function () {}
    }
  );

Use the "before" and "after" functions to extend the dispatcher functionalities...

Note: keep in mind that the dispatcher will execute the scripts (if exists) just after the change of the content and before the method "after".

No Comment yet

YUI Plugin: Dispatcher - Overview

After several study days, I wrote this extension of YUI library, called 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. Read More
Navigation
 
More Information
 
New Examples

Accordions - These examples will show you how to create the correct HTML's markup and the CSS's rules to create expandable and collapsible areas.(hot)

Loading Mask - See how to use the "Loading Mask" in an overloaded webpage to avoid the quirks during the loading and displaying process.(hot)

- Other examples

 
Latest Releases

Accordion Manager
This YUI Widget will allow you to create expandable and collapsible areas using the correct HTML and CSS, but without writing a single line of javascript code. (new)

Loading Mask
The Loading Mask widget will hide all the page's content until the onLoad's event, which mean that the website will not be displayed until the current page be fully loaded. Also this widget can be used in conjunction with the YUI Connection Manager to block the actions over the page until the AJAX's request finish. (new)

 
Hot Components

Accordion Manager
Create expandable and collapsible areas using the correct HTML and CSS, but without writing a single line of javascript code. (released)

Bubbling Core
The bubbling core now include a generic communication mechanism for widget2widget, widget2browser and widget2server messages. (updated lately)

Tooltip Manager
Improved, now using the YUI Overlay instead YUI Tooltips, also introduce a new feature, "content onDemand" using the YUI connection manager. (updated lately)

 
Coming Soon

Bubbling Library for YUI 3.x
A new version of the Bubbling Library compatible with the NEW YUI 3.x. (comming soon)

 
Recommended Reading

Using the YUI TabView Control with the Dispatcher Plugin
YUI Dispatcher Plugin and how to use it along with the YUI TabView to load on-demand content using the YUI Connection Manager.

The Bubbling Technique & Custom Event, YUI’s Secret Weapon
In this article I’ll share my experiences in the event-driven programming within the web browser and show how the Bubbling Library, combined with YUI’s Custom Event capabilities, can create an unobtrusive behavioral layer suitable for powerful web applications.

Event-Driven Web Application Design
I recommend you to read carefully the Christian Heilmann's paper, where he wrote about how to plan an Event-Driven application, and how this technique will become the future of the web application as a result of an evolutive process.

A JavaScript Module Pattern
Eric Miraglia's detailed explanation of how to use the closures and specifically the module pattern (singlenton) as a flexible and multi-funcional structure...

 
Related Links

Yahoo! UI Library (YUI)
YUI Official Website at the Yahoo! Developer Network.

YUI Official Forum
Get help and share your knowledges thru the frenetic javascript mailing list at Yahoo! Developer Network...

Motionbox EventHandler
For those who use propotype instead YUI, here is an implementation of the bubbling core routine for Propotype, I never tested it, but it's seen like a good implementation.

 
 
Linux MySql Server PHP Mozilla FireFox FireBug YAHOO! Bubbling Library
This website is XHTML 1.0 valid! This website can be browsing with all browsers! This website is valid for Level A of Web Accessibility!