phpSensei Posted March 5, 2008 Share Posted March 5, 2008 hey guys, im just wondering why the page refreshes after i click "next" or "1 2 3" or "previous" or anything.... I made a AJAX/JAVASCRIPT/PHP pagination, but the page still refreshes. I know this because i added a youtube video to test it out, and the video restarts after i click the pagination buttons... AJAX/Javascript <!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> <style type="text/css"> <!-- .style3 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .style7 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; font-style: italic; } .pagin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; } .pagin a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; } .pagin a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FF6600; text-decoration: none; } .pagin a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; } .pagin a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; } --> </style> <title>Game List Pagination</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" language="javascript"> //<-- Start Object -- >>// function createXMLObject(){ var Req; if(window.XMLHttpRequest){ Req = new XMLHttpRequest(); }else if(window.ActiveXObject){ Req = new ActiveXObject("Microsoft.XMLHTTP"); }else{ alert("Please upgrade your browser"); } return Req; } var Obj = createXMLObject(); function getPaginationData(page){ if(page == 0){ page = 1; } else{ Obj.open('get','get.php?page=' + page); Obj.onreadystatechange = handleReceive; Obj.send(null); } } function handleReceive(){ if(Obj.readyState == 4 && Obj.status == 200){ var response = Obj.responseText; if(response){ document.getElementById('pagination_frame').innerHTML = response; } } } //<-- End Pagination Script -->>// </script> </head> <body onload="getPaginationData(1)"> <div id="pagination_frame"></div> </body> </html> php <?php mysql_connect('localhost','root','') or die(mysql_error()); mysql_select_db('pagination'); $page = 1; $rows_per_page = 5; $query = mysql_query("SELECT * FROM games"); $total_rows = mysql_num_rows($query); $last = ceil($total_rows / $rows_per_page); if((!isset($page)) || ($page == '') || ($page > $last) || ($page < 1)){ $page = 1; }else{ $page = $_GET['page']; } $page = mysql_real_escape_string(strip_tags($page)); if(!preg_match('{([1-'.$last.'])}',$page)){ $page = 1;} $max = 'limit ' . ($page - 1) * $rows_per_page .','.$rows_per_page; $query = mysql_query("SELECT gTitle, gDesc, gDate FROM games ORDER BY gDate DESC $max"); echo ' <table width="100%" class="pagin" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="right">'; /// PAGES $next = $page + 1; $last = $last; $prev = $page - 1; if($page > 1) { echo ' <a class="pagin" href="#" onclick="getPaginationData(\'1\')">' . 'First Page | ' . '</a> '; } if($page > 1) { echo ' <a class="pagin" href="#" onclick="getPaginationData('.$prev.')">' . 'Previous | ' . '</a> '; } for($i=1;$i<=$last;$i++){ echo '<a class="pagin" href="#" onclick="getPaginationData('.$i.')">'; if($page == $i){ echo '<b>'.$i.'</b> '; } else { echo $i . ' ';} echo'</a> '; } if($page != $last){ echo '<a class="pagin" href="#" onclick="getPaginationData('.$next.')">'. ' | Next' . '</a> '; } if($page < $last) { echo ' <a class="pagin" href="#" onclick="getPaginationData('.$last.')">' . ' | Last Page' . '</a> '; } echo'</td> </tr> </table>'; $i = 1; while($row = mysql_fetch_array($query)){ $gTitle = $row['gTitle']; $gDesc = $row['gDesc']; $gDate = $row['gDate']; echo '<table width="100%" id="table'.$i.'" onmouseover="this.bgColor=\'#EEEEEE\'" onmouseout="this.bgColor=\'#FFFFFF\'" border="0" cellspacing="2" cellpadding="0"> <tr> <td ><span class="style5">'.$gTitle.'</span> </td> </tr> <tr> <td><hr size="1" noshade></td> </tr> <tr> <td><span class="style3">'.$gDesc.'<br></span></td> </tr> <tr> <td><span class="style7">Submit on: '.$gDate.'</span></td> </tr> </table> <br> <br>'; $i++; } ?> Link to comment https://forums.phpfreaks.com/topic/94504-page-still-refreshes/ Share on other sites More sharing options...
The Little Guy Posted March 5, 2008 Share Posted March 5, 2008 <?php if($page != $last){ echo '<a class="pagin" href="#" onclick="getPaginationData('.$next.')">'. ' | Next' . '</a> '; } ?> to <?php if($page != $last){ echo '<a class="pagin" href="javascript:getPaginationData('.$next.')">'. ' | Next' . '</a> '; } ?> Link to comment https://forums.phpfreaks.com/topic/94504-page-still-refreshes/#findComment-483945 Share on other sites More sharing options...
phpSensei Posted March 5, 2008 Author Share Posted March 5, 2008 Still no luck, that works too with the javascript, altho I tried adding a ANIMATED GIF, and tried the pagination, and it seems that the page doesnt reload. The animated gif is pretty long, and didnt restart as I was shifting the pagination for page to page.... Heres the updated code, with the Youtube code in it <param name="movie" value="http://www.youtube.com/v/dY2UwRlditU&rel=0&color1=0x000000&color2=0x000000&border=0&autoplay=1"></param> <param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/dY2UwRlditU&rel=0&color1=0x000000&color2=0x000000&border=0&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="495" height="370"></embed> <?php mysql_connect('localhost','root','') or die(mysql_error()); mysql_select_db('pagination'); $page = 1; $rows_per_page = 2; $query = mysql_query("SELECT * FROM games"); $total_rows = mysql_num_rows($query); $last = ceil($total_rows / $rows_per_page); if((!isset($page)) || ($page == '') || ($page > $last) || ($page < 1)){ $page = 1; }else{ $page = $_GET['page']; } if($page == ''){ $page = 1; } if($page > $last){ $page = 1; } if($page < 1){ $page = 1;} $page = mysql_real_escape_string(strip_tags($page)); if(!preg_match('{([1-'.$last.'])}',$page)){ $page = 1;} $max = 'limit ' . ($page - 1) * $rows_per_page .','.$rows_per_page; $query = mysql_query("SELECT gTitle, gDesc, gDate FROM games ORDER BY gDate DESC $max"); echo ' <table width="100%" class="pagin" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="right">'; /// PAGES $next = $page + 1; $last = $last; $prev = $page - 1; if($page > 1) { echo ' <a class="pagin" href="javascript:getPaginationData(\'1\')">' . 'First Page</a> | ' . ''; } if($page > 1) { echo ' <a class="pagin" href="javascript:getPaginationData('.$prev.')">' . 'Previous</a> | ' . ' '; } for($i=1;$i<=$last;$i++){ echo '<a class="pagin" href="javascript:getPaginationData('.$i.')">'; if($page == $i){ echo '<b>'.$i.'</b></a> '; } else { echo $i . '</a> ';} } if($page != $last){ echo ' | <a class="pagin" href="javascript:getPaginationData('.$next.')">'. 'Next</a>' . ' '; } if($page < $last) { echo ' | <a class="pagin" href="javascript:getPaginationData('.$last.')">' . 'Last Page</a>' . ' '; } echo'</td> </tr> </table>'; $i = 1; while($row = mysql_fetch_array($query)){ $gTitle = $row['gTitle']; $gDesc = $row['gDesc']; $gDate = $row['gDate']; echo '<table width="100%" id="table'.$i.'" onmouseover="this.bgColor=\'#EEEEEE\'" onmouseout="this.bgColor=\'#FFFFFF\'" border="0" cellspacing="2" cellpadding="0"> <tr> <td ><span class="style5">'.$gTitle.'</span> </td> </tr> <tr> <td><hr size="1" noshade></td> </tr> <tr> <td><span class="style3">'.$gDesc.'<br></span></td> </tr> <tr> <td><span class="style7">Submit on: '.$gDate.'</span></td> </tr> </table> <br> <br>'; $i++; } ?> Link to comment https://forums.phpfreaks.com/topic/94504-page-still-refreshes/#findComment-483963 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.