0

I'm developing a website and I want to change the image of a page when NEXT button is clicked. I retrieve the images from my database and of course I do not want to retrieve repetitive images.
This is my NEXT button:

<input type="submit" value="Next" onclick="synchronousAJAX()" style="position: absolute; left: 1085px; top: 521px; WIDTH: 100px; font-size: 24pt; background-color: #CCCCCC;"/>

I use synchronousAJAX() function to count the numbers the NEXT button is clicked and send it to my PHP:

counter=0;
function synchronousAJAX(){
counter++;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","show.php?no="+counter,false);
xmlhttp.send(null);
if(xmlhttp.readyState ==4 && xmlhttp.status == 200){
document.getElementById("repeat").innerHTML =xmlhttp.responseText;
}
else{
window.alert("Error: "+ xmlhttp.statusText);
}
}

Then, in my PHP page I connect to my database and retrieve the nth row of my database in which n is the number NEXT button is clicked.After I retrive the image I redirect the page to the page that my next button is located and echo the image. I do it as many times as I have image in my database.

<?php 
 $n = $_GET['no'];

$db = mysql_connect("127.0.0.1", "root", "") or die(mysql_error());
mysql_select_db("fyp", $db) or die(mysql_error()); 
	  
 if ($n=="1")
 {
 $data = mysql_query("SELECT * FROM items limit 0,1 ") or die(mysql_error());  //Puts it into an array 
  if($info = mysql_fetch_array( $data )) 
 { 
        
         session_start();
         $_SESSION["Photo1"] = $info['Pic'];
         $_SESSION["Name1"] = $info['Name'] ;
	header("location:pasge.php");
 }
 }
else if ($n=="2")
 {
 $data = mysql_query("SELECT * FROM items limit 1,1 ") or die(mysql_error());  
  if($info = mysql_fetch_array( $data )) 
 { 
        
         session_start();
	$_SESSION["Photo1"] = $info['Pic'];
	$_SESSION["Name1"] = $info['Name'] ;
	header("location:pasge.php");
 
 }
 }
?>
<span> <?php if(isset($_SESSION["Photo1"])) Echo "<img src=img/".$_SESSION["Photo1"] ."> <br>"; ?> </span>

But it seems that my counter does not work properly. Is there anyone who could help me with the issue? I am also open to other new ideas. Thank you in advance.

2
Contributors
5
Replies
8
Views
5 Years
Discussion Span
Last Post by diafol
0

Can't you just do a one retrieve (all pics with names) on page load and shove them into a js array (e.g. json). Now you just use regular js to get a random pic/name - no need for ajax/server involvement.

Here's a quick draft. It's not good, but will give you an idea of what I'm talking about:

<?php
$foo = array(
	array('pic'=>'pic1.png','name'=>'My first name'),
	array('pic'=>'pic2.png','name'=>'My 2nd name'),
	array('pic'=>'pic3.png','name'=>'My 3rd name'),
);
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
var json = <?php echo json_encode($foo); ?>;
var currPic = 0;
var maxPic = json.length;
function doPic(){
	if(currPic == maxPic)currPic=0;
	document.getElementById('img').src = json[currPic].pic;
	document.getElementById('name').innerHTML = json[currPic].name;
	currPic++;
}</script>
</head>
<body>
<button id="next" onclick="doPic();">Next</button>
<img src="pic4.png" id="img" />
<p id="name">This is the default pic</p>
</body>
</html>

The $foo array can be built from a simple DB loop:

while($info = mysql_fetch_array($result)){
   $foo[] = array('pic'=>$info['Pic'],'name'=>$info['Name']);
}

The js is really quite horrible, so it could to with a tidy up. Or if you use jQuery, a couple of simple lines and hey presto, job done.

Edited by diafol: n/a

0

Thank you. I have done so but I have a problem. When I click NEXT, for seconds (during function call) my image changes but when function call is finished, my default picture is shown again instead of the new image. In other words, my new image replaces the default for just few seconds.

Edited by hg_fs2002: n/a

0

Show your code. It sounds like the button may be submitting a form.

Edited by diafol: n/a

0
<script>
var json = <?php echo json_encode($foo); ?>;
var currPic = 0;
var maxPic = json.length;
function doPic(){	
if(currPic == maxPic)   currPic=0;	
document.getElementById('img').src = "img/"+json[currPic].pic;
window.alert (currPic);
document.getElementById('name').innerHTML = json[currPic].name;	
currPic++;
}
 </script>

<html>
<body>
</form>
<form method="get" >
<button id="next" onclick="doPic();">Next</button>
<img src="" id="img" />
<p id="name">This is the default pic</p>
</form>
</body>
</html>
0
<html>
<body>
<button id="next" onclick="doPic();">Next</button>
<img src="" id="img" />
<p id="name">This is the default pic</p>
</body>
</html>

try that. either that or write some js to stop form submit on button click (prevent default action)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.