Results 1 to 6 of 6

Thread: Step Carousel refusing to move after loading AJAX data

  1. #1
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel refusing to move after loading AJAX data

    1) Script Title: Step Carousel Viewer 1.9

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

    3) Describe problem:

    I have integrated a step carousel so that when a drop down box is changed, a javascript is run that passes data to a php file, which generates an html file for use within the carousel, which then updates. As confusing as that sounds i'll provide code shortly.

    My problem is that once this data is loaded, the carousel refuses to move. The left and right buttons are clickable and indeed grey out when they deem themselves to have reached the end of the list, but the carousel itself doesn't move. I've found this a great versatile script thus far and would like to continue using it so some help would be great!!

    Here's my code for reference:

    index.php -
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    		<script type="text/javascript" src="stepcarousel.js"> /* Carousel Script Link With Legal Crap */ 
    
    			/***********************************************
    			* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    			* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    			* This notice must stay intact for legal use
    			***********************************************/
    
    		</script>
    
    		<script type="text/javascript"> /* Carousel Settings Script */
    
    			stepcarousel.setup(
    				{
    					galleryid: 'conveyor', //id of carousel DIV
    					beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    					panelclass: 'panel', //class of panel DIVs each holding content
    					autostep: {enable:false},
    					panelbehavior: {speed:300, wraparound:false, wrapbehavior:'pushpull', persist:false},
    					defaultbuttons: {enable: true, moveby: 1, leftnav: ['./images/conveyorback.gif', 0, 155], rightnav: ['./images/conveyorforward.gif', -50, 155]},
    					contenttype: ['ajax','conveyordata.html'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    				}
    			)
    
    		</script>
    		
    		<script type="text/javascript">
    			function jsupdateproducts()
    			{
    				xmlhttp=new XMLHttpRequest();
    				
    				var catvalue = document.filterform.categoryselect.selectedIndex;
    				var cat = document.filterform.categoryselect.options[catvalue].text;
    				
    				xmlhttp.open("GET","updateproducts.php?cat="+cat,true);
    				xmlhttp.send();
    				
    				xmlhttp.onreadystatechange = function() 
    				{
    					if (xmlhttp.readyState==4 && xmlhttp.status==200)
    					{
    						stepcarousel.loadcontent('conveyor', 'conveyordata.html')
    					}
    				}	
    			}
    		</script>
    	
    	</head>
    	
    	<body onload="jsupdateproducts()">
    	
    		<?php
    			
    			//CONNECT TO SERVER
    			$con = mysql_connect ('localhost', '*****', '*****');
    			if (!$con)
    			{
    				die('Could not connect to products database - ' . mysql_error());
    			}
    					
    			//SELECT DATABASE
    			$select = mysql_select_db('mattbyrn_LMCProd', $con);
    			
    		?>
    	
    		<form name="filterform" action="./index.php" onchange="jsupdateproducts()">
    			<table id="filtertable">
    				<tr>
    					<td>
    						<select name="categoryselect">
    							
    							<option value="All" selected="selected">All</option>
    							
    							<?php
    								$query = mysql_query("SELECT DISTINCT category FROM Product");
    								if(!$query)
    								{
    									die('Could not get category list - ' . mysql_error());
    								}
    								else
    								{
    									while($row = mysql_fetch_array($query))
    									{
    										echo("<option value=\"".$row['category']."\">".$row['category']."</option>");
    									}
    								}
    							?>
    							
    						</select>
    					</td>
    				</tr>
    			</table>
    		</form>
    		
    		<div id="conveyor" class="stepcarousel">
    			<div class="belt">
    				<!-- Javascript generated panels go here -->
    			</div>
    		</div>
    		
    	</body>
    </html>
    updateproducts.php -
    Code:
    <?php
    
    	$cat = $_REQUEST['cat'];
    	$file = "conveyordata.html";
    	
    	print($cat);
    		 
    	//CONNECT TO SERVER
    	$con = mysql_connect ('localhost', '******', '******');
    	if (!$con)
    	{
    		die('Could not connect to products database - ' . mysql_error());
    	}
    					
    	//SELECT DATABASE
    	$select = mysql_select_db('mattbyrn_LMCProd', $con);
    	
    	if($cat=="All")
    	{
    		$query = mysql_query("SELECT * FROM Product");
    	}
    	else
    	{
    		$query = mysql_query("SELECT * FROM Product WHERE category = '".$cat."'");
    	}
    	
    	if(!$query)
    	{
    		die('Could not get product list - ' . mysql_error());
    	}
    	else
    	{
    		$fh = fopen($file, 'w') or die("can't open file");
    		while($row = mysql_fetch_array($query))
    		{
    			fwrite($fh, "<div class=\"panel\">");
    			fwrite($fh, $row['manufacturer']);
    			fwrite($fh, "<br />");
    			fwrite($fh, $row['name']);
    			fwrite($fh, "<br />");
    			fwrite($fh, "$".$row['price']);
    			fwrite($fh, "</div>");
    		}
    		fclose($fh);
    	}			
    
    ?>
    It's really confusing me, and I feel it's probably something really simple and stupid that i'm missing. Thanks in advance!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It all looks plausible, especially since you say the content arrives. What I think we need to see is the generated source code of index.php after the content has arrived.

    The generated source code is the innerHTML property of the page after it has been altered by the script. It will show whether or not the markup generated is valid for the purpose you intend.

    In Firefox you can get that with its developer extension (an add on) > view source > view generated source.

    But any browser can be made to do this by pasting the below into the address bar:

    Code:
    javascript:void(document.write((document.body.innerHTML).replace(/</gm, '&lt;')),document.close())
    and hitting ENTER. You may then use select all and copy to import (paste) it to your favorite text only editor to get a better look at it.

    Hitting the browser's back button will restore the page.

    It would also be helpful to navigate directly to conveyordata.html after index.php has loaded to see what's in its normal 'view source' or 'source' from any browser's view menu.

    But if you want me to have a look at it, it would be easier if I just had a link to the page:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 10-24-2010 at 03:35 PM. Reason: minor code refinement on the one-liner
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply! I had looked at the generated source and it all looked ok to me but perhaps i'm missing something. Here it is :

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    	
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    		<link rel="stylesheet" type="text/css" href="LMC.css">
    		<title>LMC Guitars - Shop</title>
    
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    		<script type="text/javascript" src="stepcarousel.js"> /* Carousel Script Link With Legal Crap */ 
    
    			/***********************************************
    			* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    			* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    			* This notice must stay intact for legal use
    			***********************************************/
    
    		</script>
    
    		<script type="text/javascript"> /* Carousel Settings Script */
    
    			stepcarousel.setup(
    				{
    					galleryid: 'conveyor', //id of carousel DIV
    					beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    					panelclass: 'panel', //class of panel DIVs each holding content
    					autostep: {enable:false},
    					panelbehavior: {speed:300, wraparound:false, wrapbehavior:'pushpull', persist:false},
    					defaultbuttons: {enable: true, moveby: 1, leftnav: ['./images/conveyorback.gif', 0, 155], rightnav: ['./images/conveyorforward.gif', -50, 155]},
    					contenttype: ['ajax','conveyordata.html'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    				}
    			)
    
    		</script><style type="text/css">
    #conveyor{overflow: hidden;}
    </style>
    		
    		<script type="text/javascript"> /* jsupdateproducts */
    			function jsupdateproducts()
    			{
    				xmlhttp=new XMLHttpRequest();
    				
    				var catvalue = document.filterform.categoryselect.selectedIndex;
    				var cat = document.filterform.categoryselect.options[catvalue].text;
    				
    				xmlhttp.open("GET","updateproducts.php?cat="+cat,true);
    				xmlhttp.send();
    				
    				xmlhttp.onreadystatechange = function() 
    				{
    					if (xmlhttp.readyState==4 && xmlhttp.status==200)
    					{
    						stepcarousel.loadcontent('conveyor', 'conveyordata.html')
    					}
    				}	
    			}
    		</script>
    	
    	</head><body onload="jsupdateproducts()">
    	
    			
    		<form name="filterform" action="./index.php">
    			<table id="filtertable">
    				<tbody><tr>
    					<td>
    
    						<select onchange="jsupdateproducts()" name="categoryselect">
    							
    							<option value="All" selected="selected">All</option>
    							
    							<option value="Accessories">Accessories</option><option value="Acoustic Guitars">Acoustic Guitars</option><option value="Amps">Amps</option><option value="Combos">Combos</option><option value="Electric Guitars">Electric Guitars</option><option value="Pedals">Pedals</option>							
    						</select>
    					</td>
    					<td>
    
    						<input name="stockcheckbox" value="stockcheckbox" type="checkbox"> In Stock Only
    					</td>
    				</tr>
    			</tbody></table>
    		</form>
    		
    		<div id="conveyor" class="stepcarousel">
    			<div style="width: 3660px; left: -305px;" class="belt"><div style="float: none; position: absolute; left: 0px;" class="panel">Fender<br>st57 RI JAP<br>$2999.99</div><div style="float: none; position: absolute; left: 305px;" class="panel">Scott Burgess<br>Custom Aeyro<br>$2999.99</div><div style="float: none; position: absolute; left: 610px;" class="panel">Marshall<br>MG50DFX<br>$450.00</div><div style="float: none; position: absolute; left: 915px;" class="panel">Planet Waves<br>Shielded 10m Lead<br>$30.00</div><div style="float: none; position: absolute; left: 1220px;" class="panel">Dunlop<br>H3 Pick<br>$1.00</div><div style="float: none; position: absolute; left: 1525px;" class="panel">Dunlop<br>Stuby 3.0mm Pick<br>$1.00</div><div style="float: none; position: absolute; left: 1830px;" class="panel">Martinez<br>Old get me a new one but its been set up pretty good with nice strings<br>$199.00</div><div style="float: none; position: absolute; left: 2135px;" class="panel">Valencia<br>25yrOldAcGtr-y<br>$99.00</div><div style="float: none; position: absolute; left: 2440px;" class="panel">Starts with K<br>Acc/Elec Capo<br>$35.00</div><div style="float: none; position: absolute; left: 2745px;" class="panel">Ashton<br>Starter Amp 10w<br>$50.00</div><div style="float: none; position: absolute; left: 3050px;" class="panel">Combo:Fender/Marshall/Planet Waves<br>ComboTestName<br>$999.00</div><div style="float: none; position: absolute; left: 3355px;" class="panel">BOSS<br>ME50<br>$439.00</div></div>
    
    		</div>
    		
    	<img title="Back 1 panels" style="z-index: 50; position: absolute; left: 0px; top: 386px; cursor: pointer; opacity: 1;" src="./images/conveyorback.gif"><img title="Forward 1 panels" style="z-index: 50; position: absolute; left: 1870px; top: 386px; cursor: pointer; opacity: 1;" src="./images/conveyorforward.gif"></body></html>
    One problem i've noted that causes problems in Firefox 4.0 and not 3.6 is the fact that I need to switch to POST, because GET is returning cached data alot. That's expected behaviour though as far as I know and shouldn't be affecting this?

  4. #4
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Bump with site link : http://www.mattbyrne.net/testbuilds/LMC/

    Full of test crap, and like I said it's not updating properly as it's using GET at the moment so take that part with a grain of salt, but it's loading from AJAX from the very beginning so should be able to give you an idea of the problem.

    EDIT: Switched it over to POST now so that's no longer a problem. Carousel still refusing to rotate however.
    Last edited by Tazzeh; 10-26-2010 at 02:24 AM.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I can't easily test the AJAX side of things. But I would be inclined to use jQuery methods for them, more cross browser. And may as well update to the most current stable version of jQuery, 1.4.2. None of that appears to be a major issue, at least not for the latest versions of browsers. Older IE (6 and less) will and IE (7+) in local mode might take issue with the ad hoc AJAX code.

    Anyways, the main problem appears to be style. In the LMC.css file, last entry:

    Code:
    #belt{
    	position: absolute;
    }
    See the red # symbol which indicates this is an id selector? It should be a dot css selector:

    Code:
    .belt{
    	position: absolute;
    }
    There could be other problems, but that should get 'er working.

    One other thing with the style though. Opera and some others might require the 0 top and left there so that jQuery has something to work with:

    Code:
    .belt{
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    Last edited by jscheuer1; 10-26-2010 at 01:29 PM. Reason: One other thing . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thankyou for noticing that! In the code I had saved and been uploading that css was indeed a dot identifier, for some reason no matter how many times I uploaded it, the php file wouldn't see the updated one until I actively navigated to the .css file and refreshed it.

    I have absolutely no idea why this is but your spotting fixed it for me! Thanks alot!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •