www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript stops working when fetching data from MySQL

  1. #1
    Join Date
    Nov 2009
    Posts
    97

    Javascript stops working when fetching data from MySQL

    Hello all,

    I have my doubts if this question belongs to the javascript side since it's all good until the data from MySQL comes in, but since the javascript is the one breaking I'll take my chances.

    I'll post the code and then I'll explain where is the problem so maybe someone can help me

    The external js (portada.js)
    Code:
    $(document).ready(function(){
    	var currentPosition 	= 0;
    	var currentPosition2 	= 0;
    	var currentPosition3 	= 0;
    	var slideWidth 			= 860;
    	var slides 				= $('.slide');
    	var slides2 			= $('.slide2');
    	var slides3 			= $('.slide3');
    	var numberOfSlides 		= slides.length;
    	var numberOfSlides2 	= slides2.length;
    	var numberOfSlides3 	= slides3.length;
    
    	// Remove scrollbar in JS
    	$('#slidesContainer').css('overflow', 'hidden');
    	$('#slidesContainer2').css('overflow', 'hidden');
    	$('#slidesContainer3').css('overflow', 'hidden');
    
    	// Wrap all .slides with .slideInner div
    	slides
    	.wrapAll('<div class="slideInner"></div>')
    	// Float left to display horizontally, readjust .slides width
    	.css({
    		'float' : 'left',
    		'width' : slideWidth
    	});
    	
    	// Wrap all .slides2 with .slideInner div
    	slides2
    	.wrapAll('<div class="slideInner2"></div>')
    	// Float left to display horizontally, readjust .slides width
    	.css({
    		'float' : 'left',
    		'width' : slideWidth
    	});
    	
    	// Wrap all .slides3 with .slideInner div
    	slides3
    	.wrapAll('<div class="slideInner3"></div>')
    	// Float left to display horizontally, readjust .slides width
    	.css({
    		'float' : 'left',
    		'width' : slideWidth
    	});
    
    	// Set .slideInner width equal to total width of all slides
    	$('.slideInner').css('width', slideWidth * numberOfSlides);
    	$('.slideInner2').css('width', slideWidth * numberOfSlides2);
    	$('.slideInner3').css('width', slideWidth * numberOfSlides3);
    
    	// Insert controls in the DOM
    	$('#slideshow')
    	.prepend('<span class="control" id="leftControl"></span>')
    	.append('<span class="control" id="rightControl"></span>');
    	
    	$('#slideshow2')
    	.prepend('<span class="control2" id="leftControl2"></span>')
    	.append('<span class="control2" id="rightControl2"></span>');
    	
    	$('#slideshow3')
    	.prepend('<span class="control3" id="leftControl3"></span>')
    	.append('<span class="control3" id="rightControl3"></span>');
    
    	// Hide left arrow control on first load
    	manageControls(currentPosition);
    	manageControls2(currentPosition);
    	manageControls3(currentPosition);
    
    	// Create event listeners for .controls clicks
    	$('.control')
    	.bind('click', function(){
    		// Determine new position
    		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
    		// Hide / show controls
    		manageControls(currentPosition);
    		// Move slideInner using margin-left
    		$('.slideInner').animate({
    			'marginLeft' : slideWidth*(-currentPosition)
    		});
    	});
    	
    	// Create event listeners for .controls2 clicks
    	$('.control2')
    	.bind('click', function(){
    		// Determine new position
    		currentPosition2 = ($(this).attr('id')=='rightControl2') ? currentPosition2+1 : currentPosition2-1;
    
    		// Hide / show controls
    		manageControls2(currentPosition2);
    		// Move slideInner using margin-left
    		$('.slideInner2').animate({
    			'marginLeft' : slideWidth*(-currentPosition2)
    		});
    	});
    	
    	// Create event listeners for .controls3 clicks
    	$('.control3')
    	.bind('click', function(){
    		// Determine new position
    		currentPosition3 = ($(this).attr('id')=='rightControl3') ? currentPosition3+1 : currentPosition3-1;
    
    		// Hide / show controls
    		manageControls3(currentPosition3);
    		// Move slideInner using margin-left
    		$('.slideInner3').animate({
    			'marginLeft' : slideWidth*(-currentPosition3)
    		});
    	});
    
    	// manageControls: Hides and Shows controls depending on currentPosition
    	function manageControls(position){
    		// Hide left arrow if position is first slide
    		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    		// Hide right arrow if position is last slide
    		if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    	}
    	function manageControls2(position){
    		// Hide left arrow if position is first slide
    		if(position==0){ $('#leftControl2').hide() } else{ $('#leftControl2').show() }
    		// Hide right arrow if position is last slide
    		if(position==numberOfSlides2-1){ $('#rightControl2').hide() } else{ $('#rightControl2').show() }
    	}
    	function manageControls3(position){
    		// Hide left arrow if position is first slide
    		if(position==0){ $('#leftControl3').hide() } else{ $('#leftControl3').show() }
    		// Hide right arrow if position is last slide
    		if(position==numberOfSlides3-1){ $('#rightControl3').hide() } else{ $('#rightControl3').show() }
    	}
    });
    HTML
    HTML Code:
    <!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=utf-8" />
    	<link rel="stylesheet" type="text/css" href="/css/styles.css" />
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    	<script type="text/javascript" src="/js/portada.js"></script>
    </head>
    <body>
    	<div id="slideshow">
    		<div id="slidesContainer">
    			<div class="slide">
    				<?php $result = mysql_query("SELECT * FROM `portada` WHERE `clase` = 'Temporada'") or die ('Error: '.mysql_error ()); 
    				while($row = mysql_fetch_array($result)){ ?>				
    					<div class="slidebox">
    						<img src="/images/portada/<?php echo $row['name']; ?>.jpg" />
    						<h2><?php echo $row['name']; ?></h2>
    						<h3><?php echo $row['description']; ?></h3>
    					</div><?php
    				} ?>
    			</div>
    		</div>
    	</div>
    	<div id="slideshow2">
    		<div id="slidesContainer2">
    			<div class="slide2">
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    			</div>
    			<div class="slide2">
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    			</div>
    			<div class="slide2">
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div id="slideshow3">
    		<div id="slidesContainer3">
    			<div class="slide3">
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    				<div class="slidebox">
    					<img src="/images/portada/test.jpg" />
    					<h2>test</h2>
    					<h3>test</h3>
    				</div>
    			</div>
    		</div>
    	</div>
    		<div id="clearfooter"></div>
    	</div>
    </body>
    </html>
    So this is what the problem is:

    As you can see I have three divs with different slideshows (slideshow, slideshow2 and slideshow3), they have products that slide to the left.
    When I was testing to make sure it all looks good the sliding feature was working fine, but I lost this feature when the data was being retrieved from MySQL (at the moment on <div class="slide">).

    I would dare to suggest that it may have to do with the fact that the js is loading before the data from MySQL but that is just a guess, and even if that was true, I have no idea how to fix it...

    Would anyone care to help me out a bit please? Thanks everybody

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,119
    server side always executes first, if you are using Firefox go to C+Shift+J
    this will bring up javascript error console, clear the console, then reload your page and see which error is being displayed. That will give you a better idea or any one here to help you further
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Nov 2009
    Posts
    97
    Thanks Khalid Ali for the reply and the clarification.

    I checked for errors with firefox and chrome and got nothing, I thought about it and realized that if there were errors in my javascript they would be there no matter where I'm getting the data from right? be it hardcoded data or fetched from a database...

    This is so weird! Do you have any other ideas or anyone else that could provide a little help please

    Thanks a lot for the help

  4. #4
    Join Date
    Nov 2009
    Posts
    97
    I hate to insist but this is killing me, anybody has a suggestion?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles