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

Developer's Section

Update webpages using AJAX
By: Erobo Team Member
Rating: 
Average Votes: (196)
Rate It:   
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 ]
  

 


© 2005-2010 Erobo Software, Inc. All Rights Reserved. | Read Privacy Notice | RSS