Seven months ago, I asked about how to refresh the samples on page without reloading the whole page. This weekend I learned the rudiments of AJAX, asynchronous javascript and XML, and therein found a solution. Here it is.
On the page where the gallery appears, remove the gallery code and replace it with an empty div:
<div id=galsamp></div>
Anywhere on the page, insert:
<script type="text/javascript" src=ajax-galsamp.js" />
The file ajax-galsamp.js contains the function getGalsamp():
function getGalsamp() {
var xmlHttpGalsamp=null;
try {
xmlHttpGalsamp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttpGalsamp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttpGalsamp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlHttpGalsamp.onreadystatechange = function() {
if (xmlHttpGalsamp.readyState == 4)
try {
if (xmlHttpGalsamp.status == 200) {
document.getElementById("ajax-galsamp").innerHTML
= xmlHttpGalsamp.responseText;
}
} catch (e) {
document.getElementById("ajax-galsamp").innerHTML
= "Error on Ajax return call : " + e.description;
}
}
xmlHttpGalsamp.open("get","galsamp.php");
xmlHttpGalsamp.send(null);
}
This function runs galsamp.php, which contains the gallery code, and inserts the result into the galsamp div:
<?php include_once("./pix/cpmfetch/cpmfetch.php");
$objCpm = "";
$objCpm = new cpm("./pix/cpmfetch/cpmfetch_config.php");
$objCpm->cpm_viewRandomMedia(5,1);
?>
Finally, for the ability to refresh the gallery sample, add the Refresh command to your page:
<a href="javascript:getGalsamp()">Refresh</a>
See it in action at
http://www.wind-watch.org/Note: the content of ajax-galsamp.js does not have to be in a separate file. It can be included on the page between <script type="text/javascript"> and </script>