Ajax Slider - I can't Get Multiple ones To Work!!! Help

BrazilMac · August 29, 2008

Hi,

I have implemented the following ajax slider in my site:

http://roshanbh.com.np/2008/01/slider-using-php-ajax-and-javascript.html

I have actually changed the php to reflect my database setup and it works fine updating the filed I want on the database when the slider is moved. The problem is I can not get multiple sliders to update the proper fields. I know Im doing something wrong, but I just dont know how to implement when looping through more than one record on my table.

So, here is my current code:

index.php - Where the slider resides

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Roshan's Script for Slider Using PHP,Ajax And Javascript</title>
<script src="slider.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function setSliderVal(value)
{
xmlHttp=getXMLHTTP();
if (xmlHttp==null)
	 {
	 	alert ("Your browser does not support AJAX!");
		return;
	 }

xmlHttp.onreadystatechange=function() 
{
  if (req.readyState == 4) { // only if "OK"
	if (req.status == 200) {						
		//dont do any thing here we just need to save the valued in the database				
	} else {
		alert("There was a problem while using XMLHTTP:\n" + req.statusText);
			}
	}				
}
var slideID = document.getElementById('auction_id').value;
var queryString = "?sliderval=" + value.substring(0,value.length-2) + "&auctionID=" + slideID; //stripping last two letter which is px 

xmlHttp.open("GET","AJAX4Slider.php"+ queryString,true);
xmlHttp.send(null);

}

function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	{		
		try{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try{
			req = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1){
				xmlhttp=false;
			}
		}
	}

	return xmlhttp;
}

</script>
<link href="slider.css" rel="stylesheet" type="text/css" />
</head>

<body>
<?php
################For database connection####################
    include("connect.inc.php");


$con = mysql_connect(DB_HOST ,DB_USER, DB_PASS);
     mysql_select_db(DB_NAME, $con);

$query="SELECT * FROM  auctions_table";
$result=mysql_query($query);


while ($row=mysql_fetch_array($result)) {
?>
<DIV class=carpe_slider_group>
                <DIV class=carpe_horizontal_slider_display_combo>
                  <DIV class=carpe_slider_display_holder>
                    <!-- Default value: 0 -->
                    <input name="Input" class=carpe_slider_display id="display<?=$row['auction_ID']?>" value="<?=$row['cs_ctr']?>" />
                    <input id="auction_id" type="hidden" value="<?=$row['auction_ID']?>" />
                  </DIV>
                  <DIV class=carpe_horizontal_slider_track>
                    <DIV class=carpe_slider_slit></DIV>
                    <DIV class=carpe_slider id=<?=$row['auction_ID']?> display="display<?=$row['auction_ID']?>" style="left:<?=$row['cs_ctr']?>px"></DIV>
                  </DIV>
                </DIV>
                <DIV class=carpe_horizontal_slider_display_combo></DIV>
                <DIV class=carpe_horizontal_slider_display_combo></DIV>
                <DIV class=carpe_horizontal_slider_display_combo></DIV>
              </DIV>
              
              <? } ?>
</body>


</html>

And here is AJAX4Slider.php:

<? 
$sliderval = $_GET['sliderval'];
$auctionid = $_GET['auctionID'];
    
include("connect.inc.php");


$con = mysql_connect(DB_HOST ,DB_USER, DB_PASS);
mysql_select_db(DB_NAME, $con);
$query="UPDATE auctions_table SET cs_ctr='$sliderval' WHERE auction_ID='" . $auctionid . "'";

if(mysql_error()){
        echo mysql_error(); 
      }
$result=mysql_query($query);


?>

Since Im testing, I have only 2 records on the table; when php does the loop, it actually generates 2 sliders, but moving the second one does not do anything to update its cs_ctr field. I setup an alert to see what the

xmlHttp.open("GET","AJAX4Slider.php"+ queryString,true);

was outputting and it is sending the sliderval and auctionID value for the first record when moving the second slider.

If you need to look at the source slider.js,

http://www.roshanbh.com.np/slider/slider.js

I changed line 164

setSliderVal(document.getElementById('slider1').style.left);

to

var slideID = document.getElementById('auction_id').value;
setSliderVal(document.getElementById(slideID).style.left)

to see if I could somehow make it work by trying to get the value from the hidden input generated when php loops, but I simply cant get it working with multiple records. Again, I can update if I use only one sliders, it works fine.

Could anyone help me get this implemented with mutiple records????

Thanks again!!!!

rhodesa · August 29, 2008

i've never use the package you are using before, but here is another slider that may work for you: http://extjs.com/deploy/dev/examples/slider/slider.html

Ken2k7 · August 30, 2008

Here's my thoughts:

In that slider.js, you only have (as you posted):

setSliderVal(document.getElementById('slider1').style.left);

It only gets the element with ID "slider1", which I'm guessing is the first slider.

Sign In

Ajax Slider - I can't Get Multiple ones To Work!!! Help

Recommended Posts

BrazilMac

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Ken2k7

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information