Load data after search function using ajax in one php page

Question

I'm new with ajax and php. I had created a page where it loads the data using ajax. The data is shown using pagination. The thing is, I can't figure out on how to make the results search loading back to birds.php.

birds.php

<script type="text/javascript">
        $(document).ready(function(){
            function loading_show(){
                $('#loading').html("<img src='../~ww319/images/loading.gif'/>").fadeIn('fast');
            }
            function loading_hide(){
                $('#loading').fadeOut('fast');
            }                
            function loadData(page){
                loading_show();    
                var search = $('#search').val();                    
                $.ajax
                ({
                    type: "POST",
                    url: "../~ww319/load_data.php",
                    data: "page="+page+"&search="+search,
                    success: function(msg)
                    {
                        $("#container").ajaxComplete(function(event, request, settings)
                        {
                            loading_hide();
                            $("#container").html(msg);
                        });
                    }
                });
            }
            loadData(1);  // For first time page load default results
            $('#container .pagination li.active').live('click',function(){
                var page = $(this).attr('p');
                loadData(page);

            });
        });
</script>

<div class="entry">
<form action="../~ww319/load_data.php" method="POST">
<fieldset>
    <legend>Searching</legend><br />
    <input type="text" id="search" name="search" />
    <input type="submit" value="Search" onClick="loadData(1);" /><br /><br />
    <input type="hidden" name="page" value="1"  />
</fieldset>
</form>
<br />
<div id="loading"></div>
    <div id="container">
        <div class="data"></div>
        <div class="pagination">
</div>
    </div>
</div>

load_data.php //this is the page to load the data to birds.php

<?php
if(isset($_POST['page']))
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 2;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;

include 'connect.php';

// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");

if(isset($_POST['search'])){
$search = $_POST['search'];

$searchPar = '';
if(!empty($search)){
$searchPar = "WHERE (`species` LIKE '%".$search."%') OR (`location` LIKE '%".$search."%')";
}

$query = "SELECT * from birds $searchPar LIMIT $start, $per_page";

$result1 = mysql_query($query) or die('MySql Error' . mysql_error());
$msg = "";

    if(mysql_num_rows($result1) > 0){ 

        while($result = mysql_fetch_array($result1)){

            $msg .= "<li><img src=".$result['imgThumb']."></li>";

        }
        $msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data

 $query_pag_num = "SELECT COUNT(*) AS count FROM birds WHERE (`species` LIKE '%".$search."%') Or (`location` LIKE '%".$search."%')";
 $result_pag_num = mysql_query($query_pag_num);
 $row = mysql_fetch_array($result_pag_num);
 $count = $row['count'];
 $no_of_paginations = ceil($count / $per_page);

if ($cur_page >= 5) {
$start_loop = $cur_page - 2;
if ($no_of_paginations > $cur_page + 2)
    $end_loop = $cur_page + 2;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 4) {
    $start_loop = $no_of_paginations - 4;
    $end_loop = $no_of_paginations;
} else {
    $end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 5)
    $end_loop = 5;
else
    $end_loop = $no_of_paginations;
}

$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

if ($cur_page == $i)
    $msg .= "<li p='$i' style='color:#fff;background-color:#983D3A;' class='active'>{$i}</li>";
else
    $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}

echo $msg;
}
 else{ // if there is no matching rows do following
        $msg .= "no results found.";
        echo $msg;
}}
else{
$query_pag_data = "SELECT * from birds LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$msg .= "<li><img src=".$row['imgThumb']."></li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM birds";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

if ($cur_page >= 5) {
$start_loop = $cur_page - 2;
if ($no_of_paginations > $cur_page + 2)
    $end_loop = $cur_page + 2;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 4) {
    $start_loop = $no_of_paginations - 4;
    $end_loop = $no_of_paginations;
} else {
    $end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 5)
    $end_loop = 5;
else
    $end_loop = $no_of_paginations;
}

$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

if ($cur_page == $i)
    $msg .= "<li p='$i' style='color:#fff;background-color:#983D3A;' class='active'>{$i}</li>";
else
    $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}

echo $msg;
}
}

The search results would be shown on load_data.php instead of loading back to birds.php.

Answer 1

Try this: birds.php

<script type="text/javascript">
        $(document).ready(function(){
            function loading_show(){
                $('#loading').html("<img src='../~ww319/images/loading.gif'/>").fadeIn('fast');
            }
            function loading_hide(){
                $('#loading').fadeOut('fast');
            }                
            function loadData(page){
                loading_show();
                var search = $('#search').val();
                $.ajax
                ({
                    type: "POST",
                    url: "../~ww319/load_data.php",
                    data: "page="+page+"&search="+search,
                    success: function(msg)
                    {
                        $("#container").ajaxComplete(function(event, request, settings)
                        {
                            loading_hide();
                            $("#container").html(msg);
                        });
                    }
                });
            }
            loadData(1);  // For first time page load default results
            $('#container .pagination li.active').live('click',function(){
                var page = $(this).attr('p');
                loadData(page);

            });
        });
</script>

<div class="entry">
<form action="../~ww319/load_search.php" method="POST">
<fieldset>
    <legend>Searching</legend><br />
    <input type="text" name="search" id="search"/>
    <input type="button" value="Search" onClick="loadData(<?php $_POST['page'] ?>);" /><br /><br />
</fieldset>
</form>
<br />
<div id="loading"></div>
    <div id="container">
        <div class="data"></div>
        <div class="pagination">
</div>
    </div>
</div>

And your search query should be generated as follows:

$searchPar = '';
if(!empty($search)){
    $searchPar = "WHERE (`species` LIKE '%".$search."%') OR (`location` LIKE '%".$search."%')";
}

$query = "SELECT * from birds $searchPar LIMIT $start, $per_page";

Answer 2

why don't try this http://www.datatables.net/examples/styling/jqueryUI.html ?

it was useful for me and it implement many functionalities like instant search that you will surely like