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

Home » Featured Articles » 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:

Options	Default	Description
evalScripts	false	This determines whether <script> elements in the response text are evaluated or not.By default, Element.update is used, which replaces the whole contents of the container with the response text
insertion	None	As of Prototype 1.6.0, this notation is deprecated. Simply pass either 'top', 'bottom', 'before' or 'after' as a string instead

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!');
       }
 });

Related post:

• How to Crop Image Using JavaScript and PHP (22)
• How to Overlay Video Using JQuery Tools and Flowplayer (8)
• How to Use Flowplayer as Your Web Video Player (Beginner’s Guide) (14)
• How to Create Scrollable Image Slider Using JavaScript (17)
• Free JavaScript Calendar Using Dynarch Calendar (2)