943,568 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > AJAX dropdown list
Ad:
You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page
Permalink
Aug 27th, 2009
0

Re: AJAX dropdown list

Hi Airshow

Here's the code as it stands now. I've reverted to the version that works in FF. Thanks for your time again.

HTML form
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. 	  <head>
  3. 	  <script type = text/javascript src = getschool1.js></script>
  4. 	  <link rel="stylesheet" type="text/css" href="form.css">
  5. 	  </head>
  6. 	  <body>
  7.       <form id = 'prices' action="process.php" method="post">
  8.       <table>
  9.       <td align="right">Language of interest:</td>
  10.       <td>
  11.       <select id="language" name="language" onChange="getSchool1(this.value)">
  12. 	  <option value="none selected"> --- select --- </option>
  13.       <option value="french">French</option>
  14.       <option value="german">German</option>
  15.       <option value="italian">Italian</option>
  16.       <option value="spanish">Spanish</option>
  17.       <option value="russian">Russian</option>
  18.       </select>
  19.       </td>
  20.       <tr>
  21.       <td align="right">School</td>
  22. 	  <td>
  23.       <select id="school"  name ="school" onChange="getAge(this.value)"disabled>
  24.       <option value="none selected">Select Language First</option>
  25. 	  </select>
  26.       </td>
  27.       </tr>
  28. 	  <tr>
  29.       <td align="right">Course Type</td>
  30.       <td>
  31.       <select id = "age" name="age" onChange="getLevel(this.value)" disabled>
  32.       <option value="none selected"> Select School First </option>
  33.       </select>
  34.       </td>
  35.       </tr>
  36.       <tr>
  37.       <td align="right">Class Type</td>
  38.       <td>
  39.       <select id="level" name="level" onChange="getDuration(this.value)" disabled>
  40.       <option value="none selected">Select Course Type First</option>
  41.       </select>
  42.       </td>
  43.       </tr>
  44.       <tr>
  45.       <td align="right">Duration</td>
  46.       <td>
  47.       <select id="duration" name="duration" onChange="getPlace(this.value)" disabled>
  48.       <option value="none selected">Select Class Type First</option>
  49.       </select>
  50.       </td>
  51.       </tr>
  52. 	  <tr>
  53.       <td align="right">Accommodation</td>
  54.       <td>
  55.       <select id ="place" name ="place" onChange = "getBoard(this.value)" disabled>
  56.       <option value="none selected">Select Duration First</option>
  57.       </tr>
  58. 	  <tr>
  59.       <td align="right">Board</td>
  60. 	  <td>
  61. 	  <select id ="board" name="board" onChange = "getRoom(this.value)" disabled>
  62. 	  <option value="none selected">Select Acc First</option>
  63. 	  </tr>
  64. 	  <td align="right">Room Type</td>
  65. 	  <td>
  66. 	  <select id ="room"  name="room" onChange = "getSeason(this.value)" disabled>
  67. 	  <option value="none selected">Select Board First</option>
  68. 	  </tr>
  69. 	  <tr>
  70. 	  <td align="right">Season</td>
  71. 	  <td>
  72. 	  <select id ="season"  name="season" disabled>
  73. 	  <option value="none selected">Select Room First</option>
  74. 	  </tr>
  75. 	  </br>
  76.  
  77. <td align="right">Currency</td>
  78. <td>
  79. <select name="currency" >
  80. <option value="none selected"> --- select --- </option>
  81. <option value="euro">Euro</option>
  82. <option value="sterling">Sterling</option>
  83. <option value="dollar">Dollar</option>
  84. </tr>
  85. <tr>
  86. <td>
  87. <input type="submit" id="submit" name="submit" value="Submit" />
  88. <input type="hidden" name="submitted" id="submitted" value="true" />
  89. </tr>
  90. </td>
  91.       </table>

.js

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  function GetXmlHttpObject(){
  2.       var xmlHttp = false;
  3.  
  4. 	  try{
  5.       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")//For Old Microsoft Browsers
  6.       }
  7.  
  8.       catch(e){
  9.       try{
  10.       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//For Microsoft IE 6.0+
  11.       }
  12.       catch(e2){
  13.  
  14. 	 xmlHttp = false;
  15.       }
  16.       }
  17.  
  18.       if (!xmlHttp && typeof XMLHttpRequest != 'undefined') 
  19. 	  {
  20.       xmlHttp = new XMLHttpRequest();//For Mozilla, Opera Browsers
  21.       }
  22.       if(!xmlHttp) { alert("Browser does not support HTTP Request"); }
  23.  
  24. 	  return xmlHttp;
  25.  
  26.       }
  27.  
  28.  
  29.       function getSchool1(langID){
  30.  
  31.       var xmlhttp = GetXmlHttpObject();
  32.  
  33.       if(!xmlhttp){ return; }
  34.  
  35.       var url = "findcity.php" +
  36.       "?language=" + langID +
  37.       "&sid=" + Math.random();
  38.  
  39.  
  40.       xmlhttp.onreadystatechange = function(){
  41.  
  42.       if(xmlhttp.readyState == 4){
  43.  
  44.  
  45.  
  46.       document.getElementById("school").innerHTML = xmlhttp.responseText;
  47.       document.getElementById("school").disabled = 0;
  48.  
  49.       }
  50.  
  51.       };
  52.  
  53.       xmlhttp.open("GET",url,true);
  54.       xmlhttp.send(null);
  55.  
  56.       }
  57.  
  58.       function getAge(school){
  59.  
  60.       var xmlhttp = GetXmlHttpObject();
  61.  
  62.       if(!xmlhttp){ return; }
  63.  
  64. 	  var langID = document.getElementById("language").value;
  65.       //var school = document.getElementById("school").value;
  66.  
  67.       var url = "findage.php" +
  68.       "?language=" + langID +
  69. 	  "&school="+ school +
  70.       "&sid=" + Math.random();
  71.  
  72.  
  73.  
  74.       xmlhttp.onreadystatechange = function(){
  75.  
  76.       if(xmlhttp.readyState == 4){
  77.  
  78.  
  79.  
  80.       document.getElementById("age").innerHTML = xmlhttp.responseText;
  81.       document.getElementById("age").disabled = 0;
  82.  
  83.  
  84.       }
  85.  
  86.       };
  87.  
  88.       xmlhttp.open("GET",url,true);
  89.       xmlhttp.send(null);
  90.  
  91.       }
  92.  
  93.       function getLevel(age){
  94.  
  95.       var xmlhttp = GetXmlHttpObject();
  96.  
  97.       if(!xmlhttp){ return; }
  98.  
  99.       var langID = document.getElementById("language").value;
  100. 	  var schoolID = document.getElementById("school").value;
  101.  
  102.  
  103.  
  104.       var url = "findlevel.php" +
  105.       "?language=" + langID +
  106.       "&school="+ schoolID +
  107. 	  "&age="+ age +
  108.       "&sid=" + Math.random();
  109. 	  alert(url);
  110.  
  111.       xmlhttp.onreadystatechange = function(){
  112.  
  113.       if (xmlhttp.readyState == 4){
  114.  
  115.       document.getElementById("level").innerHTML = xmlhttp.responseText;
  116.       document.getElementById("level").disabled = 0;
  117.  
  118.       }
  119.  
  120.       };
  121.  
  122.       xmlhttp.open("GET",url,true);
  123.       xmlhttp.send(null);
  124.  
  125.       }
  126.  
  127.  
  128.  
  129.       function getDuration(level){
  130.  
  131.       var xmlhttp = GetXmlHttpObject();
  132.  
  133.       if(!xmlhttp){ return; }
  134.  
  135.       var langID = document.getElementById("language").value;
  136.       var schoolID = document.getElementById("school").value;
  137.       var ageID = document.getElementById("age").value;  
  138.  
  139.       var url = "getduration.php" +
  140.       "?language=" + langID +
  141.       "&school=" + schoolID +
  142. 	  "&age="+ ageID +
  143.       "&level=" + level +
  144.       "&sid=" + Math.random();
  145.  
  146.    alert(url);
  147.       xmlhttp.onreadystatechange = function(){
  148.  
  149.       if (xmlhttp.readyState == 4){
  150.  
  151.       // document.getElementById("durationdiv").innerHTML = xmlhttp.responseText;
  152.  
  153.       document.getElementById("duration").innerHTML = xmlhttp.responseText;
  154.       document.getElementById("duration").disabled = 0;
  155.   alert(xmlhttp.responseText);
  156.       }
  157.  
  158.       };
  159.  
  160.       xmlhttp.open("GET",url,true);
  161.       xmlhttp.send(null);
  162.  
  163.       }
  164.  
  165. 	  function getPlace(duration){
  166.  
  167.       var xmlhttp = GetXmlHttpObject();
  168.  
  169.       if(!xmlhttp){ return; }
  170.  
  171.       var langID = document.getElementById("language").value;
  172.       var schoolID = document.getElementById("school").value;
  173.       var ageID = document.getElementById("age").value;  
  174. 	  var levelID = document.getElementById("level").value;  
  175.  
  176.       var url = "findplace.php" +
  177.       "?language=" + langID +
  178.       "&school=" + schoolID +
  179. 	  "&age="+ ageID +
  180.       "&level=" + levelID +
  181. 	  "&duration=" + duration +
  182.       "&sid=" + Math.random();
  183.  
  184.       xmlhttp.onreadystatechange = function(){
  185.  
  186.       if (xmlhttp.readyState == 4){
  187.  
  188.       // document.getElementById("durationdiv").innerHTML = xmlhttp.responseText;
  189.  
  190.       document.getElementById("place").innerHTML = xmlhttp.responseText;
  191.       document.getElementById("place").disabled = 0;
  192.  
  193.       }
  194.  
  195.       };
  196.  
  197.       xmlhttp.open("GET",url,true);
  198.       xmlhttp.send(null);
  199.  
  200.       }
  201.  
  202. 	  function getBoard(place){
  203.  
  204.       var xmlhttp = GetXmlHttpObject();
  205.  
  206.       if(!xmlhttp){ return; }
  207.  
  208.       var langID = document.getElementById("language").value;
  209.       var schoolID = document.getElementById("school").value;
  210.       var ageID = document.getElementById("age").value;  
  211. 	  var levelID = document.getElementById("level").value;  
  212. 	  var durationID = document.getElementById("duration").value;
  213.  
  214.       var url = "findboard.php" +
  215.       "?language=" + langID +
  216.       "&school=" + schoolID +
  217. 	  "&age="+ ageID +
  218.       "&level=" + levelID +
  219. 	  "&duration=" + durationID +
  220. 	  "&place=" + place +
  221.       "&sid=" + Math.random();
  222.  
  223.  
  224.       xmlhttp.onreadystatechange = function(){
  225.  
  226.       if (xmlhttp.readyState == 4){
  227.  
  228.       // document.getElementById("durationdiv").innerHTML = xmlhttp.responseText;
  229.  
  230.       document.getElementById("board").innerHTML = xmlhttp.responseText;
  231.       document.getElementById("board").disabled = 0;
  232.  
  233.       }
  234.  
  235.       };
  236.  
  237.       xmlhttp.open("GET",url,true);
  238.       xmlhttp.send(null);
  239.  
  240.       }
  241.  
  242. 	  function getRoom(board){
  243.  
  244.       var xmlhttp = GetXmlHttpObject();
  245.  
  246.       if(!xmlhttp){ return; }
  247.  
  248.       var langID = document.getElementById("language").value;
  249.       var schoolID = document.getElementById("school").value;
  250.       var ageID = document.getElementById("age").value;  
  251. 	  var levelID = document.getElementById("level").value;  
  252. 	  var durationID = document.getElementById("duration").value;
  253. 	  var placeID = document.getElementById("place").value;
  254.  
  255.       var url = "findroom.php" +
  256.       "?language=" + langID +
  257.       "&school=" + schoolID +
  258. 	  "&age="+ ageID +
  259.       "&level=" + levelID +
  260. 	  "&duration=" + durationID +
  261. 	  "&place=" + placeID +
  262. 	  "&board=" + board +
  263.       "&sid=" + Math.random();
  264.  
  265.  
  266.       xmlhttp.onreadystatechange = function(){
  267.  
  268.       if (xmlhttp.readyState == 4){
  269.  
  270.       // document.getElementById("durationdiv").innerHTML = xmlhttp.responseText;
  271.  
  272.       document.getElementById("room").innerHTML = xmlhttp.responseText;
  273.       document.getElementById("room").disabled = 0;
  274.  
  275.       }
  276.  
  277.       };
  278.  
  279.       xmlhttp.open("GET",url,true);
  280.       xmlhttp.send(null);
  281.  
  282.       }
  283.  
  284. 	  function getSeason(room){
  285.  
  286.       var xmlhttp = GetXmlHttpObject();
  287.  
  288.       if(!xmlhttp){ return; }
  289.  
  290.       var langID = document.getElementById("language").value;
  291.       var schoolID = document.getElementById("school").value;
  292.       var ageID = document.getElementById("age").value;  
  293. 	  var levelID = document.getElementById("level").value;  
  294. 	  var durationID = document.getElementById("duration").value;
  295. 	  var placeID = document.getElementById("place").value;
  296. 	  var boardID = document.getElementById("board").value;
  297.  
  298.       var url = "findseason.php" +
  299.       "?language=" + langID +
  300.       "&school=" + schoolID +
  301. 	  "&age="+ ageID +
  302.       "&level=" + levelID +
  303. 	  "&duration=" + durationID +
  304. 	  "&place=" + placeID +
  305. 	  "&board=" + boardID +
  306. 	  "&room=" + room +
  307.       "&sid=" + Math.random();
  308.  
  309.  
  310.       xmlhttp.onreadystatechange = function(){
  311.  
  312.       if (xmlhttp.readyState == 4){
  313.  
  314.       // document.getElementById("durationdiv").innerHTML = xmlhttp.responseText;
  315.  
  316.       document.getElementById("season").innerHTML = xmlhttp.responseText;
  317.       document.getElementById("season").disabled = 0;
  318.  
  319.       }
  320.  
  321.       };
  322.  
  323.       xmlhttp.open("GET",url,true);
  324.       xmlhttp.send(null);
  325.  
  326.       }

Sample PHP file

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?php
  2.  
  3.  
  4. $language = $_GET["language"];
  5. $school = $_GET["school"];
  6. $age = $_GET["age"];
  7.  
  8.  
  9. mysql_connect("localhost", "root", "filabo01") or die(mysql_error());
  10.  
  11.   mysql_select_db("burkes1_jos") or die(mysql_error());
  12.  
  13.  
  14.  
  15. $query = mysql_query("SELECT le.leveltype
  16. FROM ssa_level AS le, ssa_schoolid AS s, ssa_course AS c, ssa_age as ag
  17. WHERE s.school = '$school'
  18. AND ag.agetype = '$age'
  19. AND s.schoolid = c.schoolid
  20. AND ag.ageid = c.ageid
  21. AND le.levelid = c.levelid
  22. GROUP BY le.leveltype")
  23. or die (mysql_error()); 
  24.  
  25. ?>
  26.  
  27. <option>Select Class Type</option>
  28. <? while($row = mysql_fetch_array($query)) { ?>
  29.  
  30.    <option value = <?=$row['leveltype']?>><?=$row['leveltype']?></option>
  31. <? } 
  32. ?>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
daved83 is offline Offline
15 posts
since Jul 2009
Permalink
Aug 27th, 2009
0

Re: AJAX dropdown list

Daved,

I must get to work now but had a quick look

Nothing jumps out as being particularly wrong for IE but you might like to try replacing :
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. document.getElementById("room").disabled = 0;
with
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. document.getElementById("room").setAttribute('disabled', 0);
which is generally safer.

Apart from that, the Javascript will simplify enormously (once it's debugged). Reason being, eight of your nine functions are virtually identical and can be replaced with a single function, branching for (a) which php script is called and (b) where the reponse is stuffed. I can show how to do this efficiently.

Will look further when I return home later.

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009
Permalink
Aug 27th, 2009
0

Re: AJAX dropdown list

Appreciate it Airshow
Reputation Points: 10
Solved Threads: 0
Newbie Poster
daved83 is offline Offline
15 posts
since Jul 2009
Permalink
Aug 27th, 2009
1

Re: AJAX dropdown list

Daved83,

It turns out that IE has a bug whereby "if you use innerHTML to add or update form elements, all sorts of screwiness can occur".

The linked article suggests a workaround which proves to be a little impractical for your purpose so I have formulated something that still involves innerHTML but at one container higher than your select menus.

*** *** *** *** *** *** ***
My workaround (see attached file) requires your php scripts each to return a WHOLE select menu complete with the <select ....></select> tags (including all attributes, id , name , onchange - but not disabled ).
*** *** *** *** *** *** ***

There's a second (logical) issue, in that the user may go back, higher in the cascade, and re-select from a menu. This will invalidate all subordinate menus in the cascade so we must always ensure that all subordinate menus from "x+2" are
reset to "null" settings. This is moderately tricky but the code below includes code to cater for it, involving stashing away a clone of the originally served "Select xxxx first" menu, then re-cloning when required back into its original place in the DOM (see comments in code) - hopefully not as inefficient as it may seem as javascript's "garbage collection" should handle the debris on each occasion. Besides, the page is short-lived so we are not too worried.

HTML Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Airshow :: Untitled</title>
  6. <!-- daniweb_post959826.html -->
  7. <link rel="stylesheet" type="text/css" href="form.css">
  8. <script type = text/javascript src = getschool1.js></script>
  9. <script>
  10. function GetXmlHttpObject(){
  11. 	var xmlHttp = false;
  12. 	try {
  13. 		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") //For Old Microsoft Browsers
  14. 	}
  15. 	catch(e){
  16. 		try{
  17. 			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//For Microsoft IE 6.0+
  18. 		}
  19. 		catch(e2){
  20. 			xmlHttp = false;
  21. 		}
  22. 	}
  23. 	if (!xmlHttp && typeof XMLHttpRequest != 'undefined'){
  24. 		xmlHttp = new XMLHttpRequest();//For Mozilla, Opera Browsers
  25. 	}
  26. 	if(!xmlHttp) { alert("Browser does not support HTTP Request"); }
  27. 	return xmlHttp;
  28. }
  29. //*********************************************************************
  30. function getNextMenu(x){
  31. 	var xmlhttp = GetXmlHttpObject();
  32. 	if(!xmlhttp){ return; }
  33. 	var menus = [
  34. 		[ 'language' , 'findcity.php' ],
  35. 		[ 'school'   , 'findage.php' ],
  36. 		[ 'age'      , 'findlevel.php' ],
  37. 		[ 'level'    , 'findduration.php' ],
  38. 		[ 'duration' , 'findplace.php' ],
  39. 		[ 'place'    , 'findboard.php' ],
  40. 		[ 'board'    , 'findroom.php' ],
  41. 		[ 'room'     , 'findseason.php' ],
  42. 		[ 'season'   , '' ]
  43. 	];
  44. 	//1. Compose url - we can now do this by looping through the menus array.
  45. 	var queryString = [];
  46. 	for(var i=0; i<menus.length; i++){
  47. 		var menu = document.getElementById(menus[i][0]);
  48. 		if(menu && !menu.getAttribute('disabled')){
  49. 			queryString.push(menu.name + '=' + menu[menu.selectedIndex].value);
  50. 		}
  51. 	}
  52. 	url = menus[x][1] + '?' + queryString.join('&');
  53. 	//2. Establish AJAX response handler
  54. 	xmlhttp.onreadystatechange = function(){
  55. 		var menu, menuContainer, cloned;
  56. 		if (xmlhttp.readyState == 4){
  57. 			//2a. Set options for next menu in the cascade.
  58. 			menu = document.getElementById(menus[x+1][0]);
  59. 			if(menu){
  60. 				menuContainer = menu.parentNode;
  61. 				if(!menuContainer.getAttribute('cloned')){
  62. 					menuContainer.nullClone = menu.cloneNode(true);//clone the "null" menu and stash it away (invisibly) as an attribute of the menu's container.
  63. 					menuContainer.setAttribute('cloned', 1);
  64. 				}
  65. 				menuContainer.innerHTML = xmlhttp.responseText;
  66. 			}
  67. 			//2b. User may go back, higher in the cascade, and se-select from a menu. 
  68. 			// This will invalidate all subordinate menus in the cascade.
  69. 			// Therefore reset all subordinate menus to "null" settings.
  70. 			for(var i=x+2; i<menus.length; i++){
  71. 				menu = document.getElementById(menus[i][0]);
  72. 				if(menu){
  73. 					menuContainer = menu.parentNode;
  74. 					if(menuContainer && menuContainer.getAttribute('cloned')){
  75. 						menuContainer.replaceChild(menuContainer.nullClone.cloneNode(true), menu);
  76. 					}
  77. 				}
  78. 			}
  79. 		}
  80. 	};
  81. 	xmlhttp.open("GET",url,true);
  82. 	xmlhttp.send(null);
  83. }
  84. </script> 
  85. </head> 
  86.  
  87. <body> 
  88.  
  89. <form id='prices' action="process.php" method="post"> 
  90. <table> 
  91. <td align="right"> Language of interest:</td> 
  92. <td> 
  93. <select id="language" name="language" onChange="getNextMenu(0)"> 
  94. <option value="none selected">  --- select --- </option> 
  95. <option value="french"> French</option> 
  96. <option value="german"> German</option> 
  97. <option value="italian"> Italian</option> 
  98. <option value="spanish"> Spanish</option> 
  99. <option value="russian"> Russian</option> 
  100. </select> 
  101. </td> 
  102. <tr> 
  103. <td align="right"> School</td> 
  104. <td> 
  105. <select id="school" name="school" onChange="getNextMenu(1)" disabled> 
  106. <option value="none selected"> Select Language First</option> 
  107. </select> 
  108. </td> 
  109. </tr> 
  110. <tr> 
  111. <td align="right"> Course Type</td> 
  112. <td> 
  113. <select id="age" name="age" onChange="getNextMenu(2)" disabled> 
  114. <option value="none selected">  Select School First </option> 
  115. </select> 
  116. </td> 
  117. </tr> 
  118. <tr> 
  119. <td align="right"> Class Type</td> 
  120. <td> 
  121. <select id="level" name="level" onChange="getNextMenu(3)" disabled> 
  122. <option value="none selected"> Select Course Type First</option> 
  123. </select> 
  124. </td> 
  125. </tr> 
  126. <tr> 
  127. <td align="right"> Duration</td> 
  128. <td> 
  129. <select id="duration" name="duration" onChange="getNextMenu(4)" disabled> 
  130. <option value="none selected"> Select Class Type First</option> 
  131. </select> 
  132. </td> 
  133. </tr> 
  134. <tr> 
  135. <td align="right"> Accommodation</td> 
  136. <td> 
  137. <select id="place" name="place" onChange="getNextMenu(5)" disabled> 
  138. <option value="none selected"> Select Duration First</option> 
  139. </select> 
  140. </td> 
  141. </tr> 
  142. <tr> 
  143. <td align="right"> Board</td> 
  144. <td> 
  145. <select id="board" name="board" onChange="getNextMenu(6)" disabled> 
  146. <option value="none selected"> Select Acc First</option> 
  147. </select> 
  148. </td> 
  149. </tr> 
  150. <tr> 
  151. <td align="right"> Room Type</td> 
  152. <td> 
  153. <select id="room" name="room" onChange="getNextMenu(7)" disabled> 
  154. <option value="none selected"> Select Board First</option> 
  155. </select> 
  156. </tr> 
  157. <tr> 
  158. <td align="right"> Season</td> 
  159. <td> 
  160. <select id="season" name="season" disabled> 
  161. <option value="none selected"> Select Room First</option> 
  162. </select> 
  163. </td> 
  164. </tr> 
  165. <tr> 
  166. <td align="right"> Currency</td> 
  167. <td> 
  168. <select name="currency" > 
  169. <option value="none selected">  --- select --- </option> 
  170. <option value="euro"> Euro</option> 
  171. <option value="sterling"> Sterling</option> 
  172. <option value="dollar"> Dollar</option> 
  173. </select> 
  174. </td> 
  175. </tr> 
  176. <tr> 
  177. <td> 
  178. <input type="submit" id="submit" name="submit" value="Submit" /> 
  179. <input type="hidden" name="submitted" id="submitted" value="true" /> 
  180. </td> 
  181. </tr> 
  182. </td> 
  183. </table> 
  184.  
  185. </body> 
  186. </html>

I have tested in IE6, FF 3.5.2 and Opera 9.0.1

The big test will be FORM SUBMISSION!!! There's still a possibility that IE may not include all menu values in the POST. I have not been able to test this aspect.

Airshow
Last edited by Airshow; Aug 27th, 2009 at 9:36 pm.
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009
Permalink
Aug 28th, 2009
0

Re: AJAX dropdown list

Works like a dream Airshow. Fair play. Once again you saved my ass!!!! Cheers!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
daved83 is offline Offline
15 posts
since Jul 2009
Permalink
Aug 28th, 2009
0

Re: AJAX dropdown list

That's great Daved.

I've just thought of something you might like to watch out for. ....

.... In browsers, the user can give focus to a select menu then use the keyboard's up/down arrow keys to run through the options. In IE the onchange event fires as each option is selected (in FF and Opera I think the user needs to hit enter or return). Thus, in your application IE could initiate several Ajax calls before any of them has responded. Because these calls are asynchronous, the server could respond in any order and the x+1th menu in the cascade cound wind up showing the wrong set of options. Maybe you could run some tests to see if it's an issue.

A solution would be to disable the current (xth) menu in getNextMenu() , (eg. at the bottom of the querystring composition loop) then re-enable it in the onreadystatechange response handler. (In fact it might be a good idea to disable the whole cascade).

Another approach would be for the response handler to force the xth menu to show the right option for the response. Thus, the last response to arrive will win the day.

Either (or both) of these will make it pretty safe and should be fairly simple additions to the code but please ask if you need help.

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009
Permalink
Oct 29th, 2010
0
Re: AJAX dropdown list
Hello Daved83,
Hello Airshow,

lets me join this thread,
first of all i am a beginner need your advice in ajax, i have tried the code above and good, but i need your advice how to change the last result appear in text box not in select box. here is my code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Roshan's Ajax dropdown code</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <?
  6. #### Roshan's Ajax dropdown code with php
  7. #### Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
  8. #### if you have any problem contact me at http://roshanbh.com.np
  9. #### fell free to visit my blog http://php-ajax-guru.blogspot.com
  10. ?>
  11. <script>
  12. function GetXmlHttpObject(){
  13. 	var xmlHttp = false;
  14. 	try {
  15. 		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") //For Old Microsoft Browsers
  16. 	}
  17. 	catch(e){
  18. 		try{
  19. 			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//For Microsoft IE 6.0+
  20. 		}
  21. 		catch(e2){
  22. 			xmlHttp = false;
  23. 		}
  24. 	}
  25. 	if (!xmlHttp && typeof XMLHttpRequest != 'undefined'){
  26. 		xmlHttp = new XMLHttpRequest();//For Mozilla, Opera Browsers
  27. 	}
  28. 	if(!xmlHttp) { alert("Browser does not support HTTP Request"); }
  29. 	return xmlHttp;
  30. }
  31. //*********************************************************************
  32. function getNextMenu(x){
  33. 	var xmlhttp = GetXmlHttpObject();
  34. 	if(!xmlhttp){ return; }
  35. 	var menus = [
  36. 		[ 'country' , 'findcity.php' ],
  37. 		[ 'city'   , 'findvalue.php' ],
  38. 		[ 'value'   , '' ]
  39. 	];
  40. 	//1. Compose url - we can now do this by looping through the menus array.
  41. 	var queryString = [];
  42. 	for(var i=0; i<menus.length; i++){
  43. 		var menu = document.getElementById(menus[i][0]);
  44. 		if(menu && !menu.getAttribute('disabled')){
  45. 			queryString.push(menu.name + '=' + menu[menu.selectedIndex].value);
  46. 		}
  47. 	}
  48. 	url = menus[x][1] + '?' + queryString.join('&');
  49. 	//2. Establish AJAX response handler
  50. 	xmlhttp.onreadystatechange = function(){
  51. 		var menu, menuContainer, cloned;
  52. 		if (xmlhttp.readyState == 4){
  53. 			//2a. Set options for next menu in the cascade.
  54. 			menu = document.getElementById(menus[x+1][0]);
  55. 			if(menu){
  56. 				menuContainer = menu.parentNode;
  57. 				if(!menuContainer.getAttribute('cloned')){
  58. 					menuContainer.nullClone = menu.cloneNode(true);//clone the "null" menu and stash it away (invisibly) as an attribute of the menu's container.
  59. 					menuContainer.setAttribute('cloned', 1);
  60. 				}
  61. 				menuContainer.innerHTML = xmlhttp.responseText;
  62. 			}
  63. 			//2b. User may go back, higher in the cascade, and se-select from a menu. 
  64. 			// This will invalidate all subordinate menus in the cascade.
  65. 			// Therefore reset all subordinate menus to "null" settings.
  66. 			for(var i=x+2; i<menus.length; i++){
  67. 				menu = document.getElementById(menus[i][0]);
  68. 				if(menu){
  69. 					menuContainer = menu.parentNode;
  70. 					if(menuContainer && menuContainer.getAttribute('cloned')){
  71. 						menuContainer.replaceChild(menuContainer.nullClone.cloneNode(true), menu);
  72. 					}
  73. 				}
  74. 			}
  75. 		}
  76. 	};
  77. 	xmlhttp.open("GET",url,true);
  78. 	xmlhttp.send(null);
  79. }
  80. </script>
  81.  
  82.  
  83.  
  84.  
  85. </head>
  86.  
  87. <body>
  88.  
  89. <form method="post" action="" name="form1">
  90. <table width="60%" border="0" cellspacing="0" cellpadding="0">
  91.   <tr>
  92.     <td width="150">Country</td>
  93.     <td  width="150"><select name="country" id="country" onChange="getNextMenu(0)">
  94. 	<option value="">Select Country</option>
  95. 	<option value="1">USA</option>
  96. 	<option value="2">Canada</option>
  97.         </select></td>
  98.   </tr>
  99.   <tr style="">
  100.     <td>City</td>
  101.     <td ><select name="city" id="city" onChange="getNextMenu(1)" disabled>
  102. <option value="none selected"> Select country First</option> 
  103.         </select></td>
  104.   </tr>
  105.   <tr style="">
  106.     <td>Value</td>
  107.     <td >
  108.     <select name="value" id="value" disabled>
  109. <option value="none selected"> Select city First </option> 
  110.      </select>
  111.    </td>
  112.   </tr>
  113.  
  114.   <tr>
  115.     <td>&nbsp;</td>
  116.     <td>&nbsp;</td>
  117.   </tr>
  118.   <tr>
  119.     <td>&nbsp;</td>
  120.     <td>&nbsp;</td>
  121.   </tr>
  122. </table>
  123. </form>
  124. </body>
  125. </html>

the last result code is :
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <? $city=intval($_REQUEST['city']);
  2. $link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
  3. if (!$link) {
  4.     die('Could not connect: ' . mysql_error());
  5. }
  6. mysql_select_db('db_ajax');
  7. $query="select val from city where id=$city";
  8. $result=mysql_query($query);
  9. $valrow=mysql_fetch_assoc($result);
  10. ?>
  11. <input type="text" name="value" value="<?php echo $valrow['val']; ?>">

thank your help before

best regards
Reputation Points: 10
Solved Threads: 0
Newbie Poster
nicosa is offline Offline
6 posts
since Oct 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Executing a function on page load ?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to upload and retrieve image from postgresql using JSP





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC