Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

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

0 Members and 1 Guest are viewing this topic.

ericr23

  • Coppermine newbie
  • Offline Offline
  • Posts: 16
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: 16
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: 16
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: 16
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.021 seconds with 20 queries.