Ajax pagination and dynamic var setting
1) Script Title: Ajax Pagination
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nate/index.htm
3) Describe problem: I am trying to adapt the script to access a mysql database and retrieve the location of 3 pages.
The 3 pages relate to a product id. There are mutiple products.
i would like to run the script when a product is selected (by clicking an image)
and retireve the pages to show using the pagination script.
I think I have some basic flaws in my code and would like some direction if possible.
My code is
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" lang="en" xml:lang="en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>pag</title> <link rel="stylesheet" type="text/css" href="ajaxpagination.css" /> <script type="text/javascript"> /*********************************************** * Ajax Pagination script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var ajaxpageclass=new Object() //1) HTML to show while requested page is being fetched: ajaxpageclass.loadstatustext="<img src='loading.gif' /> Requesting content..." //2) Bust cache when fetching pages? ajaxpageclass.ajaxbustcache=false ajaxpageclass.connect=function(pageurl, divId){ var page_request = false var bustcacheparameter="" if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE6 or below try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ajaxpageclass.loadpage(page_request, divId)} if (this.ajaxbustcache) //if bust caching of external page bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcacheparameter, true) page_request.send(null) } ajaxpageclass.loadpage=function(page_request, divId){ document.getElementById(divId).innerHTML=this.loadstatustext //Display "fetching page message" if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(divId).innerHTML=page_request.responseText } } ajaxpageclass.bindpages=function(pageinfo, divId, paginateIds){ //Main Constructor function this.pageinfo=pageinfo //store object containing URLs of pages to fetch, selected page number etc this.divId=divId this.paginateIds=paginateIds //array of ids corresponding to the pagination DIVs defined for this pageinstance var initialpage=(pageinfo.selectedpage<pageinfo.page.length)? pageinfo.selectedpage : 0 //set initial page shown this.buildpagination(initialpage) this.selectpage(initialpage) } ajaxpageclass.bindpages.prototype={ buildpagination:function(selectedpage){ if (this.pageinfo.page.length==1) var paginateHTML="Page 1 of 1" //Pagination HTML to show when there's only 1 page (no pagination needed) else{ //construct pagimation interface var paginateHTML='<div class="pagination"><ul>\n' paginateHTML+='<li><a href="#previous" rel="'+(selectedpage-1)+'">«</a></li>\n' for (var i=0; i<this.pageinfo.page.length; i++){ paginateHTML+='<li><a href="#page'+(i+1)+'" rel="'+i+'">'+(i+1)+'</a></li>\n' } paginateHTML+='<li><a href="#next" rel="'+(selectedpage+1)+'">next »</a></li>\n' paginateHTML+='</ul></div>' }// end construction for (var i=0; i<this.paginateIds.length; i++){ //loop through # of pagination DIVs specified var paginatediv=document.getElementById(this.paginateIds[i]) //reference pagination DIV paginatediv._currentpage=selectedpage //remember current page selected (which will become previous page selected after each page turn) paginatediv.innerHTML=paginateHTML var pageinstance=this paginatediv.onclick=function(e){ var targetobj=window.event? window.event.srcElement : e.target if (targetobj.tagName=="A" && targetobj.getAttribute("rel")!=""){ if (!/disabled/i.test(targetobj.className)){ //if this pagination link isn't disabled (CSS classname "disabled") pageinstance.selectpage(parseInt(targetobj.getAttribute("rel"))) } } return false } } }, selectpage:function(selectedpage){ //replace URL's root domain with dynamic root domain (with or without "www"), for ajax security sake: var modifiedurl=this.pageinfo.page[selectedpage].replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") ajaxpageclass.connect(modifiedurl, this.divId) //fetch requested page and display it inside DIV if (this.pageinfo.page.length==1) //if this book only containe 1 page return var prevlinkoffset=1 for (var i=0; i<this.paginateIds.length; i++){ //loop through # of pagination DIVs specified var paginatediv=document.getElementById(this.paginateIds[i]) var paginatelinks=paginatediv.getElementsByTagName("a") paginatelinks[0].className=(selectedpage==0)? "prevnext disabled" : "prevnext" //if current page is 1st page, disable "prev" button paginatelinks[0].setAttribute("rel", selectedpage-1) //update rel attr of "prev" button with page # to go to when clicked on paginatelinks[paginatelinks.length-1].className=(selectedpage==this.pageinfo.page.length-1)? "prevnext disabled" : "prevnext" paginatelinks[paginatelinks.length-1].setAttribute("rel", selectedpage+1) paginatelinks[paginatediv._currentpage+prevlinkoffset].className="" //deselect last clicked on pagination link (previous) paginatelinks[selectedpage+prevlinkoffset].className="currentpage" //select current pagination link paginatediv._currentpage=selectedpage //Update last clicked on link } }, refresh:function(pageinfo){ this.pageinfo=pageinfo var initialpage=(pageinfo.selectedpage<pageinfo.page.length)? pageinfo.selectedpage : 0 this.buildpagination(initialpage) this.selectpage(initialpage) } } </script> </head> <body> <a href="javascript:mypages.refresh(myajaxbook)"><img src="BookJacket95x141.gif"></img></a> <div id="paginate-top"> </div> <div id="pcontent"> </div> <div id="paginate-bottom"> </div> <?php //include db_fns include_once('db_fns.php'); include('mysql_connect.php'); //get product_id $product_id=13; //connect to db $connection=db_connect(); echo "<script type='text/javascript'>\n"; //Dynamically output JavaScript opening tag echo "var mysettings={}\n"; //Dynamically output javascript variable $query="SELECT p1,p2,p3 from ajax WHERE product_id='$product_id'"; $result = mysql_query($query) or die ("Sorry, unable to execute $sql: " . mysql_error()); // execute the query $result = mysql_query($query); $num_rows=mysql_num_rows($result); $idarray=array(); for( $i=0; $i<$num_rows; $i++) { $row=mysql_fetch_row($result); array_push($idarray, array($row[0],$row[1],$row[2])); } echo "mysettings.page=[" . implode(",", $idarray) . "]\n"; echo "mysettings.selectedpage=0\n"; echo "</script>\n"; //Dynamically output JavaScript closing tag ?> <script type="text/javascript"> var mypages=new ajaxpageclass.bindpages(myajaxbook, "pcontent", ["paginate-top", "paginate-bottom"]) </script> </body> </html>
CSS Codes
Reply With Quote
Originally Posted by ddadmin
Bookmarks