Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Refresh Cpmfetch with AJAX  (Read 12253 times)

0 Members and 1 Guest are viewing this topic.

ericr23

  • Coppermine newbie
  • Offline Offline
  • Posts: 11
Refresh Cpmfetch with AJAX
« on: April 14, 2008, 02:56:36 pm »

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:

Code: [Select]
<div id=galsamp></div>
Anywhere on the page, insert:

Code: [Select]
<script type="text/javascript" src=ajax-galsamp.js" />
The file ajax-galsamp.js contains the function getGalsamp():

Code: [Select]
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:

Code: [Select]
<?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>
Logged

ericr23

  • Coppermine newbie
  • Offline Offline
  • Posts: 11
Re: Refresh Cpmfetch with AJAX
« Reply #1 on: April 14, 2008, 04:55:18 pm »

Ha -- some fine example. I didn't completely update the test page in making it live. It's fixed now:

http://www.wind-watch.org/
Logged

ericr23

  • Coppermine newbie
  • Offline Offline
  • Posts: 11
Re: Refresh Cpmfetch with AJAX
« Reply #2 on: April 14, 2008, 04:59:37 pm »

Also: one error -- sorry for the carelessness.

The div id on the page needs to be ajax-galsamp, which is what the javascript function shown is looking for, not galsamp:

Code: [Select]
<div id=ajax-galsamp></div>
Logged

vuud

  • Moderator
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1803
  • [cpmfetch.fistfullofcode.com]
    • Fist Full Of Code
Re: Refresh Cpmfetch with AJAX
« Reply #3 on: April 14, 2008, 05:27:28 pm »


Nicely done!

I did have a chance to really play with it - but thank you very much for posting this.

I am restarting development on the next version, so any feedback on what cpmfetch could provide to make things like this work better would be welcome.  I am considering working in a JSON return type.

Thanks again!
Logged
Please post for help to the forum... PM me only if you are sending security related items (passwords, security problems, etc).

cpmFetch - Images, RSS feeds from CPG from outside CPG
New release notification signup also. 
See http://cpmfetch.fistfullofco

ericr23

  • Coppermine newbie
  • Offline Offline
  • Posts: 11
Re: Refresh Cpmfetch with AJAX
« Reply #4 on: April 15, 2008, 01:43:34 am »

Thanks, Vuud!

I have one more amendment, folks. After this was working in the sidebar (an included php file), I moved it into the main body of the index page, and it no longer loaded the gallery sample until "refresh" was clicked. So I added the following to ajax-galsamp.js after the function definition to make sure it runs:

Code: [Select]
ajaxGetGalsamp();
Logged

Shane

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Posts: 76
  • Choose Again
    • The Philmont Forum
Re: Refresh Cpmfetch with AJAX
« Reply #5 on: November 09, 2008, 02:28:24 am »

Any way to make this auto-refresh every X seconds rather than include a "Refresh" link?
Logged

Nibbler

  • Guest
Re: Refresh Cpmfetch with AJAX
« Reply #6 on: November 09, 2008, 04:58:12 pm »

Code: [Select]
setInterval(getGalsamp, X * 1000);
Logged

Shane

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Posts: 76
  • Choose Again
    • The Philmont Forum
Re: Refresh Cpmfetch with AJAX
« Reply #7 on: November 10, 2008, 01:05:40 pm »

Thanks Nibbler.  I'll give it a try this evening.  Will post a link if I can get this to work correctly.
Logged
Pages: [1]   Go Up
 

Page created in 0.018 seconds with 21 queries.