Member Avatar for hg_fs2002

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
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

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 because: n/a
Member Avatar for hg_fs2002

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 because: n/a
Member Avatar for diafol

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

Edited by diafol because: n/a
Member Avatar for hg_fs2002 
<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>
Member Avatar for diafol 
<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)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.