Hi,

I've got a recordlist.php page that outputs the found set of records as a table using a foreach function, pretty straightforward stuff which is working well. In one of the columns of the table I have a button that calls another update.php page which changes the value in one field from No to Yes (i.e. mark the record as "completed"). When the script has finished it returns the user to the previous page which reloads with the update details. This is all working well and generally happens pretty quickly but I would like to take it to the next level with AJAX and have it update the page dynamically without it having to reload/refresh the page.

I'm not sure if this can be done as I don't have any experience with AJAX at present and are looking for any tips, comments, sample code from anyone who has been down this road before. I know with AJAX you can load new content without loading the whol page but not sure if this will work with a found set of records in a table which is generated by the foreach function over the found set of records.

Many thanks in advance,

Steve

It's fairly easy to do once you understand how. This took a long time after getting many of my questions answered by others more skilled than I. Here is my ajax example. It is for seeing students grades for either first or second year of medical school.

First the form.

echo "n";

	echo "

Course Grades & Peer Feedback

"; echo ""; echo "Select a Year: "; echo "1"; echo "2 echo""; echo "

Courses

"; echo "

Your result will display here

"; echo""; echo""; echo"";

Now the javascript.

//we only do this once so we don't steal browser resources...

//this is an updated function that will check for newer versions also...

//move this to your header and anytime you need ajax just call it into a variable...

var ajax = function() {

    	var http;

    	try {

		http = new XMLHttpRequest;

        	ajax = function() {

          		return new XMLHttpRequest;

        	};

    	}

    	catch(e) {

		var msxml = [

			'MSXML2.XMLHTTP.3.0',

			'MSXML2.XMLHTTP',

			'Microsoft.XMLHTTP'

		];

		for (var i=0, len = msxml.length; i < len; ++i) {

			try {

				http = new ActiveXObject(msxml[i]);

				ajax = function() {

					return new ActiveXObject(msxml[i]);

				};

				break;

			}

			catch(e) {

				alert("Your browser does not support AJAX!");

			}

		}

    	}

    	return http;

};



//Browser Support Code

//Show Courses

function showCourses(el){

	var ajaxRequest = ajax();

	// Create a function that will receive data sent from the server

	ajaxRequest.onreadystatechange = function(){

		if(ajaxRequest.readyState == 4){

			var ajaxDisplay = document.getElementById('course_data');

			ajaxDisplay.innerHTML = ajaxRequest.responseText;

		}

	}

	var year = el.value;

	var SOMS_KEY = document.getElementById('SOMS_KEY').value;

	var queryString = "ajax.php?op=listcourses&SOMS_KEY=" + SOMS_KEY + "&year=" + year;

	ajaxRequest.open("GET", queryString, true);

	ajaxRequest.send(null);

}

Notice the getElementById('course_data')

is the same as the div tag in your form

One quick caveat about AJAX

Most browsers will always go to the cache for GET requests with the same parameters. So if your $queryString will always be the same but you expect different results (i.e. changes to the DB) you should either use POST or append a unique parameter like a time-stamp to the URL.