Products
Services
Contact Us

Scripts: Javascript :: AJAX functions :: Library Article #17

Developer's Section

Update webpages using AJAX
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2009)
Favorites:

Learn to update webpages dynamically using AJAX.

In the following example we will learn how to use an ajax.updater object to update the content of a div with the content of a page from your server. In this case the updatable div will be loaded with the contents of a random PHP page ( a.php ). The updatable div will then change table colors and show an update id number when you click update.

Ajax Update Example:

DYNAMIC CONTENT FROM:
-AJAX UPDATER
-UPDATE #:


To accomplish this you will need to download the prototype.js and scriptaculous.js libraries. (These libraries allow us to create the ajax.updater object). See at the end of this tutorial for downloads.

Now, let's take a look at the code:

 Code Snippet 1

<!-- include ajax libraries -->
<script type="text/javascript" 
src="http://www.yoursite.com/yourscripts/prototype.js"></script>
<script type="text/javascript" 
src="http://www.yoursite.com/yourscripts/scriptaculous.js"></script>

<script type="text/javascript"> 

function submitForm() 

    showAjaxImage() //show ajax busy icon
    
    //create the ajax updater object 

    new Ajax.Updater('updatable_content','yourscripts/a.php',{   
    onSuccess: function(){  
    var mySpan = document.getElementById("ajaxIndicator"); 
    mySpan.innerHTML = "" 
    }, 
    onFailure : function(){  
    alert("Something went wrong..."); 
    } 
    });     


function showAjaxImage() {
   var mySpan = document.getElementById("ajaxIndicator"); 
    mySpan.innerHTML = "<img src=\"" + 
    "17/images/ajax_busy.gif" + 
    "\" border=0>";                     
}

</script>

<p><input type="button" id="updatable_bttn" value="Update" 
onClick="submitForm();"> 
<span id="ajaxIndicator"></span>
</p>

<!-- this is the updatable div -->
<div id="updatable_content">
<table border=0 width="230">
<tr><td id="thisTd" bgcolor="#FFFFCC">
<font size="2"><strong>DYNAMIC CONTENT FROM:<br>
-AJAX UPDATER<br>
-UPDATE #: 
</strong></font>
</td></tr>
</table>
</div>
<!-- end of updatable div -->



Downloads
prototype.js121.1 KB
scriptaculous.js2.6 KB
a.php0.7 KB
ajax_busy.gif0.8 KB
 

See other Scripts in AJAX functions

 

Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]