Jump to content

Ajax, Getting a variable back from the php?


sanfly

Recommended Posts

Today im writing my first AJAX script based on a tutorial I found at w3schools and some other javascript i managed to find.

Basically, it cycles through all the albums in a database, with a 5000ms delay between each album.

The ajax script counts up a number every time the script is executed.  On the php page that is executed, it uses that number to find the position of the next album in the array.  This part works great.

The problem is there is only a limited number of albums in the database.  When I reach the last one I want to cycle back to the beginning again, ie: reset that incrementing number in the ajax script.

Is there a way to send a javascript variable from the php page back to the ajax script?

My code is below, and you can see it in action [url=http://www.intergalacticrecords.com/slideshow_test.php]HERE[/url] (be warned though, I will be playing with the script while I wait for a reply...)

[u][b]my ajax/javascript page:[/b][/u]

[code=php:0]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Slideshow test</title>

<script language="JavaScript">
function ajaxFunction(theNumber){
// Checking the Browsers
  var xmlHttp;
  try{
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e){
    // Internet Explorer
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e){
      try{
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e){
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
// The actual function
    xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById('theText').innerHTML = xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","slideshow.php?album=" + theNumber ,true);
xmlHttp.send(null);
   
  }


function chgImg(theNumber){
theNext = theNumber + 1;
ajaxFunction(theNext);
//alert("in the function");
}

if(!theNext){
var theNext = 0;
}

delay = 5000; // time in ms
window.setInterval("chgImg(theNext)", delay);
</script>
</head>

<body>

<div id="theText">
<? include "db.php";
$r = mysql_query("SELECT label_id FROM label") or die(mysql_error());
$array = array();
while($row = mysql_fetch_array($r)){
$array[] = $row['label_id'];
}

$count = count($array);

$label_id = $array[0];

$r = mysql_query("SELECT * FROM label WHERE label_id = '$label_id'") or die(mysql_error());
$row = mysql_fetch_array($r);
$label_cover = $row['label_cover']; ?>
<img src="images/covers/<?=$label_cover?>"> (count = <?=$count?>, album = <?=$album?>)
</div>

</body>
</html>
[/code]

[u][b]my php page (slideshow.php)[/b][/u]

[code=php:0]<?
$album = $_GET['album'];

include "db.php";
$r = mysql_query("SELECT label_id FROM label") or die(mysql_error());
$array = array();
while($row = mysql_fetch_array($r)){
$array[] = $row['label_id'];
}

$count = count($array);

$label_id = $array[$album];

$r = mysql_query("SELECT * FROM label WHERE label_id = '$label_id'") or die(mysql_error());
$row = mysql_fetch_array($r);
$label_cover = $row['label_cover']; ?>
<img src="images/covers/<?=$label_cover?>"> (count = <?=$count?>, album = <?=$album?>)[/code]
Link to comment
Share on other sites

Ive found another (and im sure so easy i should have thought of it earlier) way of doing this.  I just use php to count the total number of albums in the database, and use that to make the javascript variable

[code=php:0]<? include "db.php";
$r = mysql_query("SELECT label_id FROM label") or die(mysql_error());
$num=mysql_num_rows($r);
$num = $num - 1;
?>
var numLabel = <?=$num?>;[/code]

I would still like to know if there is an answer to my original question though...
Link to comment
Share on other sites

here is an idea:
The data response from php is not just a plain text, in fact, it is a javascript code:

var nextAlbum = 10;
var htmlText = "<a href=\"link\">whatever here</a>";

upon receiving the response text, you will eval the response text:
eval(xmlHttp.responseText);
document.getElementById('theText').innerHTML =  htmlText;
and now you can actually use the 'nextAlbum' variable.

The thing is that your response text have to be javascript syntax correct.  It is not really hard to do.


Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.