Data Searching Without Page Refresh (with Loader, jQuery and AJAX)

Photo of Mike Dalisay
Modified Tuesday, November 16, 2010
by - @ninjazhai
It will be very convenient for the users of your web application if you can load more data from the database without refreshing the whole page.

Users don't have to wait for those web contents such as images, text, flash files, etc. to load because the app will refresh only a part of a web page. Thanks to AJAX group of technologies (AJAX in not a technology in itself).

Data Searching Without Page Refresh (With Loader)
Cool Searching

Today I'm gonna show you a data searching example without refreshing a page:
1. User will input a name on the textbox.
2. User can click the search button or just simply press enter to start search.
3. A loader image will be shown.
4. Loader image will hide when search result comes in.


 In this tutorial, we will need five files:

js/jquery-1.4.2.min.js - the main weapon
images/ajax-loader.gif - loader image (animated ofcourse)
config_open_db.php - for database connection
index.php - read below
search_results.php - read below

Step 1: We should have the following table structure. Just insert your own data.
CREATE TABLE `users` (
   `id` int(11) not null auto_increment,
   `firstname` varchar(32) not null,
   `lastname` varchar(32) not null,
   `email` varchar(32),
   `username` varchar(32) not null,
   `password` varchar(32) not null,
   PRIMARY KEY (`id`)

Step 2: We will have the user interface here in our index.php file with these codes:

    <title>Data Searching Without Page Refresh</title>
we will preload the loader image 
to show it instantly on search 
<div style='display:none;'>
    <img src="images/ajax-loader.gif" />

<form name = "form">
    <div>Enter name then click the Search Button or just press Enter</div>
    <!-- where our search value will be entered -->
    <input type="text" name="name" id="fn" />
    <!-- This button will call our JavaScript Search functions -->
    <input type="submit" value="Search" id="search-btn" />

<div id = "s-results">
    <!-- This is where our search results will be displayed -->

<!-- import jQuery file -->
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>

<script type = "text/javascript">
    //load the current contents of search result
    //which is "Please enter a name!"
//Triggered when user click search button
$('#search-btn').click(function(){ showValues(); });
//Triggered when user press enter
$(function() { $('form').bind('submit',function(){ showValues(); return false; }); }); function showValues() { //loader will be show until result from //search_results.php is shown $('#s-results').html('<p><img src="images/ajax-loader.gif" /></p>'); //this will pass the form input $.post('search_results.php', { name: }, //then print the result function(result){ $('#s-results').html(result).show(); }); } }); </script> </body> </html>

Step 3: This search_results.php file gets the request from our interface and then returns a result that will be displayed on the interface (index.php) too.


//define index
isset( $_REQUEST['name'] ) ? $name=$_REQUEST['name'] : $name='';

// just to escape undesirable characters
$name = mysql_real_escape_string( $name );

if( empty( $name )){
    // this will be displayed if search value is blank
    echo "Please enter a name!";
    // this part will perform our database query
    $sql = "select * from users where firstname like '%$name%'";

    $rs = mysql_query( $sql ) or die('Database Error: ' . mysql_error());
    $num = mysql_num_rows( $rs );
    if($num >= 1 ){
        // this will display how many records found
        // and also the actual record
        echo "<div style='margin: 0 0 10px 0; font-weight: bold;'>$num record(s) found!</div>";
        while($row = mysql_fetch_array( $rs )){
            echo "<div>" . $row['firstname'] . " " . $row['lastname'] ."</div>";
        // if no records found
        echo "<b>Name not found!</b>";
Cool huh?

The Code of a Ninja Resources

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.