• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Java Script >> Prototype: Using Ajax.Updater to Update Browser’s DOM Element

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

November 24, 2009 by Lorensius Londa 6 Comments

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

Related posts:

  1. How to Overlay Video Using JQuery Tools and Flowplayer
  2. How to Crop Image Using JavaScript and PHP
  3. How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)
  4. How to Create Android Update Zip Package

Filed Under: Featured Articles, Information Technology, Java Script, Programming Tagged With: ajax, ajax.updater, browser dom update, DOM, dom update after ajax request, javascript, prototype, update dom

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in