PDA

View Full Version : Ajax pagination and dynamic var setting



fodo
02-26-2008, 10:44 PM
1) Script Title: Ajax Pagination

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxpaginate/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



<!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>

ddadmin
02-27-2008, 12:57 AM
Please post a link to the page on your site that contains the problematic script so we can check it out. It's a lot easier to be able to see what's actually generated by your server side code.

fodo
02-27-2008, 10:24 AM
Thanks for coming back.
This is a link to the test set up.
There seems to be an error in the code that i am trying to track down as well.
One thing that you might coment on:-is it possible to mix js with php in the same script?
This seems to be what the advice on the source site said, but it seems to me that means pasing a php array to js var.

fodo
02-27-2008, 10:25 AM
Sorry forgot the link
http://217.46.159.226/pag/index.html

ddadmin
02-27-2008, 11:37 PM
Well right now there's not much to go by, since the script isn't correctly output yet (parts of it appear on the page). In general, the checklist for using any server side language to dynamically output client side JavaScripts is the same. As long as what gets output to the browser conforms to the syntax/ conventions of the client side script, as if you've manually added it to the page, it should work.

fodo
02-28-2008, 02:29 PM
There are two problems here.
When tested in firefox the error console says myajaxbook is undefined.
Question where in the script is it defined/
Secondly the script outputs the code at the point of echo"<script type='text/javascript'>
This occurs whereever it is place in the final part of the program.
So is there something wrong with this. ie its echo out literally.
I have re typed this code in notepad to eliminate any other factors.
Can you help out here please.

ddadmin
02-29-2008, 07:22 AM
Well, with regards to:


Secondly the script outputs the code at the point of echo"<script type='text/javascript'>

As far as I can tell, that's simply due to the fact that your page (http://217.46.159.226/pag/index.html) isn't actually PHP enabled. The extension .html gives it away (instead of .php for example), but also, viewing source, the server definitely isn't interpreting what's in between your <?php ?> tags, just outputting it as regular text.

fodo
02-29-2008, 01:09 PM
Well, with regards to:



As far as I can tell, that's simply due to the fact that your page (http://217.46.159.226/pag/index.html) isn't actually PHP enabled. The extension .html gives it away (instead of .php for example), but also, viewing source, the server definitely isn't interpreting what's in between your <?php ?> tags, just outputting it as regular text.
Hi,
I think I have fixed the code output issue as you suggested by making the page php
I know have an image but nothing else.
This is the new link
http://217.46.159.226/pag/pag.php

I have 2 errors
1
Error: missing ; before statement
Source File: http://localhost/pag/pag.php
Line: 140, Column: 17
Source Code:
var myajaxbook={}mysettings.page=[Array]
2
Error: myajaxbook is not defined
Source File: http://localhost/pag/pag.php
Line: 144
Where should myajaxbook be defined?

ddadmin
02-29-2008, 09:19 PM
http://217.46.159.226/pag/pag.php is returning a bunch of strange characters for me.

fodo
03-01-2008, 02:13 PM
Yes I see. They dont show when i test in localhost mode. Back to he drawing board. Will be in touch