Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: PHP Ajax buttons session Firefox , +
Hello all
 
My website found here has two buttons. Both return videos from a tumblr blog using the tumblr api. I display 4 videos at a time,If i click the 'Forward' button it will call the php function(blogFunction.php) which will return the next 4 videos. The 'back' button will go back to the previous 4 videos.
 
The problem lies in that when I press 'Forward' in chrome, the videos do not change. The back button works fine. This problem only persists in Chrome. Firefox and Internet Explorer work fine. I noticed if I click the 'Forward' button twice really fast, it will work as intended.
 
I have the latest versions of Chrome and Firefox and IE8.
 
I would be incredibly happy if someone can help me here. Really happy!
 
My code.
 
Index.php
 
<?php 
 session_start();
 $_SESSION['views'] = 0;
 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Retrovate </title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="base.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
   
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
      
</head>
<body>
 
<div class = "face">
 
   <div class="header">
 
		<div class="content">
			<h1 class="title">Under counstruction</h1>
			<ul id="sdt_menu" class="sdt_menu">
				<li>
					<a href="#">
						<img src="images/mac.jpg" alt="James McLaren"/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">About me</span>
							<span class="sdt_descr">Who is this guy?</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/gamer.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Gamer</span>
							<span class="sdt_descr">What I do in free time</span>
						</span>
					</a>
					<div class="sdt_box">
							<a href="#">Currently Playing</a>
							<a href="#">Played</a>					
					</div>
				</li>
				<li>
					<a href="#">
						<img src="images/inspiration.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Inspiration</span>
							<span class="sdt_descr">What this man has done for me</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/photo.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Photos</span>
							<span class="sdt_descr">Photographer for 2 weeks of the year</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/blog.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Blog</span>
							<span class="sdt_descr">Reposts from youtube and reddit</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/project.gif" alt="" />
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Projects</span>
							<span class="sdt_descr">The stuff I have done</span>
						</span>
					</a>
					<div class="sdt_box">
						<a href="#">myBlood</a>
					</div>
				</li>
			</ul>
		</div>
	</div>	
	<div class ="menu">
			<ul class="nav">
				
			</ul>
	</div>
	
		
	<div class="center">
		 <input type="submit"  value="Forward" id="call_ajax1" />
		 <input type="submit"  value="Back" id="call_ajax2" />
		<div id = "blog">
			
		</div>
	</div>
	
	<div class = "contact">	
			<div class ="scrollingDiv">			
					
			</div>	
	</div>
<div class="footer">
           <a href ="http://www.youtube.com/user/TheRetroMac"><img src = "images/youtube2.png"  alt = "Youtube Channel"  /></a>
				<a href ="http://retrovate.tumblr.com/"><img src = "images/tumblr.png"  alt = "Tumblr" />	</a>
				<a href ="http://www.facebook.com/Retrovate"><img src = "images/fb.png"  alt = "Facebook Profile" />	</a>
				<a href ="https://twitter.com/#!/Retrovate"><img src = "images/twitter2.png"  alt = "Twitter Feed" />	</a>
				<a href ="https://plus.google.com/u/0/113170773268202431297/posts"><img src = "images/googleplus.png"  alt = "Google Plus Profile" />	</a>
				<a href ="http://retrovate.deviantart.com/"><img src = "images/deviantart.png"  alt = "Deviant Art" />	</a>	
				<br>
			 <div>
				<a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">Menu Thanks to tympanus</a>
			</div>
        </div>
</div>
		<script type="text/javascript">
            $('#call_ajax1').click(function () {
                $.ajax({ url: 'blogFunction.php',
                    data: {action: 'test1'},
					dataType: "html",
                    type: 'post',
                    success: function(output) {
                      $('#blog').html(output);
                    }
                });
            });
        </script>
		
		<script type="text/javascript">
            $('#call_ajax2').click(function () {
                $.ajax({ url: 'blogFunction.php',
                    data: {action: 'test2'},
					dataType: "html",
                    type: 'post',
                    success: function(output) {
                      $('#blog').html(output);
                    }
                });
            });
        </script>
		
		
        <script type="text/javascript">
            $(function() {
    $('#sdt_menu > li').bind('mouseenter',function(){
        var $elem = $(this);
        $elem.find('img')
             .stop(true)
             .animate({
                'width':'170px',
                'height':'170px',
                'left':'0px'
             },400,'easeOutBack')
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'140px'},500,'easeOutBack')
             .andSelf()
             .find('.sdt_active')
             .stop(true)
             .animate({'height':'170px'},300,function(){
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length){
                var left = '170px';
                if($elem.parent().children().length == $elem.index()+1)
                    left = '-170px';
                $sub_menu.show().animate({'left':left},200);
            }
        });
    }).bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length)
            $sub_menu.hide().css('left','0px');
 
        $elem.find('.sdt_active')
             .stop(true)
             .animate({'height':'0px'},300)
             .andSelf().find('img')
             .stop(true)
             .animate({
                'width':'0px',
                'height':'0px',
                'left':'85px'},400)
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'25px'},500);
    });
});
        </script>
		
	<script type="text/javascript">
 
	$().ready(function() {
		var $scrollingDiv = $("#scrollingDiv");
 
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );			
		});
	});
   </script>
    
 

</body>
</html>
 

my blogFunction.php file
 
<?php 
session_start();
if(isset($_POST['action']) && !empty($_POST['action'])) {
    $action = $_POST['action'];
	
    switch($action) {
        case 'test1' :  blogforward();break;
		 case 'test2' :  blogback();break;
    }
}
 

	function blogforward(){	
 
		$request_url = "http://retrovate.tumblr.com/api/read?type=posts";
		$xml = simplexml_load_file($request_url);
 
		 $_SESSION['views'] = $_SESSION['views']+ 3;
		$a = $_SESSION['views'];
		$b = $a+3;
		echo "A = ".$a;
		echo "B = ".$b;
		
		for ($i	= $a; $i <= $b; $i++) {
				echo '<h2>'.$xml->posts->post[$i]->{'regular-title'}.'</h2>';
				echo '<br>';
				echo $xml->posts->post[$i]->{'regular-body'};
				echo '<br>';
				echo '<br>';
		}	 
		
	}
	
	
	function blogback(){
	
		$request_url = "http://retrovate.tumblr.com/api/read?type=posts";
		$xml = simplexml_load_file($request_url);
 
		$_SESSION['views'] = $_SESSION['views']- 3;	
		$a = $_SESSION['views'];
		$b = $a+3;
		echo "A = ".$a;
		echo "B = ".$b;
		
		
		for ($i	= $a; $i <= $b; $i++) {
				echo '<h2>'.$xml->posts->post[$i]->{'regular-title'}.'</h2>';
				echo '<br>';
				echo $xml->posts->post[$i]->{'regular-body'};
				echo '<br>';
				echo '<br>';
		}	
	
	}
?>
Posted 22-Jan-12 17:10pm
Mactm309

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web03 | 2.8.1411022.1 | Last Updated 22 Jan 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100