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.
- newContent.php
- index.php
Now Open index.php and paste the following code in it:-
[html]
<!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" xml:lang="en" lang="en">
<head>
<title>WebsTutorial Fully AJAX Sorting</title>
<style type="text/css">
.letter{
cursor: pointer;
text-decoration:underline;
font-size:18px;
text-transform:uppercase;
font-family:tahoma;
padding:2px;
}
#ajax{padding:10px;
background:#e9e9e9;
width:190px;
height:auto;
}
#content1{border:2px solid #e7e7e7; background:#e3e3e3;padding:8px;
width:190px;
height:auto;
text-transform:uppercase;
background-image:url("grey-gradient.jpg");
background-repeat:repeat-x;
background-position:left top;
}
#Loading{}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$("#Loading").hide();
$(".letter").bind('click', function(){
$("#Loading").fadeIn(); //show when submitting
var val = $(".letter").val;
$.ajax({
url:'newContent.php?letter='+$(this).html(),
success:function(data){
$("#Loading").fadeOut('fast'); //hide when data's ready
$("#content").html(data);
}
});
});
});
});
</script>
<div id="ajax">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span><br>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span><br>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
<span>#</span>
</div>
<div id="Loading"><img src="loader.gif" /></div>
<div id="content"></div>
</html>
[/html]
Explanation:-
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:-
[php]
<?php
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>';
}
?>
[/php]
Explanation:
- 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:
