Why doesn't this code work correctly?
I'm working on a website that displays galleries, using jCarousel. But no matter what I try, I can't get it to work, and I need to finish this by today. I have a very urgent schedule. My code basically takes image URLs from a database and sends them to AJAX, which passes it to jCarousel which makes the gallery. But there are a few problems:

1. It doesn't display correctly! I can only get the last item pulled from the database, and it displays on the bottom-most row.

2. After the item pulled from the database is displayed, the first time I click on "prev" there's no scroll effect, and the item just disappears! Only if I click on "next" 2-3 times there's a scroll effect and the item remains visible.

3. My items are always displayed at the end of the carousel!

This is urgent.. Please help me fix this.

about.html:

    <!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" xml:lang="en-us">
    
    <head>
    
    	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    	<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
    	
    	<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
    	
    	<!--<style type="text/css">
    	
    	#wrapper
    	{
    		width: 700px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	
    	#carousel
    	{
    		margin-top: 120px;
    		padding-left: 120px;
    	}
    	
    	#side
    	{
    		padding-left: 550px;
    		position: absolute;
    		padding-top: 120px;
    	}
    	
    	#hidden
    	{
    		color: #FFFFFF;
    	}
    	
    	</style>-->
    	
    	
    	<script type="text/javascript">
    	
    	var prevButton = null;
    	
    	function getObject(b, el)
    	{
    		var currbutton = b;
    		var http;
    		var url = "about.php";
    		var parameters = "d=carousel&cat=" + currbutton;
    		
    		try
    		{
    			http = new XMLHttpRequest();
    		}
    		
    		catch(e)
    		{
    			try
    			{
    				http = new ActiveXObject("Msxml2.XMLHTTP");
    			}
    		
    			catch(e)
    			{
    				http = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    		}
    		
    		function getServer() 
    		{
    			if (http.readyState == 4)
    			{
    				var i = carousel.first;
    				var index = 0;
    				var liArr = http.responseText;
    				var built = liArr.split(", ");
    				var li = document.createElement("li");
    				var ul1 = document.getElementById("mycarousel");
    				var ul2 = document.getElementById("mycarousel2");
    				var ul3 = document.getElementById("mycarousel3");
    				
    				function itemLoadCallbackFunction(carousel, state) {	
    				while (i < (built.length) / 3)
    				{
    					if (!carousel.has(i))
    					{
    						carousel.add(i, built[index]);
    					}
    					
    					index++;
    					i++;	
    				}
    				
    				while (i < ((built.length) / 3)*2)
    				{
    					if (!carousel.has(i))
    					{
    						carousel.add(i, built[index]);
    					}
    					
    					index++;
    					i++;	
    				}
    				
    				while (i < (built.length))
    				{
    					if (!carousel.has(i))
    					{
    						carousel.add(i, built[index]);
    					}
    					
    					index++;
    					i++;	
    				} };
    			}
    		}
    		
    		http.open("POST", url, true);
    		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    		http.setRequestHeader("Content-length", parameters.length);
    		http.setRequestHeader("Connection", "close");
    		http.onreadystatechange = getServer;
    		http.send(parameters);
    	}
    	
    	jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d)
    	{
    		if ((t/=d) < (1/2.75))
    		{
     			return c*(7.5625*t*t) + b;
     		}
     		else if (t < (2/2.75))
     		{
    			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    		}
    		else if (t < (2.5/2.75))
    		{
     			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
     		}
     		else
     		{
     			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    		}
    	};
    	
    	function mycarousel_initCallback(carousel)
    	{
    		jQuery('#mycarousel-next').bind('click', function() {
    			carousel.next();
    			return false;
    		});
    		
    		jQuery('#mycarousel-prev').bind('click', function() {
    			carousel.prev();
    			return false;
    		});
    	};
    		
    	jQuery(document).ready(function() {
    		jQuery('#mycarousel').jcarousel({
    			easing: 'BounceEaseOut',
    			wrap: "first",
    			initCallback: mycarousel_initCallback,
    			animation: 1000,
    			scroll: 3,
    			visible: 3,
    			buttonNextHTML: null,
           		buttonPrevHTML: null
     
    		});
    			
    		jQuery('#mycarousel2').jcarousel({
    			easing: 'BounceEaseOut',
    			animation: 1000,
    			wrap: "first",
    			initCallback: mycarousel_initCallback,
    			scroll: 3,
    			visible: 3,
    			buttonNextHTML: null,
            	buttonPrevHTML: null
    
    		});
    			
    		jQuery('#mycarousel3').jcarousel({
    			easing: 'BounceEaseOut',
    			animation: 1000,
    			scroll: 3,
    			wrap: "first",
    			initCallback: mycarousel_initCallback,
    			visible: 3,
    			buttonNextHTML: null,
            	buttonPrevHTML: null
    
    		});
    	});
    </script>
    </head>
    
    <body>
    <span id="hidden"> </span>
    <div id="wrapper">
    
    <div id="side">
    
    <form name="cats">
    
    	<input type="button" value="Hats" onclick="getObject('hats', this);"/><br />
    	<input type="button" value="Pants" onclick="getObject('pants', this);"/><br />
    	<input type="button" value="Shirts" onclick="getObject('shirts', this);"/><br />
    	
    </form>
    
    </div>
    <div id="carousel">
    
    <ul id="mycarousel" class="jcarousel-skin-tango">
    </ul>
    <ul id="mycarousel2" class="jcarousel-skin-tango">
    </ul>
    <ul id="mycarousel3" class="jcarousel-skin-tango">
    </ul>
    
    <input type="button" id="mycarousel-prev" value="prev" />
    <input type="button" id="mycarousel-next" value="next" />
    
    </div>
    </div>
    
    </body>
    
    </html> 

I commented the CSS because I thought it was giving me trouble, but honestly I have no idea what the hell's going on with jCarousel.

about.php:

    <?php
    echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, hi, hi, hi, hi, hi, hi, hi, hi";
    		
    ?>


Also, even if there are no other items than what is displayed, I'm still able to scroll back, but not forward, assumingly because my item is always placed at the end of the carousel.

I know it looks like a lot of code but it's really not! My formatting takes a lot of lines, the commented CSS takes a lot, and a lot of the code is HTML and jCarousel configuration, and there's also the BounceEasing effect which takes a few lines. There's not much actual code!


So as I said, this is urgent and I need this fixed. But I can't get it to work. Please help me!

Thanks for your time!
Why doesn't this code work correctly?
===

I'm working on a website that displays galleries, using jCarousel. But no matter what I try, I can't get it to work, and I need to finish this by today. I have a very urgent schedule. My code basically takes image URLs from a database and sends them to AJAX, which passes it to jCarousel which makes the gallery. But there are a few problems:

1. It doesn't display correctly! I can only get the last item pulled from the database, and it displays on the bottom-most row.

2. After the item pulled from the database is displayed, the first time I click on "prev" there's no scroll effect, and the item just disappears! Only if I click on "next" 2-3 times there's a scroll effect and the item remains visible.

3. My items are always displayed at the end of the carousel!

This is urgent.. Please help me fix this.

about.html:

    <!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" xml:lang="en-us">
    
    <head>
    
    	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    	<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
    	
    	<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
    	
    	<!--<style type="text/css">
    	
    	#wrapper
    	{
    		width: 700px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	
    	#carousel
    	{
    		margin-top: 120px;
    		padding-left: 120px;
    	}
    	
    	#side
    	{
    		padding-left: 550px;
    		position: absolute;
    		padding-top: 120px;
    	}
    	
    	#hidden
    	{
    		color: #FFFFFF;
    	}
    	
    	</style>-->
    	
    	
    	<script type="text/javascript">
    	
    	var prevButton = null;
    	
    	function getObject(b, el)
    	{
    		var currbutton = b;
    		var http;
    		var url = "about.php";
    		var parameters = "d=carousel&cat=" + currbutton;
    		
    		try
    		{
    			http = new XMLHttpRequest();
    		}
    		
    		catch(e)
    		{
    			try
    			{
    				http = new ActiveXObject("Msxml2.XMLHTTP");
    			}
    		
    			catch(e)
    			{
    				http = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    		}
    		
    		function getServer() 
    		{
    			if (http.readyState == 4)
    			{
    				var i = carousel.first;
    				var index = 0;
    				var liArr = http.responseText;
    				var built = liArr.split(", ");
    				var li = document.createElement("li");
    				var ul1 = document.getElementById("mycarousel");
    				var ul2 = document.getElementById("mycarousel2");
    				var ul3 = document.getElementById("mycarousel3");
    				
    				function itemLoadCallbackFunction(carousel, state) {	
    				while (i < (built.length) / 3)
    				{
    					if (!carousel.has(i))
    					{
    						carousel.add(i, built[index]);
    					}
    					
    					index++;
    					i++;	
    				}
    				
    				while (i < ((built.length) / 3)*2)
    				{
    					if (!carousel.has(i))
    					{
    						carousel.add(i, built[index]);
    					}
    					
    					index++;
    					i++;	
    				}
    				
    				while (i < (built.length))
    				{
    					if (!carousel.has(i))
    					{
    						carousel.add(i, built[index]);
    					}
    					
    					index++;
    					i++;	
    				} };
    			}
    		}
    		
    		http.open("POST", url, true);
    		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    		http.setRequestHeader("Content-length", parameters.length);
    		http.setRequestHeader("Connection", "close");
    		http.onreadystatechange = getServer;
    		http.send(parameters);
    	}
    	
    	jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d)
    	{
    		if ((t/=d) < (1/2.75))
    		{
     			return c*(7.5625*t*t) + b;
     		}
     		else if (t < (2/2.75))
     		{
    			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    		}
    		else if (t < (2.5/2.75))
    		{
     			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
     		}
     		else
     		{
     			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    		}
    	};
    	
    	function mycarousel_initCallback(carousel)
    	{
    		jQuery('#mycarousel-next').bind('click', function() {
    			carousel.next();
    			return false;
    		});
    		
    		jQuery('#mycarousel-prev').bind('click', function() {
    			carousel.prev();
    			return false;
    		});
    	};
    		
    	jQuery(document).ready(function() {
    		jQuery('#mycarousel').jcarousel({
    			easing: 'BounceEaseOut',
    			wrap: "first",
    			initCallback: mycarousel_initCallback,
    			animation: 1000,
    			scroll: 3,
    			visible: 3,
    			buttonNextHTML: null,
           		buttonPrevHTML: null
     
    		});
    			
    		jQuery('#mycarousel2').jcarousel({
    			easing: 'BounceEaseOut',
    			animation: 1000,
    			wrap: "first",
    			initCallback: mycarousel_initCallback,
    			scroll: 3,
    			visible: 3,
    			buttonNextHTML: null,
            	buttonPrevHTML: null
    
    		});
    			
    		jQuery('#mycarousel3').jcarousel({
    			easing: 'BounceEaseOut',
    			animation: 1000,
    			scroll: 3,
    			wrap: "first",
    			initCallback: mycarousel_initCallback,
    			visible: 3,
    			buttonNextHTML: null,
            	buttonPrevHTML: null
    
    		});
    	});
    </script>
    </head>
    
    <body>
    <span id="hidden"> </span>
    <div id="wrapper">
    
    <div id="side">
    
    <form name="cats">
    
    	<input type="button" value="Hats" onclick="getObject('hats', this);"/><br />
    	<input type="button" value="Pants" onclick="getObject('pants', this);"/><br />
    	<input type="button" value="Shirts" onclick="getObject('shirts', this);"/><br />
    	
    </form>
    
    </div>
    <div id="carousel">
    
    <ul id="mycarousel" class="jcarousel-skin-tango">
    </ul>
    <ul id="mycarousel2" class="jcarousel-skin-tango">
    </ul>
    <ul id="mycarousel3" class="jcarousel-skin-tango">
    </ul>
    
    <input type="button" id="mycarousel-prev" value="prev" />
    <input type="button" id="mycarousel-next" value="next" />
    
    </div>
    </div>
    
    </body>
    
    </html> 

I commented the CSS because I thought it was giving me trouble, but honestly I have no idea what the hell's going on with jCarousel.

about.php:

    <?php
    echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, hi, hi, hi, hi, hi, hi, hi, hi";
    		
    ?>


Also, even if there are no other items than what is displayed, I'm still able to scroll back, but not forward, assumingly because my item is always placed at the end of the carousel.

I know it looks like a lot of code but it's really not! My formatting takes a lot of lines, the commented CSS takes a lot, and a lot of the code is HTML and jCarousel configuration, and there's also the BounceEasing effect which takes a few lines. There's not much actual code!


So as I said, this is urgent and I need this fixed. But I can't get it to work. Please help me!

Thanks for your time!