In this quick tutorial we will show how-to create such an Ajax upload form using the jQuery Form plug-in and our easy upload class.The system is very simple, build your upload form just like normal. In place of posting the form to the script you use some JavaScript code to post the data to some PHP script in the background.
Next create a PHP script named "upload4jquery.php" and place it in the same directory where other files are located. Place this code into that new file:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: 'upload4jquery.php', // your upload script
dataType: 'json'
};
$('#Form1').submit(function() {
document.getElementById('message').innerHTML = '';
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest(formData, jqForm, options) {
var fileToUploadValue = $('input[@name=fileToUpload]').fieldValue();
if (!fileToUploadValue[0]) {
document.getElementById('message').innerHTML = 'Please select a file.';
return false;
}
return true;
}
function showResponse(data, statusText) {
if (statusText == 'success') {
if (data.img != '') {
document.getElementById('result').innerHTML = '<img src="/upload/thumb/'+data.img+'" />';
document.getElementById('message').innerHTML = data.error;
} else {
document.getElementById('message').innerHTML = data.error;
}
} else {
document.getElementById('message').innerHTML = 'Unknown error!';
}
}
</script>This tutorial or guide is not about how to use the easy upload class. If you never used the class before try the example files first and than start with this Ajax upload form.
<?php
include($_SERVER['DOCUMENT_ROOT'].'/classes/upload/foto_upload_script.php');
$foto_upload = new Foto_upload;
$json['size'] = $_POST['MAX_FILE_SIZE'];
$json['img'] = '';
$foto_upload->upload_dir = $_SERVER['DOCUMENT_ROOT']."/upload/";
$foto_upload->foto_folder = $_SERVER['DOCUMENT_ROOT']."/upload/";
$foto_upload->thumb_folder = $_SERVER['DOCUMENT_ROOT']."/upload/thumb/";
$foto_upload->extensions = array(".jpg", ".gif", ".png");
$foto_upload->language = "en";
$foto_upload->x_max_size = 480;
$foto_upload->y_max_size = 360;
$foto_upload->x_max_thumb_size = 120;
$foto_upload->y_max_thumb_size = 120;
$foto_upload->the_temp_file = $_FILES['fileToUpload']['tmp_name'];
$foto_upload->the_file = $_FILES['fileToUpload']['name'];
$foto_upload->http_error = $_FILES['fileToUpload']['error'];
$foto_upload->rename_file = true;
if ($foto_upload->upload()) {
$foto_upload->process_image(false, true, true, 80);
$json['img'] = $foto_upload->file_copy;
}
$json['error'] = strip_tags($foto_upload->show_error_string());
echo json_encode($json);
?>
Paths and upload directories
You need to create some upload directories (2 one for the upload and one for the thumbs) and check the permission (chmod the upload directory with 777). If you use the same structure as suggested in the class file you don't need to change the include at the top from the PHP script.
Now we need the form HTML and some other containers where the response data is placed.
<form id="Form1" name="Form1" method="post" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_size; ?>" />
Select an image from your hard disk:
<div>
<input type="file" name="fileToUpload" id="fileToUpload" size="18" />
<input type="Submit" value="Submit" id="buttonForm" />
</div>
</form>
<img id="loading" src="loading.gif" style="display:none;" />
<p id="message">
<p id="result">
jquery ajax error handling
How to handle ajax errors using jQuery ?jQuery is the most awesome javascript library that made easy for asynchronous ajax calls.it has global ajax function and some pre defined ajax functions like $.get, $.post, load .etc. but we don’t find any error messages by default with this library. we can see the errors with firefox’s addon firebug or with IE developer toolbar.So we manage most common ajax errors in our application with global ajaxSetup function which come with jQuery by default. We can set many options,to see available ajaxsetup options.
most ajax errors we get errors are server response errors and some JSON parse errors. To know more about the HTTP errors details please check here. To test this error handling just copy and paste it to your head section of HTML document.
Javascript Code for setting global error handling.
In the above example we handle following common error and show response text for other rare errors.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
});
- 0-xhr status ,is it initialized or not that means user is offline.
- 404-page not found
- 500-Internel Server error.
- request timeout – jQuery custom error.
- parseerror-jQuery custom error when parsing JSON data.
- we just throw other errors with response error
10 Useful code snippets for web developers
In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets.
1. CSS Print FrameworkCascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages
2. CSS @font-face
<link rel="stylesheet" href="print.css" type="text/css" media="print">This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
3. HTML 5 CSS Reset
@font-face {
font-family: MyFontFamily;
src: url('http://');
}Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.
4. Unit PNG FixThis snippet fixes the png 24 bit transparency with Internet Explorer
5. Tab Bar with rounded corners
This code illustrates how to implement a simple tab bar with rounded corners:
6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long.7. PHP: Convert strings into clickable url
<?phpif (isset($username[5])) {?>
// Do something...
}This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials;
8. jQuery: Ajax call
<? php
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s\.\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:
9. CSS Layouts CollectionsThis page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.
10. Simple versatile multilevel navigation MenuSeveral months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
The only thing you have to do is to create nested lists into a main list with id="nav", in this way:
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a><ul><li><a href="#">Link 3.1</a></li><li><a href="#">Link 3.2</a></li><ul>
</li>
</ul>...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!
...and this is the JavaScript code for jQuery you have to copy in the tag <head> of the pages that use this menu:
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}
<script type="text/javascript">
function showmenu(){$("#nav li").hover(function(){$(this).find('ul:first').css({visibility:"visible", display:"none"}).show();
}, function(){
$(this).find('ul:first').css({visibility:"hidden"});
});
}
$(document).ready(function(){
showmenu();
});
</script>If you have better solution, just tell me !
Using XMLHttpRequest and a Callback AJAX Example
You alread have a webserver installed. If you want to use the SAX Servlet as the backend for this tutorial then you need to have it compiled and deployed.
A big part of WEB 2 is of course AJAX which is asynchronous javascript and xml. We will breakdown an AJAX request down. A complete list of the code is available at the end of this page.
When you load the page the first thing that happens is the creation of an XMLHttpRequest object to handle the xml functions.
2. <head>
3. <script langua="javascript">
4. function new_XHR() {
5. var xhr;
6. try{
7. xhr = new ActiveXObject("Msxml2.XMLHTTP");
8. }catch(e){
9. try{
10. xhr = new ActiveXObject("Microsoft.XMLHTTP");
11. }catch(E){
12. xhr = false;
13. }
14. }
15. if(!xhr && typeof XMLHttpRequest != 'undefined'){
16. xhr = new XMLHttpRequest();
17. }
18. return xhr;
19. }What we are trying to do here, is instantiate an XMLHttpRequest object. As you can see I have not bothered to handle the error if the browser cannot instantiate an object.Now lets have a look at the actual HTML.
49. <body>
50. <form>
51. Name <input id="NameBox" type="text"/>
52. <a href="javascript:DoCallback()">Send the data without submitting the form</a>
53. </form>
54. <div id="MessagePane"/>
55. </body>
56. </html>
57.This shows a textbox and a URL. When you click on the URL it calls the javascript DoCallback function.
The XMLHTTP request
20.
21. var myxhr;
22. function DoCallback(){
23. myxhr = new_XHR();
24. myxhr.onreadystatechange=MyCallback;
25. myxhr.open('GET',"saxxmldemo_static.xml?"
26. +"name="+document.getElementById("NameBox").value);
27. myxhr.send(null);
28. }
29.This sets the callback function onreadystatechange=MyCallback. As you can see this is adding the value in the textbox to the URL. This really doesn't matter if you are using the saxxmldemo_static.xml as this is a static xml file. If you want to use the SAX Servlet example replace line 25 with
myxhr.open('GET', 'http://127.0.0.1:8080/SAXJHelloWorldServlet/saxxmldemo.xml?
This will point to the SAX Servlet which will echo the 'name'. Make sure you have the SAX Servlet example deployed and ready to go.The Callback
29.
30. function MyCallback(){
31. var name;
32. var message;
33. if(myxhr.readyState==4 && myxhr.status==200){
34. var subrootNode = myxhr.responseXML.getElementsByTagName('user-data');
35. for(i = 0 ; i < subrootNode[0].childNodes.length ; i++){
36. var node = subrootNode[0].childNodes[i];
37. if(node.tagName=="name")
38. name=node.firstChild.nodeValue;
39. else if(node.tagName=="message")
40. message=node.firstChild.nodeValue;
41. else{}
42. }
43. document.getElementById("MessagePane").innerHTML = "Hey "+name+" the server says \""+message+"\"";
44. }
45. }This is the function that gets called when the XMLHttpRequest object changes state i.e receives a response. As you can see on line 33, we are only interested in readyState=4 (document has loaded) and status 200 which means successful. You should have more error handling code here. You can use childNodes to drill down and extract the information or you can use getElementsByTagName(). The message is written to the html div with the id 'MessagePane' using innerHTML.
childNodes[n]
__childNodes[0] (.firstChild)
__childNodes[1]
____childNodes[0] (.firstChild)
____childNodes[1]
__childNodes[2]The xmldemo_static.xml
2. <user-data>
3. <name type="Alias">Doctor Octopus</name>
4. <message type="greeting">Hello there from the SAX servlet</message>
5. </user-data>Entire listing of index.html
2. <head>
3. <script langua="javascript">
4. function new_XHR() {
5. var xhr;
6. try{
7. xhr = new ActiveXObject("Msxml2.XMLHTTP");
8. }catch(e){
9. try{
10. xhr = new ActiveXObject("Microsoft.XMLHTTP");
11. }catch(E){
12. xhr = false;
13. }
14. }
15. if(!xhr && typeof XMLHttpRequest != 'undefined'){
16. xhr = new XMLHttpRequest();
17. }
18. return xhr;
19. }
20.
21. var myxhr;
22. function DoCallback(){
23. myxhr = new_XHR();
24. myxhr.onreadystatechange=MyCallback;
25. myxhr.open('GET',"http://127.0.0.1:8080/SAXJHelloWorldServlet/saxxmldemo.xml?"
26. +"name="+document.getElementById("NameBox").value);
27. myxhr.send(null);
28. }
29.
30. function MyCallback(){
31. var name;
32. var message;
33. if(myxhr.readyState==4 && myxhr.status==200){
34. var subrootNode = myxhr.responseXML.getElementsByTagName('user-data');
35. for(i = 0 ; i < subrootNode[0].childNodes.length ; i++){
36. var node = subrootNode[0].childNodes[i];
37. if(node.tagName=="name")
38. name=node.firstChild.nodeValue;
39. else if(node.tagName=="message")
40. message=node.firstChild.nodeValue;
41. else{}
42. }
43. document.getElementById("MessagePane").innerHTML =
44. "Hey "+name+" the server says \""+message+"\"";
45. }
46. }
47.
48. </script>
49. </head>
50. <body>
51. <form>
52. Name <input id="NameBox" type="text"/>
53. <a href="javascript:DoCallback()">Send the data without submitting the form</a>
54. </form>
55. <div id="MessagePane"/>
56. </body>
57. </html>If you have better solution, just tell me !
Ajax Progress Bar Control
Published a ProgressBar AjaxToolKit control
View live demo
<!-- Continuous Mode / 150px wide -->
<mb:ProgressControl ID="ProgressControl1" runat="server" Mode="Continuous" Width="150px" />
<!-- Manual Mode / 70px wide -->
<mb:ProgressControl ID="ProgressControl12" runat="server" Mode="Manual" Width="70px" />Modifing behavior control from UI Client using JQuery:
Play continous control $find('ProgressControl1').play();
Stop continous control $find('ProgressControl1').stop();
Set Percentage value control $find('ProgressControl1').set_percentage(62);
Increment percentage value control $find('ProgressControl1').set_percentage('+15');
The progressbar control support skins.
;">If you have better solution, just tell me !
JQuery and JSON Web Service
Use JQuery to consume JSON Web Services is a lightweight method, for increment performance in your website.
If you want call a JSON Web Service from your javascript code, you should : use HTTP POST and content-type "application/json; charset=utf-8″. Asp.Net Ajax make this for you transparently.
$(document).loadMyContent(function() {
$.ajax({
type: "POST",
url: "myService.asmx/GetMyContent",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$('#myDiv').html(msg.d);
}
});
});Insert javascript code after content for best performance.
JQuery Pluggins
JQuery Pluggins is a mechanism for adding in methods and functionality. You can found a lot of available pluggins. Read more about pluggin developing.
A simple example :
Using our developped pluggin : $("div p").mypluggin ();jQuery.fn.mypluggin = function() {
return this.each(function(){
alert(this);
});
};
Combining javascript file
howto combine javascript files in 3.5 and 4.0.
<asp:ScriptManager runat="server">
<CompositeScript>
<Scripts>
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
<asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<asp:ScriptReference Name="MicrosoftAjax.js" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>In 4.0 <asp:ScriptManager runat="server" EnableCdn="true"/>
If you have better solution, just tell me !
How to Add a ToolTip to the Telerik Ajax RadEditor
This one was not immediately obvious to me so I’m posting the solution here. I’m using a Telerik Ajax RadEditor on my page as follows:
</telerik:RadEditor>Now, after doing a bit of inspection, I discovered there was a property I could set on the RadEditor called ToolTip that seemed to just require a string value as follows:
</telerik:RadEditor>I assumed this would produce exactly what I needed. Unfortunately, after testing the above out, I got nothing, no tool tip. Doing a search on the forums turned up nothing useful, not even an explanation as to what the ToolTip property was really for. However, I did come across an entirely separate control in the Ajax suite of controls called RadToolTip.
That’s clever I thought, perhaps I’ll just give that a go. I was hoping there would be some sort of property I would set that would allow me to specify what control to tie this tool tip to. Guess what! There is! My final solution was as follows:
<telerik:RadEditor ID="rhfNotes" EditModes="Preview" runat="server" ToolsFile="ToolsFile.xml">
</telerik:RadEditor>There you have it. I haven’t played around with all the properties and options I have available to me with the RadToolTip, but I’m sure there are some useful ones in there!
If you have better solution, just tell me !
Ajax Autocomplete textbox add progress Image using javascript
In this example i m going to describe how to add animated Progress Image inside Ajax Auto complete extender textbox to represent loading of data.
For achieving this functionality i am using two different approaches for different versions of AjaxControlToolkit.dll
1st Approach
This approach is very simple and can be handy if you are using older/earlier version of AjaxControlToolkit (eg versions like 1.0.10201.0) which does not support css properties or properties like onclientpopulating. For this write the below mentioned javascript in head section of html markup of the aspx page.
function ShowImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'url(images/loader.gif)';
document.getElementById('txtAutoComplete')
.style.backgroundRepeat= 'no-repeat';
document.getElementById('txtAutoComplete')
.style.backgroundPosition = 'right';
}
function HideImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'none';
}
</script>In this script I've written two function to show and hide image, in the functions i m setting the background image style using document.getElementByID method , Now write this code in Page_Load event of aspx page.
{
this.txtAutoComplete.Attributes.Add
("onkeypress", "ShowImage()");
this.txtAutoComplete.Attributes.Add
("onblur", "HideImage()");
}Here i've added onblur and onkeypress attributes to textbox and calling respective function of javascript to show hide image.Build the solution and run ti see the results.
2nd approach
This approach works if you are using newer versions of AjaxControlToolkit.dll (Version 1.0.20229.20821 or later)
For this write the above mentioned javascript in head section of html markup of page.
Now in source of autocomplete extender add onclientpopulating="ShowImage" and onclientpopulated="HideImage".
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="txtAutoComplete"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass=
"autocomplete_completionListElement"
CompletionListItemCssClass=
"autocomplete_listItem"
CompletionListHighlightedItemCssClass=
"autocomplete_highlightedListItem"
onclientpopulating="ShowImage"
onclientpopulated="HideImage">
</ajaxToolkit:AutoCompleteExtender>Complete html source of the page look like
<title>Progress Image in AutoComplete TextBox
</title>
<script type="text/javascript">
function ShowImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'url(images/loader.gif)';
document.getElementById('txtAutoComplete')
.style.backgroundRepeat= 'no-repeat';
document.getElementById('txtAutoComplete')
.style.backgroundPosition = 'right';
}
function HideImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="AutoComplete.asmx" />
</Services>
</asp:ScriptManager>
<br />
<div>
<asp:TextBox ID="txtAutoComplete" runat="server" Width="252px">
</asp:TextBox><br />
<ajaxToolkit:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="txtAutoComplete"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass=
"autocomplete_completionListElement"
CompletionListItemCssClass=
"autocomplete_listItem"
CompletionListHighlightedItemCssClass=
"autocomplete_highlightedListItem"
onclientpopulating="ShowImage"
onclientpopulated="HideImage">
</ajaxToolkit:AutoCompleteExtender>
</div>
</form>If you have better solution, just tell me !
Cross domain AJAX querying with jQuery
This post IS NOT about jQuery’s JSONP support. This post is about how to make AJAX queries to domains other then yours. Basically how to achieve cross domain scripting with jQuery. The technique will help you resolve the access to restricted uri denied" code: "1012 problem.
Using this method for cross site scripting you will be able to:
Make AJAX queries to any domain even those that differ from your own;
Use any of $.get(), $.post(), $.ajax(), $getScript(), etc. jQuery AJAX functions as your query method.
But all these does not come free, you will need to put a proxy to between you and the rest of the world. This cross domain querying solution works because you actually loading the content from your own domain. You request the URL and the proxy script on your server actually loading the content from the internet and passing it over to you.
I created a sample PHP proxy that I used to get related news RSS feed for one of my projects.
The PHP script to use as a cross domain scripting proxy:I named the file proxy.php and made my AJAX request to this url. Here is a jQuery code example:
// Set your return content type
header('Content-type: application/xml');
// Website url to open
$daurl = 'http://feeds.feedburner.com/jQueryHowto';
// Get that website's content
$handle = fopen($daurl, "r");
// If there is something, read and return
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
echo $buffer;
}
fclose($handle);
}
?>And this is how I overcame the jQuery cross site scripting problems. The bad news is that not all web hosting companies allow fopen() to other domains, but enable it on request. My web server was very strict on security but the script above worked well on it.
// Some callback functions
});If you have better solution, just tell me !
Ajax Triple Dropdown with States Cities Database
Ajax Dropdown Menu it's make easy for user to use interface. When you choose first dropdown menu data in second dropdown will be filter and data related in first dropdown will be show automatic
For This Example Code is PHP and Database is MySQL
Example : Stated and Cities
1. Create Dropdown Menu (state_dropdown.php)
echo "<form name=sel>\n";
echo "States : <font id=states><select>\n";
echo "<option value='0'>============</option> \n" ;
echo "</select></font>\n";
echo "Cities : <font id=cities><select>\n";
echo "<option value='0'>=== none ===</option> \n" ;
echo "</select></font>\n";
?>
<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)2. Select Province Ampher Tumbon to Show in Dropdown (locale.php)
Ex 2: This is Triple Ajax Dropdown Menu - Province - Ampher - Tumbon in Thailand
<? echo "<form name=sel>\n"; echo "จังหวัด : <font id=province><select>\n"; echo "<option value='0'>============</option> \n" ; echo "</select></font>\n";
echo "อำเภอ : <font id=amper><select>\n"; echo "<option value='0'>==== ไม่มี ====</option> \n" ; echo "</select></font>\n"; echo "ตำบล : <font id=tumbon><select>\n"; echo "<option value='0'>==== ไม่มี ====</option> \n" ; echo "</select></font>\n"; ?>
<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; //รับค่ากลับมา
}
}
};
req.open("GET", "locale.php?data="+src+"&val="+val); //สร้าง connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=tis-620"); // set Header
req.send(null); //ส่งค่า
}
window.onLoad=dochange('province', -1);
</script>2. Select Province Ampher Tumbon to Show in Dropdown (locale.php)
<?
//IE page cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
$data=$_GET['data'];
$val=$_GET['val'];
//ค่ากำหนดของ ฐานข้อมูล
$dbhost = "localhost";
$dbuser = "";
$dbpass = "";
$dbname = "test";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='province') {
echo "<select name='province' onChange=\"dochange('amper', this.value)\">\n";
echo "<option value='0'>==== เลือก สังกัด ====</option>\n";
$result=mysql_db_query($dbname,"select loc_code,loc_abbr from location where loc_name = location_name and loc_code != '000000' and flag_disaster is null order by loc_abbr");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='amper') {
echo "<select name='amper' onChange=\"dochange('tumbon', this.value)\">\n";
echo "<option value='0'>======== เลือก ========</option>\n";
$val2=$val;
$val = substr($val,0,2);
$result=mysql_db_query($dbname,"SELECT loc_code, loc_abbr FROM location WHERE loc_code != '000000' and loc_code != '$val2' AND loc_code LIKE '$val%' AND flag_disaster IS NULL ORDER BY loc_code, loc_abbr ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='tumbon') {
echo "<select name='tumbon' >\n";
echo "<option value='0'>======== เลือก ========</option>\n";
$val2=$val;
$val = substr($val,0,4);
$result=mysql_db_query($dbname,"SELECT loc_code, loc_abbr, loc_name, location_name FROM location WHERE loc_code != '000000' and loc_code != '$val2' AND loc_code LIKE '$val%' AND flag_disaster IS NULL ORDER BY loc_code, loc_abbr");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>(MySQL)
PS. In ajax-dropdown.rar file Include
for states and cities (america)
state.php
state_dropdown.php
state.sql (MySQL)
for province ampher tumon (thailand)
locale.php
locale_dropdown.php
location.sql
If you have better solution, just tell me !
