Prototype: Using Ajax.Updater to Update Browser’s DOM Element

Ajax has become popular since it allows web application to behave interactively like a desktop application. It allows asynchronous communication between client (browser) and server so web applications can retrieve data from server  in the background without interfering with the display and behavior of the existing page.

There are some javascript frameworks available over internet that help us to build web application easier using ajax like Prototype,  Jquery,  Dojo, etc.  For me, i prefer to use prototype because of  it’s functionality and easy to use. I’ve been using Prototype for over one year and feel comfort with it.

In ajax programming, we often use ajax to update parts within HTML page with the data retrived from server where in prototype i use Ajax.Request function to handle it.  But in some cases,  if  our ajax response data  contains other java script code,  and we want the script to work after the response, it won’t work.  It happens because the browser’s DOM is not updated with the newly retrieved script from ajax response. To overcome this problem, we can use Ajax.Updater function that’s a spesialization of Ajax.Request function.

The function:

new Ajax.Updater(container, url[, options])

where container is the HTML part to be updated and url is url to server side script.

Options:

Example:

var url = 'ajax.php';

var myAjax = new Ajax.Updater('datadiv', url, {
      method: 'get',
      evalScripts: true,

      onSuccess: function(transport) {},

      onFailure: function(transport) {
           alert('Transport error!');
       }
 });

by