Wednesday, February 18, 2009

How to check user has disabled Javascript ?

This is a samble example to check the Javascript is disabled or not

< html>
< head>
< title>Testing< /title>
< /head>
< script language='javascript'>
function testJava()
{
alert("Hello good idea to enable scripting");
}
< /script>
< noscript>
< ?php
echo "PLEASE ENABLE JAVASCRIPT BEFORE PROCEEDING.";
?>
< /noscript>
< body onLoad='testJava();'>
< /body>
< ?php
echo "Yahoo... Javascript is enabled";
?>
< /html>

Thursday, February 5, 2009

Ajax !!! Why dont we try it ?

Ajax !!! is it too difficult ?

I remember the day in 1997, when I first created my mail id on yahoo. It took half an hour for me to create my first yahoo mail id. The reason was neither the speed of net connectivity nor about the typing. The delay was only due to selecting the mail id. Whatever the mail id I selected it was already occupied. My page was nearly 10 times refreshed showing me error to choose another mail id. I got bored and felt that how difficult it was to open an email account.

Now a day the scenario has been changed. You try to open an email account on any website it will take hardly five minutes. As soon as you will type your email id, immediately a box will appear showing you that the Email id, you choose, is available or not. The page does not get refreshed for this small peace of information. But the hidden activity behind this process is AJAX. The webpage will query its database and will show you the availability of email id.

Unknown things are always like a question mark! But following the question mark will lead you to its full stop. AJAX is handy useful tool to make the webpage faster and convenient.

I would like to show a simple example of AJAX. You will realize that it is not too difficult. Just go ahead and experience it.

First go to your mysql database and create a simple table.

Create table employee
(empcode int,
Empname varchar(20)
)

Now insert few data in this table.

Insert into employee values (1,”Virendra”);
Insert into employee values(2,”Sachin”);
Insert into employee values (3,”Yuvaraj”);
Insert into employee values(4,”Dhoni”);

Now we are going to create an HTML file. You can use any of your favorite editor (I use notepad++). Type the following code.

< html>
< head>
< title> Simple Ajax Application< /title>
< /head>
< script language="javascript">
// The following function is used for AJAX.
var req;
function getAjaxData()
{

req=false;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = 'ajax_file.php';
str=empcode.value;
url =url+"?empcode="+str;
url=url+"&ms="+new Date().getTime(); // This is to send the unique ajax call.

req.onreadystatechange = processRequest;
req.open("get", url, true);
req.send(null)
}

function processRequest()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
mytext=req.responseText;
empname.innerHTML = mytext;
}
}
}
< /script>
< body>
< table border=1>
< tr> < td> Employee code< /td> < td> < input type=text name=empcode value="" onBlur="javascript:getAjaxData();"> < /td> < /tr>
< tr> < td> Employee Name< /td> < td> < div id=empname name=empname> < /div> < /td> < /tr>
< /table>
< /body>
< /html>

Now time to save the file say ajax_sample.html.

Just look into the getAjaxData() function which will be called on onBlur event of empcode. You can see, I have created an url in this function. This url will be called after you loose the focus from empcode by entering some value. Now we are going to create ajax_file.php file which is in the URL. Here is the code of ajax_file.php

< ?php
$username='root';
$password='';
$host='localhost';
$db_name="test";
$conn1=mysql_connect($host,$username,$password) or die("Unable to connect to mysql server");
$select1=mysql_select_db("$db_name",$conn1) or die("Unable to connect to mysql database");
setcookie('db_name',$db_name);

$empcode = $_GET['empcode'];
$query = "select empname from employee where empcode=$empcode";

$result = mysql_query($query);
echo mysql_result($result,0,'empname');
?>

Finished. Save the file.

What does the ajax_file.php file do ? When you move out of the empcode text box, this file will be called. It will received empode as GET method and fetch the corresponding record from the database. The value of empname will be sent back to our ajax_sample.html file. This empname will be displayed through < div> tag.