Look for help about ajax paging to display extra data

Hello, Every friend!

I am looking for a method about ajax paging, I need to apply it at product_info page. It includes two aspects: First, It needs to use ajax's method receive product reviews at product_info page. Second, it needs to use ajax's method implement paging. The general situation is shown in the below figure:

Using Zen Cart 1.5.4

I can't finish this work through myself, hence look for friends's help. I hope that it can be gived a detailed method, also welcome friends participate this discuss. thanks very much!

I have made ajax's test, but it could't success, I think it is sending link's question.

First, I have looked for ajax class, It's name is ajax.js, and it work well. I place it at includes/templates/mytemplate/jscript/ajax.js. it's content is as follows:

function Ajax(recvType){
	var aj=new Object();
	aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML
	aj.targetUrl='';
	aj.sendString='';
	aj.resultHandle=null;

	aj.createXMLHttpRequest=function(){
		var request=false;
		
		if(window.XMLHttpRequest){
			request=new XMLHttpRequest();

			if(request.overrideMimeType){
				request.overrideMimeType("text/xml");
			}
		

		}else if(window.ActiveXObject){
			
			var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];

			for(var i=0; i<versions.length; i++){
					try{
						request=new ActiveXObject(versions[i]);

						if(request){
							return request;
						}
					}catch(e){
						request=false;
					}
			}
		}
		return request;
	}

	aj.XMLHttpRequest=aj.createXMLHttpRequest();

	aj.processHandle=function(){
		if(aj.XMLHttpRequest.readyState == 4){
			if(aj.XMLHttpRequest.status == 200){
				if(aj.recvType=="HTML")
					aj.resultHandle(aj.XMLHttpRequest.responseText);
				else if(aj.recvType=="XML")
					aj.resultHandle(aj.XMLHttpRequest.responseXML);
			}
		}
	}

	aj.get=function(targetUrl, resultHandle){
		aj.targetUrl=targetUrl;	
		
		if(resultHandle!=null){
			aj.XMLHttpRequest.onreadystatechange=aj.processHandle;	
			aj.resultHandle=resultHandle;	
		}
		if(window.XMLHttpRequest){
			aj.XMLHttpRequest.open("get", aj.targetUrl);
			aj.XMLHttpRequest.send(null);
		}else{
			aj.XMLHttpRequest.open("get", aj.targetUrl, true);
			aj.XMLHttpRequest.send();
		}
		
	}

	aj.post=function(targetUrl, sendString, resultHandle){
		aj.targetUrl=targetUrl;

		if(typeof(sendString)=="object"){
			var str="";
			for(var pro in sendString){
				str+=pro+"="+sendString[pro]+"&";	
			}
			aj.sendString=str.substr(0, str.length-1);
		}else{
			aj.sendString=sendString;
		}

		if(resultHandle!=null){
			aj.XMLHttpRequest.onreadystatechange=aj.processHandle;	
			aj.resultHandle=resultHandle;	
		}

		aj.XMLHttpRequest.open("post", targetUrl);
		aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		aj.XMLHttpRequest.send(aj.sendString);
		
	}

	return aj;
}

Second, I have built a file, It's name is tpl_test_default.php. I place it at includes/templates/mytemplate/templates/tpl_test_default.php. it's content is as follows:

<?php
	echo $_GET["username"];
?>

Third, I have add below content at includes/templates/mytemplate/templates/tpl_product_info_display.php, but it could't alert return information.

<script type="text/javascript" src="includes/templates/mytemplate/jscript/ajax.js"></script>

<script type="text/javascript">

	var ajax=Ajax();

ajax.get("<?php echo zen_href_link(FILENAME_TEST,'username=Dana'); ?>", function(data){
				
				alert(data);
	});

</script>

Forth, I have altered url adress in script, It also could't work. it's content is as follows:

<script type="text/javascript" src="includes/templates/mytemplate/jscript/ajax.js"></script>

<script type="text/javascript">

	var ajax=Ajax();

ajax.get("http://localhost/zencart/includes/templates/mytemplate/templates/tpl_test_default.php?username=Dana", function(data){
				
				alert(data);
	});

</script>

I think the question is that url is't correct, but can't find right method. maybe it is other question, but ajax.js can work well, I hope friends help me test and finding method.

If you are only needing this for this page tpl_product_info_display.php
Then you can/should place the file in includes/modules/pages/product_info

You should also rename it to jscript_ajax.js

Doing the above will cause the ajax.js code to loaded whenever the product info page is accessed

wrong AJAX URL ? FILENAME_TEST is defined ?

you can try this:

1. edit includes/modules/pages/product_info/header_php.php, at the top of the file contents:

if (isset($_GET['get_reviews'])) {
  // test paging
  $page = isset($_GET['review_page']) ? intval($_GET['review_page']) : 1;
  echo "get reviews ok - page $page";
  exit();
}

2. edit includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php, at the end of the file contents:

<div style="margin-top:30px" id="reviews_page">
  <a href="index.php?main_page=product_info&products_id=<?php echo intval($_GET['products_id']);?>&get_reviews&review_page=1">1</a>
  <a href="index.php?main_page=product_info&products_id=<?php echo intval($_GET['products_id']);?>&get_reviews&review_page=2">2</a>
  <a href="index.php?main_page=product_info&products_id=<?php echo intval($_GET['products_id']);?>&get_reviews&review_page=3">3</a>
</div>
<script>
var ajax_urls=document.getElementById('reviews_page').getElementsByTagName("a"),ajax=Ajax();
for(var i in ajax_urls){
  ajax_urls[i].onclick=function(){
    ajax.get(this.href, function(result){
      // alert(result)
      console.log(result)
    });
    return false;
  }
}
</script>

ok, now it works

What is the reason for using the function intval() (which could error out) vs casting the values with (int)?

Thank friends's reply! I have awared that I could't slove this problem through myself after I posted this thread, so I did't continue to study the problem. but I know zen-cart must be able to achieve this function. I am so glading to see your response, Especially DrInt's method may be able to solve my problem, I will try it later.:D