[RESOLVED] PHP - Ajax problem - PHPBuilder Forums

[RESOLVED] PHP - Ajax problem

akmal1981

Hi everyone ..

Ermm i hope this thread belongs to the correct section.

Thanks to all the experts here , my pagination code finally working :o

What I am doing now is to combine my pagination code with webpage code (with all the nice designs).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <meta name="keywords" content=""/>		
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
 <link rel="stylesheet" href="cssOurTeam/styleOurTeam.css" type="text/css" media="screen"/>

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Aller.font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('ul.oe_menu div a',{hover: true});
Cufon.replace('h1,h2,.oe_heading');
</script>

<!----SEARCH TOOL CODE FUNCTION STARTS HERE---------->

<script type="text/javascript"> 

function showtype(str){
	var ajaxRequest;  // The variable that makes <strong class="highlight">Ajax</strong> possible!
	if (str=="") {   

		document.getElementById("txtHint").innerHTML="";   

		return;   

	}  	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('txtHint');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET","gettype.php?q="+str,true); 
	ajaxRequest.send(null); 	
}

function showlocation(str){
	var ajaxRequest;  // The variable that makes <strong class="highlight">Ajax</strong> possible!
	if (str=="") {   

		document.getElementById("txtHint").innerHTML="";   

		return;   

	}  	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('txtHint');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET","getlocation.php?q="+str,true); 
	ajaxRequest.send(null); 	
}


function showprice(str){
	var ajaxRequest;  // The variable that makes <strong class="highlight">Ajax</strong> possible!
	if (str=="") {   

		document.getElementById("txtHint").innerHTML="";   

		return;   

	}  	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('txtHint');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET","getprice.php?q="+str,true); 
	ajaxRequest.send(null); 	
}

</script> 

<!-----SEARCH TOOL CODE FUNCTION ENDS HERE----------------->

<!---------CSS STYLE FORMATTING STARTS HERE ---------------->

    <style type="text/css">

        span.TopicIndex{
			position:fixed;
			left:0px;
			top:0px;
			background:#000;
			width:100%;
			font-size:10px;
			line-height:20px;
			text-align:left;
			height:20px;       				                                                -moz-box-shadow:-1px 0px 10px #000;
			-webkit-box-shadow:-1px 0px 10px #000;
			box-shadow:-1px 0px 10px #000;
		}

		span.TopicIndex a{
			color:#aaa;
			text-transform:uppercase;
			text-decoration:none;
			margin-left:40px;

		}
		span.TopicIndex a:hover{
			color:#ddd;
		}

		span.reference{
			position:fixed;
			left:0px;
			bottom:0px;
			background:#000;
			width:100%;
			font-size:10px;
			line-height:20px;
			text-align:right;
			height:20px;
			-moz-box-shadow:-1px 0px 10px #000;
			-webkit-box-shadow:-1px 0px 10px #000;
			box-shadow:-1px 0px 10px #000;
		}

		span.reference a{
			color:#aaa;
			text-transform:uppercase;
			text-decoration:none;
			margin-right:10px;				
		}

		span.reference a:hover{
			color:#ddd;
		}

        .small_img img{               				width:20%;
            length:100%;
			position:fixed;
			top:70px;
			left:900px;
			z-index:-1;               
		}

		h1{
			font-size:55px;
			text-align:right;
			position:absolute;
			left:50px;
			top:180px;
			font-weight:normal;
		}

		h3{
			position:absolute;
			top:250px;
			left:50px;
			font-size:15px;
			font-weight:normal;
			z-index:99999;
			}

</style>
<!---------------CSS STYLE FORMATTING ENDS HERE ----------------------->
</head>

<body>

<!--------------SEARCH TOOL DROPDOWN STARTS HERE ------------------------>

<h3>
<form method="get" action="getlocationxyz.php"> 

<select name="type"> 
<option value="">Select property type:</option> 
<option value="ALL">All</option> 
<option value="factory">factory</option> 
<option value="house">house</option> 
<option value="condominium">condominium</option> 
</select>

<select name="location" >
<option value="">Select property location:</option> 
<option value="ALL">All</option> 
<option value="bangkok">bangkok</option> 
<option value="Patpong">Patpong</option> 
<option value="Chiang Mai">Chiang Mai</option> 
</select> 

<select name="price" >
<option value="">Select price:</option> 
<option value="ALL">All</option> 
<option value="code1">THB0 - THB50</option> 
<option value="code2">THB50 - THB100</option>
<option value="code3">THB50 - THB100</option> 
</select> 

<input type="Submit" Value="Submit">
</form> <br /> 
<div id="txtHint"><b>Property information will be listed here</b></div>  

</h3>

<!--------------SEARCH TOOL DROPDOWN ENDS HERE ------------------>

<div class="backgroundteam">     </div>        

<div class="small_img"><img src="GraphicPage1/logo.jpg" alt="background123" /></div>   

		<h1>Property Search Tool</h1>  

	<div class="oe_wrapper">
		<div id="oe_overlay" class="oe_overlay"></div>
		<ul id="oe_menu" class="oe_menu">

			<li><a href="">BUY PROPERTIES</a>                    <!---Buy Properties dropdown - main page ---->
				<div>
					<ul>
						<li class="oe_heading"></li>
                        <li><a href="#">Property Search Tool</a></li>
						<li><a href="page2.html#horror">NPA Properties</a></li>    							<li><a href="#">Auction Properties</a></li>
						<li><a href="#">Secondary Sale</a></li>
					</ul>					
				</div>
			</li>

			<li><a href="">BUYER'S GUIDE</a>         <!---Buyer's Guide dropdown - main page ---->
				<div style="left:-111px;"><!-- -112px -->
					<ul>
						<li class="oe_heading"></li>
						<li><a href="#">NPA</a></li>
						<li><a href="#">Auction</a></li>
						<li><a href="#">Secondary Sale</a></li>
					</ul>
				</div>
			</li>

			<li><a href="">LOAN PACKAGE</a>          <!---Loan Package's dropdown - main page ---->
				<div style="left:-223px;">
					<ul class="oe_full">
						<li class="oe_heading"></li>
						<li><a href="#">Loan Package</a></li>
						<li><a href="#">Loan Calculator</a></li>
					</ul>
				</div>
			</li>

			<li><a href="">CONTACT US</a>            <!---Contact Us dropdown - main page ---->
				<div style="left:-335px;">
					<ul>
						<li class="oe_heading"></li>
						<li><a href="#">Our Team</a></li>
						<li><a href="#">Query Form</a></li>
					</ul>
				</div>
			</li>			
		</ul>	
	</div>

    <div>
        <span class="reference">     <!---footer here ---->      
            <a href="#">SITE MAP</a> 
			<a href="#" target="_blank">&nbsp;&nbsp;&nbsp;TERMS AND CONDITIONS</a>    <!----&nbsp is for space between words--->
                                <a>&nbsp;&nbsp;&nbsp;ALL RIGHTS RESERVED SATHORN ASSET MANAGEMENT COMPANY @ 2011</a>
        </span>
	</div>

    <div>
        <span class="TopicIndex">     <!---topics index ---->      
            <a href="page1(5).html#">HOME &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="2" color="white"> > </font> </a>  <!-----link to main page---->

        </span>
	</div>

    <!------------------------------ The JavaScript ------------------------------------>
    //some JS here

</body>
</html>

The problem is , when i click search , the search result (together with pagination pages) is displayed in 'other webpage' (without the fancy designs in the first page). I suspect something is wrong with the ajax request or my div codes. Really appreciate if anyone can give tips or two for me to solve this 😕

akmal1981

Hi guys i did some modification :

the html page :

<html> <head> 
<script type="text/javascript"> 

function ajaxFuntion(){
	var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){      // onreadystatechange stores a function
	if(ajaxRequest.readyState == 4){                // when readyState is four means response is complete and we can get our data
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var type = document.getElementById('type').value;  // get value from HTML input
var location = document.getElementById('location').value;
var price = document.getElementById('price').value;
var queryString = "?type="+type+"&location="+location+"&price="+price;   // query string to pass information from HTML to PHP script
ajaxRequest.open("GET","getlocationxyz.php" + querystring,true);    // sending request using open method. again,  the problem could be here
ajaxRequest.send(null); 	  // send request to server
}

</script> 
</head> 

<body>  

<form method="get" action="getlocationxyz.php"> 

<select name="type"> 
<option value="">Select property type:</option> 
<option value="ALL">All</option> 
<option value="factory">factory</option> 
<option value="house">house</option> 
<option value="condominium">condominium</option> 
</select>

<select name="location" >
<option value="">Select property location:</option> 
<option value="ALL">All</option> 
<option value="bangkok">bangkok</option> 
<option value="Patpong">Patpong</option> 
<option value="Chiang Mai">Chiang Mai</option> 
</select> 

<select name="price" >
<option value="">Select price:</option> 
<option value="ALL">All</option> 
<option value="code1">THB0 - THB50</option> 
<option value="code2">THB50 - THB100</option>
<option value="code3">THB50 - THB100</option> 
</select> 

<input type="Submit" Value="Submit">
</form> <br /> 
<div id="ajaxDiv"><b>Property information will be listed here</b></div>  </body> </html>

akmal1981

this is my pagination coding locationxyz.php

<?php 
//I USED YOUR CONNECTION BUT I PREFER YOU GET FAMILIER WITH PDO 
$con = mysql_connect('localhost', 'root', ''); 
if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db("a_database", $con); 


//LITTLE BIT OF VALIDATION IF USER ACCESS THE PAGE WITHOUT TYHE GET PARAMETERS 
$gType = isset($_GET['type']) ? $_GET['type'] : 'ALL'; 
$gLocation = isset($_GET['location']) ? $_GET['location'] : 'ALL'; 
$gPrice = isset($_GET['price']) ? $_GET['price'] : 'ALL'; 
$gHref="ContactUs_OurTeam(2).html#"; 

//GOT RID OF ALL THE IF CONDITIONS. IF THE VALUES ARE NOT EQUAL TO 'ALL', USE THEM IN THE QUERY 

$subQuery = array(); 

if($gType <> 'ALL') 
    $subQuery[] = 'type = \''.$gType.'\'';     

if($gLocation <> 'ALL') 
    $subQuery[] = 'location = \''.$gLocation.'\'';     

if($gPrice <> 'ALL') 
    $subQuery[] = 'price = \''.$gPrice.'\'';     


$sql = "SELECT count(*) FROM property"; 

if(count($subQuery) > 0) 
    $sql .= ' WHERE '.implode('AND ', $subQuery); 

$result = mysql_query($sql,$con) or trigger_error("SQL",E_USER_ERROR); 
$r=mysql_fetch_row($result); 
$numrows = $r[0]; 
$rowsperpage = 2; 
$totalpages = ceil($numrows/$rowsperpage); 
$currentpage = isset($_GET['currentpage']) ? $_GET['currentpage'] : 1;     

$offset = ($currentpage - 1) * $rowsperpage; 

$centerPages = ""; 
$paginationDisplay = ""; 

//SIMPLYFIED YOUR CODE JUST INTO ONE FOR LOOP 
for($page = 1; $page <= $totalpages; $page++) 
{ 
     if ($page == $currentpage) 
          $centerPages .= '&nbsp; <span class="pagNumActive">'.$page.'</span>'; 
     else 
          /*$centerPages .= '&nbsp; <a href="test.php?currentpage='.$page.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'">'.$page.'</a>'; */
		  $centerPages .= '&nbsp; <a href="getlocationxyz.php?currentpage='.$page.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'">'.$page.'</a>'; 
		  /*$centerPages .= '&nbsp; <a href="akmal.html?currentpage='.$page.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'">'.$page.'</a>';*/ 
} 

if ($totalpages != 1) { 

$paginationDisplay .= 'Page <strong>' . $currentpage . '</strong> of ' . $totalpages. '&nbsp;  &nbsp;  &nbsp; '; // instead of $pn insert $currentpage 

if ($currentpage != 1) { 
    $previous = $currentpage - 1;       
    /*$paginationDisplay .=  '&nbsp;<a href="test.php?currentpage='.$previous.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'"> Back</a>';*/ 
	$paginationDisplay .=  '&nbsp;<a href="getlocationxyz.php?currentpage='.$previous.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'"> Back</a>'; 
	/*$paginationDisplay .=  '&nbsp;<a href="akmal.html?currentpage='.$previous.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'"> Back</a>';*/
} 

$paginationDisplay .= '<span class="paginationNumbers">' . $centerPages . '</span>';    

if ($currentpage != $totalpages) { 
    $nextPage = $currentpage + 1; 
    /*$paginationDisplay .=  '&nbsp;<a href="test.php?currentpage='.$nextPage.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'"> Next</a>';*/ 
	$paginationDisplay .=  '&nbsp;<a href="getlocationxyz.php?currentpage='.$nextPage.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'"> Next</a>'; 
	/*$paginationDisplay .=  '&nbsp;<a href="akmal.html?currentpage='.$nextPage.'&type='.$gType.'&location='.$gLocation.'&price='.$gPrice.'"> Next</a>';*/ 
} 
} 
?> 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<style type="text/css"> 
.pagNumActive { 
    color: #000; 
    border:#060 1px solid; 
    background-color: #D2FFD2; 
    padding-left:3px; 
    padding-right:3px; 
} 
.paginationNumbers a:link { 
    color: #000; 
    text-decoration: none; 
    border:#999 1px solid; 
    background-color:#F0F0F0; 
    padding-left:3px; 
    padding-right:3px; 
} 
.paginationNumbers a:visited { 
    color: #000; 
    text-decoration: none; 
    border:#999 1px solid; 
    background-color:#F0F0F0; 
    padding-left:3px; 
    padding-right:3px; 
} 
.paginationNumbers a:hover { 
    color: #000; 
    text-decoration: none; 
    border:#060 1px solid; 
    background-color: #D2FFD2; 
    padding-left:3px; 
    padding-right:3px; 
} 
.paginationNumbers a:active { 
    color: #000; 
    text-decoration: none; 
    border:#999 1px solid; 
    background-color:#F0F0F0; 
    padding-left:3px; 
    padding-right:3px; 
} 
</style> 
<body> 
<?php 
if($numrows == 0) 
    echo 'No Records found'; 
else 
{ 
?> 
    <br> current page: <?php echo $currentpage; ?> <br> 
    <div style="margin-left:64px; margin-right:64px;"> 
      <h2>Total Items: <?php echo $numrows ; ?></h2> 
    </div> 
    <div style="margin-left:58px; margin-right:58px; padding:6px; background-color:#FFF; border:#999 1px solid;"><?php echo $paginationDisplay; ?></div> 
    <div style="margin-left:64px; margin-right:64px;"> 
    <?php 
    $sql = 'SELECT Type,Price1,Location FROM property'; 

if(count($subQuery) > 0) 
    $sql .= ' WHERE '.implode('AND ', $subQuery); 

$sql .= ' LIMIT '.$offset.','.$rowsperpage; 

$result = mysql_query($sql); 
?> 
  $display_string = "<table border='1'>"; 
    $display_string .= <tr> 
    $display_string .=  <th>Type</th> 
    $display_string .=  <th>Price</th> 
    $display_string .=  <th>Location</th> 
    $display_string .=</tr> 
    <?php 
     while($row = mysql_fetch_array($result)) { 
    $display_string .= "<tr>"; 
    $display_string .= "<td><a href='$gHref'>" . $row['Type'] . "</a></td>"; 
    $display_string .= "<td>" . $row['Price1'] . "</td>"; 
    $display_string .= "<td>" . $row['Location'] . "</td>"; 
     $display_string .= "</tr>"; 
    } 
?> 
 $display_string .= "</table>";
	echo $display_string;
</div> 
<div style="margin-left:58px; margin-right:58px; padding:6px; background-color:#FFF; border:#999 1px solid;"><?php echo $paginationDisplay; ?></div> 
<?php 
} 
?> 
</body> 
</html>

I've read a few tutorials on ajax but still not sure what went wrong here please help help helpppppppp !

niroshan

Hi akmal1981,

you have to do several changes on both HTML and php pages to get this works.

HTML Changes

<html> 
<head> 
<script type="text/javascript"> 

//Changes:: add a parameter to get the pagin working

function ajaxFuntion(p){ 
    var ajaxRequest;  // The variable that makes Ajax possible! 

try{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    // Internet Explorer Browsers 
    try{ 
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
        try{ 
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e){ 
            // Something went wrong 
            alert("Your browser broke!"); 
            return false; 
        } 
    } 
} 
// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){      // onreadystatechange stores a function 
    if(ajaxRequest.readyState == 4){                // when readyState is four means response is complete and we can get our data 
        var ajaxDisplay = document.getElementById('ajaxDiv'); 
        ajaxDisplay.innerHTML = ajaxRequest.responseText; 
    } 
} 
var type = document.getElementById('type').value;  // get value from HTML input 
var location = document.getElementById('location').value; 
var price = document.getElementById('price').value; 

  //Changes: Add the currentpage parameter to the get array and use p as its value

var queryString = "?type="+type+"&location="+location+"&price="+price+"&currentpage="+p;   // query string to pass information from HTML to PHP script 
ajaxRequest.open("GET","getlocationxyz.php" + querystring,true);    // sending request using open method. again,  the problem could be here 
ajaxRequest.send(null);       // send request to server 
} 

</script> 
</head> 

<body>   

<!-- Changes: Remove form since its all AJAX based -->
<!-- <form method="get" action="getlocationxyz.php"> -->

<!-- Changes: Add the ID property for all the HTML elements otherwise your 'document.getElementById' function will fail -->

<select name="type" id="type"> 
<option value="">Select property type:</option> 
<option value="ALL">All</option> 
<option value="factory">factory</option> 
<option value="house">house</option> 
<option value="condominium">condominium</option> 
</select> 

<select name="location" id="location"> 
<option value="">Select property location:</option> 
<option value="ALL">All</option> 
<option value="bangkok">bangkok</option> 
<option value="Patpong">Patpong</option> 
<option value="Chiang Mai">Chiang Mai</option> 
</select> 

<select name="price" id="price" > 
<option value="">Select price:</option> 
<option value="ALL">All</option> 
<option value="code1">THB0 - THB50</option> 
<option value="code2">THB50 - THB100</option> 
<option value="code3">THB50 - THB100</option> 
</select> 

<!-- Changes: convert submit button to normal button since we only need onclick event -->
<input type="button" Value="Submit" onclick="ajaxFuntion(1)"> 
 <br /> 
<div id="ajaxDiv"><b>Property information will be listed here</b></div>  </body> </html>

PHP changes

<?php 
//I USED YOUR CONNECTION BUT I PREFER YOU GET FAMILIER WITH PDO 
$con = mysql_connect('localhost', 'root', ''); 
if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db("a_database", $con); 


//LITTLE BIT OF VALIDATION IF USER ACCESS THE PAGE WITHOUT TYHE GET PARAMETERS 
$gType = isset($_GET['type']) ? $_GET['type'] : 'ALL'; 
$gLocation = isset($_GET['location']) ? $_GET['location'] : 'ALL'; 
$gPrice = isset($_GET['price']) ? $_GET['price'] : 'ALL'; 
$gHref="ContactUs_OurTeam(2).html#"; 

//GOT RID OF ALL THE IF CONDITIONS. IF THE VALUES ARE NOT EQUAL TO 'ALL', USE THEM IN THE QUERY 

$subQuery = array(); 

if($gType <> 'ALL') 
    $subQuery[] = 'type = \''.$gType.'\'';      

if($gLocation <> 'ALL') 
    $subQuery[] = 'location = \''.$gLocation.'\'';      

if($gPrice <> 'ALL') 
    $subQuery[] = 'price = \''.$gPrice.'\'';      


$sql = "SELECT count(*) FROM property"; 

if(count($subQuery) > 0) 
    $sql .= ' WHERE '.implode('AND ', $subQuery); 

$result = mysql_query($sql,$con) or trigger_error("SQL",E_USER_ERROR); 
$r=mysql_fetch_row($result); 
$numrows = $r[0]; 
$rowsperpage = 2; 
$totalpages = ceil($numrows/$rowsperpage); 
$currentpage = isset($_GET['currentpage']) ? $_GET['currentpage'] : 1;      

$offset = ($currentpage - 1) * $rowsperpage; 

$centerPages = ""; 
$paginationDisplay = ""; 

//SIMPLYFIED YOUR CODE JUST INTO ONE FOR LOOP 
for($page = 1; $page <= $totalpages; $page++) 
{ 
     if ($page == $currentpage) 
          $centerPages .= '&nbsp; <span class="pagNumActive">'.$page.'</span>'; 
     else 
          $centerPages .= '&nbsp; <a href="javascript:ajaxFuntion('.$page.');">'.$page.'</a>';  

} 

if ($totalpages != 1) { 

$paginationDisplay .= 'Page <strong>' . $currentpage . '</strong> of ' . $totalpages. '&nbsp;  &nbsp;  &nbsp; '; // instead of $pn insert $currentpage

if ($currentpage != 1) { 
    $previous = $currentpage - 1;        
    $paginationDisplay .=  '&nbsp;<a href="javascript:ajaxFuntion('.$previous.');"> Back</a>';        
} 

$paginationDisplay .= '<span class="paginationNumbers">' . $centerPages . '</span>';     

if ($currentpage != $totalpages) { 
    $nextPage = $currentpage + 1;         
    $paginationDisplay .=  '&nbsp;<a href="javascript:ajaxFuntion('.$nextPage.');"> Next</a>';
} 
} 


if($numrows == 0) 
    echo 'No Records found'; 
else 
{ 
?> 
    <br> current page: <?php echo $currentpage; ?> <br> 
    <div style="margin-left:64px; margin-right:64px;"> 
      <h2>Total Items: <?php echo $numrows ; ?></h2> 
    </div> 
    <div style="margin-left:58px; margin-right:58px; padding:6px; background-color:#FFF; border:#999 1px solid;"><?php echo $paginationDisplay; ?></div>
    <div style="margin-left:64px; margin-right:64px;"> 
    <?php 
    $sql = 'SELECT Type,Price1,Location FROM property'; 

if(count($subQuery) > 0) 
    $sql .= ' WHERE '.implode('AND ', $subQuery); 

$sql .= ' LIMIT '.$offset.','.$rowsperpage; 

$result = mysql_query($sql); 
?> 
  $display_string = "<table border='1'>"; 
    $display_string .= <tr> 
    $display_string .=  <th>Type</th> 
    $display_string .=  <th>Price</th> 
    $display_string .=  <th>Location</th> 
    $display_string .=</tr> 
    <?php 
     while($row = mysql_fetch_array($result)) { 
    $display_string .= "<tr>"; 
    $display_string .= "<td><a href='$gHref'>" . $row['Type'] . "</a></td>"; 
    $display_string .= "<td>" . $row['Price1'] . "</td>"; 
    $display_string .= "<td>" . $row['Location'] . "</td>"; 
     $display_string .= "</tr>"; 
    } 
?> 
 $display_string .= "</table>"; 
    echo $display_string; 
</div> 
<div style="margin-left:58px; margin-right:58px; padding:6px; background-color:#FFF; border:#999 1px solid;"><?php echo $paginationDisplay; ?></div>
<?php 
} 
?>

If you closely look at my php code youll see I have removed all the unnecessary html tags (<head>, <body>..etc) This file should only have the content part. Otherwise when this content added the main page (after ajax call) youll get duplicate <head>, <body> tags.

Please remember I haven`t test this code but it should work fine. please post any problems...

Please check the code and undestand it without just copy and pasting it to your code.

Thanks,
best regards,
niroshan

akmal1981

magicccccccccc !!!!!!!!! thanks man it's really working perfectly (after a few tries, i fumbled on simple things like cap letter, spelling etc haha )

Owe you big time , if you are in Bangkok please drop me a pm will bring you around for delicious food !

there are many things i dont understand actually (the code) . Just knew what it does overall but definitely will put more effort to learn the details thanks 1000 times !