While talking about chat application, these days people hate those kind application made in PHP which need page refreshing. In this post, I’ll show you six different free Ajax chat applications which might be very useful if you’ve to use Ajax based chat application. Depending upon the requirement of your chat application, you can use them. I might have missed another good Ajax based chat application, if you find any the please post it to the comments.

Ajax Chat from http://blueimp.net

A powerful Ajax chat application with a lot of features at free of cost. Customize the layout and Use it in your project.

Ajax- IM

It is not a only a chat application, it is a instant messenger that’s why it is named as Ajax-IM. Very useful for implementing in community based websites.

PHPfreeChat

Another great Ajax chat application build in PHP.Very easy to customize and use. You can even create rooms for chatting as well.

Chatr

Another simple ajax chat application with limited functionality built in PHP.

Ajax chat from Ajax-chat.org

Very simple, lightweight and easy to use another Ajax chat application built in PHP.

Ajax chat from Blogoscopted

Fancy and avatar based ajax chat application built in PHP. As you can see in the above image, it looks like you’re really inside a chat room for chtting.

Today, I would like to tell you how to handle character set problem which occurs during the data fetched from PHP using Ajax mainly on the western characters(European charset).Lots of people asked me about this problem where these European charset is displayed in unreadable format after fetching it from ajax.

Problem with European Charset with Ajax and PHP

Suppose that I’ve the following code in PHP file, which output the string which contain the european characters.

<?php
  $str="€-accentuée";
  echo $str;
?>

Now, let’s use the Ajax from JavaScript using Jquery Code to fetch the data from PHP.

<script type="text/javascript">
$(function()
{
  $('#charsetdiv').load("test2.php");
});
</script>
<div id="charsetdiv"></div>

If you’ve not used jQuery then you might be wondering about the ajax code, you can check the benefits of jquery from this post and download free ebook of jQuery.

After getting value from Ajax, the division with id “charsetdiv”, let’s look at the output.

?-accentu?e

Solving western Character Set problem with Ajax and PHP

The above problem is occurred because of not defining proper charset to these European characters. We can solve this problem by sending the header which define the appropriate Character Set for these characters.Let’s see, how I solve this problem just adding the header which define the charset Windows-1256 – which support Arabic as well as European characters.

<?php
  header("Content-Type: text/html; charset=Windows-1256\n");
  $str="€-accentuée";
  echo $str;
?>

After adding that header in PHP, you’ll get the appropriate european characters in your Ajax enabled application.

Yesterday Tarquin macey asked me how can we change the value of the textbox based using Ajax and PHP based on the changing value of the dropdown list.Today, I’ve come up with a solution from him.In this post, you’ll see how to get the currency code of a country from PHP using Ajax and this currency code will replace the value of textbox each time the dropdown list changes.

View Live Demo

Writing Code for changing textbox value from dropdown list using Ajax and PHP

After looking at the above demo, let’s start writing code for the changing the currency code value in the textbox form Ajax using PHP when you changes the country from the dropdown list.

HTML Code

<select name="country" onChange="getCurrencyCode('find_ccode.php?country='+this.value)">
 <option value="">Select Country</option>
	<option value="1">USA</option>
	<option value="2">UK</option>
	<option value="3">Nepal</option>
</select>
<input type="text" name="cur_code" id="cur_code" >

As you can in the above code, there are two main components one dropdown list whose name is country and contains the list country in it.The JavaScript function getCurrencyCode() is called when user change value in the list. Note down the name and id of textbox which will have the currency code fetched from Ajax.

JavaScript Code for changing textbox value without refreshing the page

function getCurrencyCode(strURL)
{
  var req = getXMLHTTP();
  if (req)
  {
	//function to be called when state is changed
	req.onreadystatechange = function()
	{
  	  //when state is completed i.e 4
	  if (req.readyState == 4)
	  {
		// only if http status is "OK"
		if (req.status == 200)
		{
			document.getElementById('cur_code').value=req.responseText;
		}
		else
		{
			alert("There was a problem while using XMLHTTP:\n" + req.statusText);
		}
	  }
        }
	req.open("GET", strURL, true);
	req.send(null);
  }
}

In the first line of the above code, the XMLHTTPRequest object is created using getXMLHTTP() function. To look at the the structure of this function, take a look at this old post change the value of dropdown list using Ajax and PHP . After checking the appropriate value of readystate(4 means completed) and status(200 means ok) property of XMLHTTPRequest object, the value of textbox is replaced with the returned value from PHP using Ajax . The response ,which is can be accessed via req.responseText property, is written to textbox via the value property of textbox.

PHP code for changing the value of textbox using Ajax and PHP

<?php
$country=$_REQUEST['country'];
switch($country)
{
	case "1" :
		echo "USD";
		break;
	case "2" :
		echo "GBP";
		break;
	case "3" :
		echo "NPR";
		break;
}
?>

As you can see the above PHP code, it is fairly simple which just print the currency code value according to the name of country. The value which is in the echo statement is going to returned from PHP via Ajax.

Download Full Source Code

In last poll, Many people supported Zend Framework as the first choice for the PHP developments. And, today I would like to announce the result of the poll “which is the best JavaScript and Ajax framework ?” I would like to thanks all of you 690 voters who has participated in this poll. Today, I’ve no hesitation on saying that jQuery is the most popular and leading choice of web developer as a JavaScript and Ajax framework.

You can look at the poll result below. There is no dispute that  John Resig’s JavaScript library (jQuery) is their first choice as 52% web developers have voted for this library. In this blog, I’ve also posted many jQuery tutorials, Check them out .

[poll id="2"]

Last time, I had published a poll asking which is the best PHP framework and in that poll Zend Framework stand out itself to be the most popular PHP framework among the PHP developers. This time ,I’ve come up with another Poll and I would you to participate in this POLL “Which is the best JavaScript and Ajax Framework?”.

There are many JavaScript and Ajax framework available in the web and I think a lot of Web developers are confused which one to begin with. Today, I would like to hear from you which is the best JavaScript Framework among the popular JavaScript framework jquery, prototype.js, mootools, Dojo and YUI.

First let’s see some facts about these framework.If you look at the google trend of these JavaScript and Ajax framework Dojo seems to be dominant in the year 2007 but jQuery seems to be popular these days.

And if you look at this Slick speed selecter test , it seems that Mootools is providing better performance than the other JavaScript frameworks. Prototype.js is one of the oldest JavaScript and Ajax framework which is widely used in many high profile websites over the Internet. Furthermore, YUI which is supported by yahoo and is another strong framework in the list.

If you ask me which one is best JavaScript framework?, My personal favorite is jQuery as you can  see lots of examples in this blog with jQuery. One plus point of jQuery is that it is supported by large community and have a very good documentaion with example in jquery.com.

But I would like to hear from you which JavaScript and Ajax Framework you recommend for other to  use in their project.

[poll id="2"]

Last time, I’ve showed you how to check user availability in Ajax using jQuery’s fading effect. But I’ve just shown the example without connecting the database and some people have faced problem with database connecting solution of that problem.In this post, I’ll show you how to use Ajax login system in php using jQuery and some animation as well.

View Demo

In this example, first of all we’ll validate the user login detail from ajax showing the messages with some animation. If authenticated, the user will be redirected to the secure page “secure.php”. If you’ll try to directly access “secure.php”, you can’t do that.

Now let’s look at the code how to do this,

HTML Code

< form method="post" action="" id="login_form" />
  < input name="username" type="text" id="username" value="" maxlength="20" />
  < input name="password" type="password" id="password" value="" maxlength="20" />
  < input name="Submit" type="submit" id="submit" value="Login" />
< /form >

As you can see in html code, we’ve created the form with id “login_form”.

And furthermore, the CSS code is same as the one available in the pervious post of checking user availability in ajax and php.

JavaScript Code for Ajax Login validation system in PHP

First of all we need to use the jQuery library in our code,

< script src="jquery.js" type="text/javascript" language="javascript"></script >

Now let’s look at the code in javaScript to call ajax and show the animated message with fading effects.

$("#login_form").submit(function()
{
	//remove all the class add the messagebox classes and start fading
	$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
	//check the username exists or not from ajax
	$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
	  if(data=='yes') //if correct login detail
	  {
		$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
		{
 		  //add message and change the class of the box and start fading
		  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
                  function()
		  {
  	  	     //redirect to secure page
		     document.location='secure.php';
		  });
		});
	  }
	  else
	  {
	  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
		{
		  //add message and change the class of the box and start fading
		  $(this).html('Your login detail sucks...').addClass('messageboxerror').fadeTo(900,1);
		});
          }
       });
       return false;//not to post the  form physically
});

As you can see above this code is preety much similar to the previous post of checking username availability in ajax and php and you can see the explanation of the above code from that post. But in above code, where the user is validated, he’ll be logged into the “secure.php” using “document.location” in JavaScript.

$("#password").blur(function()
{
	$("#login_form").trigger('submit');
});

Well, as you can see above javaScript’s code, when focus is moved away from the password it also call the for sumit action. Basically whenever you hit tab button in password field, it starts validating the user detail using ajax.

PHP Code for Ajax Login validation system

First of all lets’s look at the code of the “ajax_login.php”.

//get the posted values
$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);
$pass=md5($_POST['password']); 

//now validating the username and password
$sql="SELECT user_name, password FROM tbl_user WHERE user_name='".$user_name."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result); 

//if username exists
if(mysql_num_rows($result)>0)
{
	//compare the password
	if(strcmp($row['password'],$pass)==0)
	{
		echo "yes";
		//now set the session from here if needed
		$_SESSION['u_name']=$user_name;
	}
	else
		echo "no";
}
else
	echo "no"; //Invalid Login

As you can see above, the user login detial is validated from the database. If the user login detail doesn’t exists, it just returns the “no” values and if the user login detial does exists the it just return “yes” values with setting username in session variable.

Finally, let’s look at the code of secure.php

if(empty($_SESSION['u_name']))
  header("Location:index.html");
//if logout then destroy the session and redirect the user
if(isset($_GET['logout']))
{
  session_destroy();
  header("Location:index.html");
}
echo " <a href='secure.php?logout'><b>Logout<b></a> ";
echo " <div align='center'>You Are inside secured Page</a> ";

As you can see above the code of “secure.php” is simpleforward. If the user is not authenticated by session then he’ll be redirected to “index.html”. And there is link for “logout” in this page form where user can destroy the seession.

Download Full Source Code

Implementation Guide:

To implement this code, dump the tbl_user “table” available in the zip file to your database and configure the database connection in “ajax_login.php”.

In this post,I’ll show you how to make a fancy username availability checking in ajax and php using jquery.When, you check the the username avaiability a fancy message box will show you the message with a little bit of animation. If you are looking for such kind of effect for checking username availability, then this might be right post for you.

View Live Demo

Now let’s check it how to do check the username avaiability in ajax and php using jQuery.

Html Code :

<div >
 User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
 <span id="msgbox" style="display:none"></span>
</div>

As you can see the above the “span” with id “msgbox” will show you the username availability message from ajax.

Css code :

.messagebox{
 position:absolute;
 width:100px;
 margin-left:30px;
 border:1px solid #c93;
 background:#ffc;
 padding:3px;
}
.messageboxok{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #349534;
 background:#C9FFCA;
 padding:3px;
 font-weight:bold;
 color:#008000;
}
.messageboxerror{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #CC0000;
 background:#F7CBCA;
 padding:3px;
 font-weight:bold;
 color:#CC0000;
}

I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.

As you know you can change the attriubutes of the css of the above code but keep in mind that “position” property should be “absolute”.

Javascript code :

First of all, the jQuery library is used,

<script src="jquery.js" type="text/javascript" language="javascript"></script>

And when the focus is moved from the textbox of username the following function is called which call “user_availability.php” through ajax and display the appropriate message with fading effect.

$("#username").blur(function()
{
 //remove all the class add the messagebox classes and start fading
 $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
 //check the username exists or not from ajax
 $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
 {
  if(data=='no') //if username not avaiable
  {
   $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
   });
  }
  else
  {
   $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
   });
  }
 });
});

As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.

After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.

Php Code:

//this varible contains the array of existing users
$existing_users=array('roshan','mike','jason');
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
 //user name is not available
 echo "no";
}
else
{
  //username available i.e. user name doesn't exists in array
  echo "yes";
}

In the above PHP code, I’ve added three usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.

Download full source

Few days ago, Mike emailed me and asked me how can i call a server script( php file) from jQuery in every second.Since, there was no built-in mechanism for this in jQuery, I came up with this solution of displaying time of server using Ajax, PHP and jQuery.You can use setinterval() method avaiable in javaScript to accomplish this task using jQuery.

View Live Demo

HTML Code:

<div align="center" id="timeval">--:--:--</div>
<button id="stop">Stop</button>

There are mainly two elements one is “div” with id “timeval” which displays the the time and the other one is “button” with id “stop” to stop the calling the PHP file in the regular interval.

JavaScript Code:

<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
   //ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function()
   {
     $('#timeval').load('ajaxTime.php?randval='+ Math.random());
   }, 1000);

   //stop the clock when this button is clicked
   $("#stop").click(function()
   {
     clearInterval(refreshId);
   });
});
</script>

As you can see above, setInterval() function is used to call the php file in every second, where 1000 means 1000 millisecond which equals to one second.And, the load() function of jQuery is used to call the Ajax. And, you might be wondering why I’ve passed “randval” to “ajaxTime.php”, you can read this post of mine about the problem of getting same value from ajax. And when the button with id “stop” is called the clearInterval() functions clears the interval ID generated by setInterval() and stop calling the PHP file at regular interval.

PHP code :

<?php
   echo date("g:i:s A");
?>

As you can see the php code in the ajaxTime.php is fairly simple, it just displays the current server time.

You can download the demo by clicking here

What is jQuery?

Directly taken from the website of jQuery -” jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages”.It is basically a JavaScript framework for writing huge task of JavaScript with few lines of code.

What are the benefits of jQuery?

1) 5 lines of code of jQuery can perform better task than 25 lines of traditional Javascript code.
2) Various number of plugins are available and a large community support this project it is better to use jQuery in your project compared to other JavaScript frameworks like prototype.js or moottools .
3) jQuery’s website contains very good documentation with useful examples.
4) It simplifies the Ajax Development. Just have to write 5 or 6 lines to call the Ajax. Isn’t that easy??

Well these are just few benefits of jQuery but if you start using jQuery then you’ll come to know about the actual benefits of using jQuery. And believe me, It worth using jQuery in your web applications otherwise just blame me.

Basic Examples of jQuery :

$(document).ready(function()
{
    $(".button").click(function ()
    {
      $("p").hide("slow");
    });
});

In the above example, when a element with class “button” is clicked, all the paragraph element (“p”) will be hidden in the whole document in slow movement i.e. with slight animation.

$(document).ready(function()
{
      $("#divid").load("sample.php");
});

Above is the example Ajax using jQuery, look how simple it is to use ajax using jquery.The response got from the sample.php file is filled inside the element whose id is “divid”.

Free Ebook for download :

Well I’ve downloaded a E-book of jQuery in chm format.It contains chm version of the document found in docs.jquery.com. This E-book contains the very good documentation as well as useful examples.

You can download the Ebook by clicking here.

Have you ever tried to return values from the Ajax function ? Well it might be sometime the cases when you might have to return the value got from the server to another function rather than updating the component.

Let’s try to return the values from the traditional Ajax function.

function getVal(param)
{
  var strURL=”findValues.php?val=”+param;
  var req = getXMLHTTP();
  if (req)
  {
    req.onreadystatechange = function()
    {
      if (req.readyState == 4)
      {
        return req.responseText;
      }
    }

    req.open(”GET”, strURL, true);
    req.send(null);
  }
}

And now look at the following statement ,

alert(getVal(1));

What does the alert statement displays? Is it the value returned from the server?? Not at all, it alert “undefined”. Why so?? What happens here is you are trying to get the synchronous request but the request runs asynchronously.So to return the value, we need to make the request synchronous so that we can return the value from the Ajax function.

So what is the difference between synchronous request and asynchronous request of Ajax?? In the above example which is asynchronous request, the callback function is called in the background leaving the other activity of your program to flow no matter weather the result is obtained from the server or not. But in the case of synchronous request, JavaScript stop processing your program until a result has been obtained from the server.

Now let’s look at the synchronous way of request of the above function

function getVal(param)
{
  var strURL=”findValues.php?val=”+param;
  var req = getXMLHTTP();
  req.open(”GET”, strURL, false); //third parameter is set to false here
  req.send(null);
  return req.responseText;
}

If you look at the open method, the third parameter is false which means the the request should be synchronous, if set to true the request become asynchronous and the callback function and onreadystatechange property must be used.

Click here to learn more about synchronous request.

Note:You might face the problem of browser stuck, slow website link with the synchronous request of the Ajax so you have keep these things into account before making the synchronous request.

You might have faced the problem of the getting same response on the consecutive request to a PHP file from Ajax. Well, what happens when making repeated GET requests to the same URL can often lead to the response coming not from the server but from the browser cache. This problem mainly occurs while using in internet explorer.

Now let’s look at the various methods to solve this problem :

1) By Using setRequestHeader() method

Well you can use the setRequestHeader() method of the XMLHttpRequest. This function adds a custom HTTP headers to the request.

Look at the example below in which I’ve used “If-Modified-Since” header, this request header is used with get method to make it conditional i.e. if the requested resource has been modified since Sat, 1 Jan 2000 00:00:00 GMT, a copy of the resource will be returned from the server as the normal get request, it will not return from the browser’s cache.

Example Code:

request.open("GET", strURL, true);
request.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); //add this line
request.send(null);

2) By passing a random element to URL in each get request

The above method of sending header request might be difficult and even sometime it’s become ineffective as well. This is the method which always use and recommend you as well.

An effective way of get rid this problem is to add a random element to the URL to which the repetitive request is sent. The browser interprets this as a request to a distinct page
and returns a server page, not the cached version.

var url = “ajaxFile.php?randval=”+Math.random();

I’ve got many email from people asking for populating triple drop down list from the database without refreshing page using Ajax and PHP after posting the first article related to the ajax dropdown list using php .In this post, I’ve put three drop down of country , state and city and the drop down’s value changes without refreshing the page. Now let show you how to create it quickly.
First create the following tables of country city and states,

CREATE TABLE `country` (
  `id` tinyint(4) NOT NULL auto_increment,
  `country` varchar(20) NOT NULL default '',
PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

CREATE TABLE `state` (
 `id` tinyint(4) NOT NULL auto_increment,
 `countryid` tinyint(4) NOT NULL,
`statename` varchar(40) NOT NULL,
PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

CREATE TABLE `city` (
`id` tinyint(4) NOT NULL auto_increment,
`city` varchar(50) default NULL,
`stateid` tinyint(4) default NULL,
`countryid` tinyint(4) NOT NULL,
PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

Now place the following form in the index.php file

<form method="post" name="form1">
 <table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody>
  <tr>
   <td width="150">Country</td>
   <td width="150"><select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"><option>Select Country</option><option value="1">USA</option><option value="2">Canada</option>       </select></td>
  </tr>
 <tr>
  <td>State</td>
  <td>
  <p id="statediv">
  <select style="background-color: #ffffa0" name="state"><option>Select Country First</option>       </select></td>
</tr>
<tr>
  <td>City</td>
  <td>
  <p id="citydiv">
  <select style="background-color: #ffffa0" name="city"><option>Select State First</option>       </select></td>
</tr>
</tbody></table>
</form>

As you can see above, in the onChage event of the country drop down getState() function of the javascript is called which change the options values the State drop down, let’s look at the code the getState() function.

function getState(countryId)
{
   var strURL="findState.php?country="+countryId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
	 // only if "OK"
	 if (req.status == 200)
         {
	    document.getElementById('statediv').innerHTML=req.responseText;
	 } else {
   	   alert("There was a problem while using XMLHTTP:\n" + req.statusText);
	 }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}

The code of the PHP file findState.php, which populate the options in the drop down of the state which is fetched from Ajax , is given below

<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

?>
<select name="state" onchange="getCity(<?=$country?>,this.value)">
 <option>Select State</option>
  <? while($row=mysql_fetch_array($result)) { ?>
    <option value=<?=$row['id']?>><?=$row['statename']?></option>
  <? } ?>
</select>

In the above state dropdown, getCity() function is called in onChage event with countryId and stateId parameter, now let’s look at the code of the getCity() function

function getCity(countryId,stateId)
{
  var strURL="findCity.php?country="+countryId+"&state="+stateId;
  var req = getXMLHTTP();
  if (req)
  {
    req.onreadystatechange = function()
    {
      if (req.readyState == 4) // only if "OK"
      {
        if (req.status == 200)
        {
          document.getElementById('citydiv').innerHTML=req.responseText;
        } else {
          alert("There was a problem while using XMLHTTP:\n" + req.statusText);
        }
      }
    }
    req.open("GET", strURL, true);
    req.send(null);
  }
}

In the above ajax function, findcity.php is called and this PHP file populate the city dropdown according to the supplied parameters country and state from get method. Now let’s look at the code of findcity.php,

<?php $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);

?>
<select name="city">
 <option>Select City</option>
  <?php while($row=mysql_fetch_array($result)) { ?>
 <option value><?=$row['city']?></option>
<?php } ?>
</select>

And thats all, the triple drop down list of city, country and state using Ajax and PHP will be populated.
VIew Live Demo
To download full source code, click here

Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy.Here is the post for you in which I’ve implemented javascript slider to work in Ajax using PHP. Ok let’s Begin it by creating the following tables in the database. Here is the mysql code to create the table named “tbl_slider” in database.

CREATE TABLE `tbl_slider` (
  `id` smallint(6) NOT NULL auto_increment,
  `slider_val` smallint(6) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

VIEW DEMO
DOWNLOAD SOURCE CODE

And now, there is a file slider.js which contains the code of javascript for the slider. I would like to say thanks to Tom Hermansson Snickars for the slider script. The main line you’ve notice in the slider.js is 164 where I’ve place the following code to call the Ajax function which is called when the slider is released after moving i.e on “onMouseUp” event.

setSliderVal(document.getElementById('slider1').style.left);

Slider1 is the if Division(div) which is available in the index.php file. The following code displays the slider in the index.php file.

<DIV class=carpe_slider_group>
 <DIV class=carpe_horizontal_slider_display_combo>
  <DIV class=carpe_slider_display_holder>
   <!-- Default value: 0 -->
   <input name="Input" class=carpe_slider_display id="display1" alue="<?=$row['slider_val']?>" />
  </DIV>
 <DIV class=carpe_horizontal_slider_track>
 <DIV class=carpe_slider_slit></DIV>
 <DIV class=carpe_slider id=slider1 display="display1" tyle="left:<?=$row['slider_val']?>px"></DIV>
</DIV>
</DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
</DIV>

As you can see above there is “<?=$row['slider_val']?>” which is value of the slider stored in the database, the code for retrieving value from database look like this you can find this code in the index.php file

$link = mysql_connect('localhost', 'root', ''); //change the configuration if required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if equired
$query="SELECT slider_val FROM  tbl_slider WHERE id='1'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);

And in the index.php there is Ajax function called “setSliderVal()” which is called from silder.js and use the ajax to call AJAX4Slider.php and retrive the current value of the slider from database.Here is the code of the AJAX4Slider.php

$sliderval=$_GET['sliderval']; //get the value from ajax function
$link = mysql_connect('localhost', 'root', ''); //change the onfiguration in required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if required
$query="UPDATE tbl_slider SET slider_val='$sliderval' WHERE id='1'";
$result=mysql_query($query);

The above code saves the value of the slider to the database.

VIEW DEMO
DOWNLOAD SOURCE CODE

Security Note : It is just a simple demo and If you want to use this code in your professional project then there is a security issue in the PHP code, please use $sliderval=intval($_GET['sliderval']); in the php code instead of $sliderval=$_GET['sliderval']; in the AJAX4Slider.php to prevent your site from sql injection attack.

I’m going to show you a example in php and ajax to change the values of the dropdown’s options without refreshing the page. The values (options) of the dropdown are fetched from the database and the certain portion of the web pages is only refreshed without need to refresh the whole page.

Let’s start with creating the two tables country and city and insert some data

CREATE TABLE country
(
   id tinyint(4) NOT NULL auto_increment,
   country varchar(20) NOT NULL default '',
   PRIMARY KEY  (id)
) TYPE=MyISAM;CREATE TABLE city
(
  id tinyint(4) NOT NULL auto_increment,
  city varchar(50) default NULL,
  countryid tinyint(4) default NULL,
  PRIMARY KEY  (id)
) TYPE=MyISAM;

Now let’s look at the html code, let’s look at the code of the form and its elements

<form method="post" action="" name="form1">
Country : <select name="country" nChange="getCity('findcity.php?country='+this.value)">
 <option value="">Select Country</option>
 <option value="1">USA</option>
 <option value="2">Canada</option>
     </select>
<br />City : <div id="citydiv">
 <select name="select">
 <option>Select City</option>
     </select>
 </div>
</form>

As you can see that when the dropdown named “country” is changed the “getCity” function is called. Look at the other dropdown carefully, it is inside the division called “citydiv”.

Now let’s look at the javascript function called “getCity”

function getCity(strURL)
{         
 var req = getXMLHTTP(); // fuction to get xmlhttp object
 if (req)
 {
  req.onreadystatechange = function()
 {
  if (req.readyState == 4) { //data is retrieved from server
   if (req.status == 200) { // which reprents ok status                    
     document.getElementById('citydiv').innerHTML=req.responseText;
  }
  else
  { 
     alert("There was a problem while using XMLHTTP:\n");
  }
  }            
  }        
req.open("GET", strURL, true); //open url using get method
req.send(null);
 }
}

now we’ve to create the file called findcity.php and put the following PHP code

<? $country=$_GET['country'];
$link = mysql_connect('localhost', 'root', ''); /change the configuration if required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax'); //change this if required
$query="select city from city where countryid=$country";
$result=mysql_query($query);?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
   <option value><?=$row['city']?></option>
<? } ?>
</select>

Thats all, whenever you change the dropdown of country the values of the city dropdown is automaticalled changed without refreshing the page.
If you want to download full source code, Click here to download.

Security Note : If you want to use this code in your project then there is a security flaw in the PHP code, please use $country=intval($_GET['country']); in the php code instead of $country=$_GET['country']; in the findcity.php to prevent your site from sql injection attack.