Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts

Tuesday, October 28, 2008

dropdown list with ajax

ajax drop down menu is easy to learn,
i just find how to create dropdown list.

here is the example

For This Example, I using PHP Code and MySQL Database
1. Create Dropdown List (state_dropdown.php)

<form name=sel>
States: <font id=states><select>
<option value=""> ----- </option>
</select></font>

Cities : <font id=cities><select>
<option value='0'<=== none ===>/option>
</select$gt;</font>
?$gt;

<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};

function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

window.onLoad=dochange('states', -1); // value in first dropdown
</script>


2. Select States and Cities to Show in Dropdown (state.php)

<?
$data=$_GET['data'];
$val=$_GET['val'];
//set database
$dbhost = "localhost";
$dbuser = "";
$dbpass = "";
$dbname = "test";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='states') { // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">";
echo "<option value='0'>==== choose state ====</option>";
$result=mysql_db_query($dbname,"select `id`, `state` from states order by `state`");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='cities') { // second dropdown
echo "<select name='cities' >\n";
echo "<option value='0'>====choose cities ====</option>\n";
$result=mysql_db_query($dbname,"SELECT `id`, `city` FROM cities WHERE `state_id` = '$val' ORDER BY `city` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>


Preview:

Monday, October 20, 2008

Examples of Ajax Applications

These applications use Ajax and give you a good overview of what can be done with the technology.

Basecamp - 37signals
Basecamp is an AJAX project management tool.

Backpack - 37signals
Backpack is an AJAX personal information management tool.

Flickr - A Yahoo! Company
Flickr is a photo storage and display program that uses AJAX.

Gmail - Google
Gmail is an AJAX powered email system.

Google Maps - Google
Google Maps uses AJAX to power it's interactive map.

Book Review: Ajax by Edmond Woychowsky
This is a very technical book for Web developers who want to learn Ajax. It covers the basics of Ajax including XHTML, XML, JavaScript, and the XMLHttpRequest. It also goes into detail about other technologies like Xpath, XSLT, and Ruby on Rails.

Book Review: Build Your Own Ajax Web Applications By Matthew Eernisse
While not a book for beginners, this book will teach intermediate and advanced Web developers how to implement Ajax on their Web sites.

Book Review: Head Rush Ajax by Brett McLaughlin
Ajax is fun, and this book makes Ajax fun. I read this Ajax book cover-to-cover. And then I read it again. It's easy to read and packs a lot of information in a small space. There might be more comprehensive books on Ajax out there, but this will be the only one you want to read cover-to-cover.

What is AJAX?

Ajax (sometimes called Asynchronous JavaScript and XML) is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole. When your customer clicks on something on an Ajax driven application, there is very little lag time. The page simply displays what they're asking for. If you don't believe me, try out Google Maps for a few seconds. Scroll around and watch as the map updates almost before your eyes. There is very little lag and you don't have to wait for pages to refresh or reload.

What is Ajax?

Ajax is a way of developing Web applications that combines:

In the traditional Web application, the interaction between the customer and the server goes like this:

  1. Customer accesses Web application
  2. Server processes request and sends data to the browser while the customer waits
  3. Customer clicks on a link or interacts with the application
  4. Server processes request and sends data back to the browser while the customer waits
  5. etc....

There is a lot of customer waiting.

ajax script

this is basic of ajax code.
(ajax.js)


var xmlhttp = false;

//check if using IE

try {
//check if IE > IE 5
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//use activeX
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

//check if not using IE
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
//function request
function makeRequest ( serverPage, objID, msgLoad ) {
var obj = document.getElementById(objID);
var msg = msgLoad;
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
obj.innerHTML = xmlhttp.responseText;
} else {
obj.innerHTML = "<br /><br /><div align ='center'><img src='images/ajax.gif' alt='Loading' /><br />"+msg + "</div>";
}
}
xmlhttp.send(null);
}
//function download
function download ( serverPage, objID, msgLoad ) {
var obj = document.getElementById(objID);
var msg = msgLoad;
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
window.location = serverPage;
} else {
obj.innerHTML = "<br /><br /><div align ='center'><img src='images/ajax.gif' alt='Loading' /><br />"+msg + "</div>";
}
}
xmlhttp.send(null);
}
//function for search
function searchRequest ( serverPage, objID, msgLoad, formName , getcari ) {
var obj = document.getElementById(objID);
var msg = msgLoad;
var cari = document.forms[formName].elements[getcari].value;
var t = new Date()

xmlhttp.open("GET", serverPage+"?search="+cari+"&t="+t.getTime());
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
obj.innerHTML = xmlhttp.responseText;
} else {
obj.innerHTML = "<br /><br /><div align ='center'><img src='images/ajax.gif' alt='Loading' /><br />"+msg + "</div>";
}
}
xmlhttp.send(null);
}