how can i use Ajax and Jquery to my code - php

Question

i am very new to Ajax and jquery.
I have already post my queston here
How can i use ajax with javascript function
but not clear to me,so i have paste my all code.
i am using the following javascript function to get the value from the list those user selected from list and pass this value to sql query to display products.
i am trying to reaload only products.
but using this function each time the page is reloading. i am trying to use ajax using this function.how can i use ajax with this need syntax.
In this 3 things Reaload my whole page are 1)Search form 2)sort by 3)view on page(limit)
<?php
/*
Template Name:Wheel
*/
?>
<?php get_header(); ?>
<script type="text/javascript" language="javascript">
function pagelim(index){
var page_lim=$('#page_num li').get(index).id;
$("#main-content-wrap").load("<?php echo get_option('head'); ?>"+'?wheel&limit=' + page_lim);
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index){
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
self.location="<?php echo get_option('head'); ?>"+'?wheel&sort=' + date_by ;
}
</script>
<script type="text/javascript" language="javascript">
onLoad(){
//search-option_form.removeClass('jqtransformdone');
}
</script>
<?php
$sort_by=$_GET['sort'];
if($sort_by=="")
{
$sort_by="ASC";
}
else
{
$sort_by=="DESC";
}
$page = (get_query_var('page')) ? get_query_var('page') : 1;
$lim=$_GET['limit'];
if($lim=="")
$limit = 1;
else
$limit =$lim;
$offset = ( $page - 1 ) * $limit;
if(isset($_POST['searchsubmit']))
{
$i=1;
$search_query="SELECT * FROM wp_products WHERE 1";
if($_POST['rim_size']!=0)
{$search_query=$search_query." AND rim='".$_POST['rim_size']."'"." ";}
if($_POST['studs']!=0)
{$search_query=$search_query." AND studs='".$_POST['studs']."'"." ";}
if($_POST['miles']!=0)
{
$value=$_POST['miles']-5000;
$search_query=$search_query." AND miles BETWEEN $value AND ". $_POST['miles']." ";
}
if(($_POST['min_price']!=0)&&($_POST['max_price']!=0))
{
$search_query=$search_query." AND "."price BETWEEN ". $_POST['max_price']." AND ".$_POST['min_price']." ";
}
$search_query=$search_query." LIMIT $offset,$limit";
$data=$wpdb->get_results($search_query);
}//if ends
else{$data = $wpdb->get_results("select * from wp_products order by product_id $sort_by
LIMIT $offset,$limit ");}
?>
<div class="main noborder" >
<div id="main-content-wrap">
<!-- - - - - - - - - - - - - - - Container - - - - - - - - - - - - - -
- - -->
<section class="container sbr clearfix left-section">
<!-- - - - - - - - - - - - - - - Content - - - - - - - - - - - - - - -
- -->
//here is search box
<div class="widget_custom_search">
<h3 class="widget-title"><span>Search</span> Filters</h3>
<form method="post" id="search-option-form" class="form-panel">
<fieldset>
<label>Rim Size</label>
<select name="rim_size" class="width-190">
<option value="0" >Select</option>
<option value="15" <?php if($_POST['rim_size']=="15") { ?> selected="selected" <?php } ?>>15 Inch</option>
<option value="16" <?php if($_POST['rim_size']=="16") { ?> selected="selected" <?php } ?>>16 Inch</option>
<option value="17" <?php if($_POST['rim_size']=="17") { ?> selected="selected" <?php } ?>>17 Inch</option>
<option value="18" <?php if($_POST['rim_size']=="18") { ?> selected="selected" <?php } ?>>18 Inch</option>
<option value="19" <?php if($_POST['rim_size']=="19") { ?> selected="selected" <?php } ?>>19 Inch</option>
</select>
</fieldset>
<fieldset>
<label>No. of Studs</label>
<select name="studs" class="width-190">
<option value="0">Select</option>
<option value="3" <?php if($_POST['studs']=="3") { ?> selected="selected" <?php } ?> >3</option>
<option value="4" <?php if($_POST['studs']=="4") { ?> selected="selected" <?php } ?> >4</option>
</select>
</fieldset>
<fieldset>
<span class="w110p floatLeft display-block">
<label>Min Price</label>
<select name="min_price" class="floatLeft">
<option value="0">Select</option>
<option value="1000" <?php if($_POST['min_price']=="1000") { ?> selected="selected" <?php } ?> >1000</option>
<option value="2000" <?php if($_POST['min_price']=="2000") { ?> selected="selected" <?php } ?>>2000</option>
['min_price']=="6000") { ?> selected="selected" <?php } ?>>6000</option>
</select>
</span> <span class="w110p floatLeft display-block">
<label>Max Price</label>
<select name="max_price" class="floatLeft">
<option value="0">Select</option>
<option value="1000" <?php if($_POST['max_price']=="1000") { ?> selected="selected" <?php } ?>>1000</option>
<option value="2000" <?php if($_POST['max_price']=="2000") { ?> selected="selected" <?php } ?>>2000</option>
<option value="3000" <?php if($_POST['max_price']=="3000") { ?> selected="selected" <?php } ?>>3000</option>
</select>
</span>
</fieldset>
<fieldset>
<label>Miles</label>
<select name="miles" class="width-190">
<option value="0">Select</option>
<option value="5000" <?php if($_POST['miles']=="5000") { ?> selected="selected" <?php } ?>>5000</option>
<option value="10000" <?php if($_POST['miles']=="10000") { ?> selected="selected" <?php } ?>>10000</option>
<option value="60000" <?php if($_POST['miles']=="60000") { ?> selected="selected" <?php } ?>>60000</option>
<option value="65000" <?php if($_POST['miles']=="65000") { ?> selected="selected" <?php } ?>>65000</option>
<option value="70000" <?php if($_POST['miles']=="70000") { ?> selected="selected" <?php } ?>>70000</option>
</select>
</fieldset>
<fieldset class="top-padding-30">
<button name="searchsubmit" type="submit" id="searchsubmit" class="common-button green-button-bg w90p floaL mLeft5">SEARCH</button>
</fieldset>
</form>
<!--/ .form-panel-->
</div>
</section>
<!--/.container -->
<!-- - - - - - - - - - - - - end Container - - - - - - - - - - - - - -
- - -->
<section class="container clearfix right-section">
<div id="pagination-sort-lniks">
<?php
$total=$wpdb->get_results("select * from wp_products ");
$pages = COUNT($total);
$pages = ceil($pages / $limit);
$querystring = "";
foreach ($_GET as $key => $value) {
if ($key != "page") $querystring .= "$key=$value&";
}
// Pagination
?>
<?php if($sort_by=="ASC")
$class="up-arrow";
else
$class="down-arrow";
//here to select sort by and view on page ?>
<div class="sort-links"><span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
<div class="pagination">
<?php
if( $pages > 1)
{
$range=1;
$showitems = ($range * 2)+1;
$page1=$page;
$prev=$page1-1;
if($page > 1)
{
echo "<a class=\"page gradient\" ";
echo "href=\"?{$querystring}page=$prev";
echo "\">Previous</a> ";
}
for ($i = 1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $page+$range+1 || $i <= $page-$range-1) || $pages <= $showitems ))
{
if($i == $page)
{
echo "<span class=\" page active\">".$i."</span>";
}
else
{
echo "<a class=\"page gradient\"";
echo "href=\"?{$querystring}page=$i";
echo "\">$i</a> ";
}
}
}
if($page!=$pages)
{
if($showitems < $pages)
{
echo "..... ";
}
$page1=$page;
$next=$page1+1;
echo "<a " . ($i == $page ? "class=\"page active\" " : "class=\"page gradient\"");
echo "href=\"?{$querystring}page=$next";
echo "\">Next</a> ";
}
}
?>
</div>
</div>
<?php
$tim_path = get_bloginfo('template_directory')."/scripts/timthumb.php?src=";
if(count($data)>0)
{
foreach($data as $row)
{
$userid = $row->dealer_id;
$metakey="addr1";
$prod_id = $row->product_id;
$image=$wpdb->get_results("select DISTINCT(product_id),prod_image from wp_product_images where product_id=$prod_id LIMIT 1");
foreach($image as $row1)
{
$image_name = $row1->prod_image;
}
?>
<?php $location=get_usermeta( $userid, $metakey ); ?>
<ul class="product-wrap" id="product-wrap">
<li><a href="#" class="current details-link" ><img src="<?php _e($tim_path) ?><?php bloginfo('template_directory');?>/product_images/<?php _e($image_name."&w=140&h=105&zc=0&watermark=0") ?>" class="thumb" alt=""/>
<?php if($row->bestdeal==1)
{?>
<span class="best-deal-icon right100" ></span> <?php }?>
</a>
<div class="product-title clearfix">
<h3 class="textBold"><?php _e($row->product_name) ?></h3>
<span class="product-price bTextColor"><?php _e($row->price)?></span> </div>
<div class="tech-details"> <span class="span1">Technical details : </span> <span class="span2"><?php _e($row->rim) ?>"</span> <span
class="span3"><?php _e($row->studs) ?>Studs</span> <span class="span4"><?php _e($row->colour) ?></span>
<span class="span5"><?php _e($row->miles) ?>Mil</span> </div>
<div class="location-details" style=""> <span class="location-display">Location : <?php _e($location) ?> </span> <span
class="view-details">View details </span> </div>
</li>
</ul>
<?php }
}
else
{
echo '<div class="no_records">Sorry!!No Products Found You Can Search Another. </div>';
}
?>
<!--/ .adjective-->
<div id="pagination-sort-lniks">
<div class="pagination">
<?php
if( $pages > 1)
{
$range=1;
$showitems = ($range * 2)+1;
$page1=$page;
$prev=$page1-1;
if($page > 1)
{
echo "<a class=\"page gradient\" ";
echo "href=\"?{$querystring}page=$prev";
echo "\">Previous</a> ";
}
for ($i = 1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $page+$range+1 || $i <= $page-$range-1) || $pages <= $showitems ))
{
if($i == $page)
{
echo "<span class=\" page active\">".$i."</span>";
}
else
{
echo "<a class=\"page gradient\"";
echo "href=\"?{$querystring}page=$i";
echo "\">$i</a> ";
}
}
}
if($page!=$pages)
{
if($showitems < $pages)
{
echo "..... ";
}
$page1=$page;
$next=$page1+1;
echo "<a " . ($i == $page ? "class=\"page active\" " : "class=\"page gradient\"");
echo "href=\"?{$querystring}page=$next";
echo "\">Next</a> ";
}
}
?>
</div>
</div>
</section>
</div>
</div>
<!--/ .main-->
<?php get_footer();?>

Answer 1

With Jquery/Ajax the execution flow is different, let me try to explain:
PHP is executed on the server, after the execution the result is pure HTML+CSS+javascript. This result is then send to the client, where the browser will display it.
So what you are doing here is calling the same PHP multiple times, and depending of the variables you pass to it you generate diferent HTML+CSS+javascript results.
So how would this work if we add Jquery/Ajax?
You would call your PHP once, the result generated HAS to contain the Jquery/Ajax code in the head tag. (you need the jquery JS file added as a script tag). When the user decides to do a sort you don't call the entire PHP script again. You should call a second PHP script, dedicated to only return the HTML part you want to refresh. Here's a example:
$.post("returnhtml.php", {var1: var1, var2: var2}, function(data){
// the var data contains everything "returnhtml.php" echoed
$("#div_we_want_to_refresh_id").html(data);
});
Hope this helped.