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:



JQuery Color Changing Background | JQuery Continous Color Change | JQuery Rainbow

In today's tutorial, I am going to share an easy way to change the background color of a page in infinite loops. In other words, change the background to rainbow.

Concept:The actual logic behind changing the color in infinite loops, is to get infinite colors. So trick is simple, take a RGB pattern and keep on changing the color code. So for that a logic of RGB code is written in jquery.color.js

So the index javascript consists of two major codes.


var rainbow = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';


We are creating a variable named as rainbow and setting its value to rgb(random numbers). They are calculated and by using math.round and math.floor functions, the decimals are removed from it.

The last important thing is to append the color to the background of an HTML element.

$('#welcome').animate( { backgroundColor: rainbow }, 1000);
The most important thing is how to get into infinite loops?????

Simple, within the function declare the same function, which will give us infinite loop.

So the entire javascript function will be.

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {


function spectrum(){
var rainbow = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#welcome').animate( { backgroundColor: rainbow }, 1000);

// ]]></script>

Sep 2, 2011

Wordpress Show Excerpt Of Child Page | How To Show Excerpt Of Child Pages On Parent Page Of Wordpress

Today in this tutorial I am going to share a wordpress hack, which will show your child pages excerpts with title on the parent page.

OK, it was confusing, let me explain you.
Suppose you have  5 pages, which has a single parent page. If you want to show all the 5 sub pages on the Parent page, then you have to use this code.

Open your page.php file and paste this code after the loop.

$child_pages = $wpdb->get_results("SELECT *  FROM $wpdb->posts WHERE post_parent = ".$post->ID."   AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); ?>
<?php if ( $child_pages ) : foreach ( $child_pages as $pageChild ) : setup_postdata( $pageChild ); ?>
<div style="border:1px solid #e7e7e7;margin: 10px;padding: 10px;">
<h2><a href="<?php echo  get_permalink($pageChild->ID); ?>" title="<?php echo $pageChild->post_title; ?>"><?php echo $pageChild->post_title; ?></a></h2>
$your_custom_field = get_post_meta($pageChild->ID, 'your_custom_field', $single = true);
<?php the_excerpt();?>
<p style="text-align:right;"><a href="<?php echo  get_permalink($pageChild->ID); ?>" rel="bookmark" title="<?php echo $pageChild->post_title; ?>">Read More...</a></p>
<?php endforeach;