Sep 11, 2011

Fully AJAX Alphabetical Sorting | Sorting Titles Alphabetical Using AJAX

AJAX? What the hell is AJAX? In short, the script which fetches data from database without refreshing the page is AJAX. AJAX's full form is Asynchronous JavaScript And XML. The best AJAX example you can find is GMAIL.

OK, so today I am sharing with you a tutorial where with the help of AJAX you will call all titles from the database and display it in Alphabetical order.

First, we will create a database, in my case its ci. inside it we will create two fields ID and title. Give ID as primary key and set it to auto increment.

Then fill the tables with some dummy data.

After that make a folder named as ajax and create following files in it.

  1. newContent.php

  2. index.php

Now Open index.php and paste the following code in it:-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
<title>WebsTutorial Fully AJAX Sorting</title>
<style type="text/css">

cursor: pointer;
#content1{border:2px solid #e7e7e7; background:#e3e3e3;padding:8px;
background-position:left top;

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

jQuery(function($) {
$(document).ready(function() {
$(".letter").bind('click', function(){
$("#Loading").fadeIn(); //show when submitting
var val = $(".letter").val;

$("#Loading").fadeOut('fast'); //hide when data's ready

<div id="ajax">

<div id="Loading"><img src="loader.gif" /></div>
<div id="content"></div>


In the above code, rest is just basic HTML but the main thing is AJAX calling.

  • First we are creating a function where, onclick event of letter class, a variable is declared and the clicked letter value is stored in newly created variable.

  • Then we call AJAX and pass the variable to the newContent.php file.

  • newContent.php file takes the value and checks into database and returns back database value to the AJAX function.

  • Then finally database passed value is displayed in #content div.

Now we will write some code in newContent.php file.

Paste the following code in it:-

echo $_GET['letter'];
echo '<br>';
echo '<br>';
$getLetter = $_GET['letter'];

$con = mysql_connect('localhost', 'root', '');
mysql_select_db("ci", $con);
$result = mysql_query('SELECT * FROM test where title LIKE "'.$getLetter.'%"');

while($row = mysql_fetch_array($result))
echo $row['title'] . '<br>';


  • First we store the value of letter passed from AJAX to a variable named as $getLetter.

  • Then we open a connection to the database, please edit this piece of code according to your database name, user and password.

  • After opening the connection, we fire a SQL query where we state, fetch all the title where the first letter starts from $getLetter.

  • As it will return in array, so we will split it with the help of while loop.

  • Done the echoed value will be displayed in the index.php file.

This tutorial explain how basic AJAX works, you will find that in some place the image loading code is written, thats nothing but a loading image, which will appear when data is heavy and takes time to fetch.

Final Output:




  1. thank you ..its working successfully..

  2. can iget like this one..but advanced.

  3. I have been looking for this for long... thanks a lot...
    one question... I want my users to see the titles already listed on the page? Then they will also have the option to click on each letter.... how can I do that? for example like this?

  4. The example in this tutorial will function exactly same what you want. Just give it a try

  5. Really useful THANKS! but I'm having a problem trying to make it work. Where do I say what table from the database I want it to get the info from (title and ID)? Thanks (I'm just starting with php as mysql)

  6. Why doesn't it work with internationacion characters (ç, í, á, ñ,...)?