AJAX generated <select> and FIREFOX

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Sep 2007
Posts: 25
Reputation: roy-- is an unknown quantity at this point 
Solved Threads: 0
roy-- roy-- is offline Offline
Light Poster

AJAX generated <select> and FIREFOX

 
0
  #1
Sep 11th, 2007
Hello,

I am trying to implement two cascading <select> boxes. the second box's options would be fetched from a mysql db via a PHP script.

it works fine on IE.

Problems rise when it comes to Firefox, the form would not submit the value from the second <select> box.

I have the feeling that we need to return the name/value pairs of data and generate the <option>s on client-side, I just dont know how to do it using DOM.

Please advise..

Below is code for both the JS and PHP scripts:

PHP script

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <?php
  3. $countrycode=$_GET["countrycode"];
  4.  
  5. include("key.php");
  6. $connection = mysql_connect($mysql_host_name,$username, $password) or die(mysql_error());
  7. $db = mysql_select_db($mysql_db_name,$connection) or die ("Couldn't select database.");
  8.  
  9. mysql_select_db("getCities", $connection);
  10.  
  11. $sql="SELECT city_id, countrycode, name, nr_hotels FROM getCities WHERE countrycode = '".$countrycode."' ORDER BY name";
  12.  
  13. $result = mysql_query($sql);
  14. echo "
  15. <select name=\"city_id\" style=\"font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size:15px \">
  16. <OPTION VALUE=\"0\">-----------------------------------------
  17. ";
  18.  
  19. $options="";
  20.  
  21. while($row = mysql_fetch_array($result))
  22. {
  23.  
  24. $cityname=$row["name"];
  25. $city_id=$row["city_id"];
  26. $nr_hotels=$row["nr_hotels"];
  27. $options.="<OPTION VALUE=\"$city_id\">".$cityname." (".$nr_hotels." hotels)";
  28.  
  29. }
  30. echo $options;
  31.  
  32. echo "</select>";
  33.  
  34. mysql_close($connection);
  35. ?>

Javascript

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. var xmlHttp
  3.  
  4. function showUser(str)
  5. {
  6. xmlHttp=GetXmlHttpObject()
  7. if (xmlHttp==null)
  8. {
  9. alert ("Browser does not support HTTP Request")
  10. return
  11. }
  12. var url="ajax.php"
  13. url=url+"?q="+str
  14. url=url+"&sid="+Math.random()
  15. xmlHttp.onreadystatechange=stateChanged
  16. xmlHttp.open("GET",url,true)
  17. xmlHttp.send(null)
  18. }
  19.  
  20. function stateChanged()
  21. {
  22. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  23. {
  24. document.getElementById("txtHint").innerHTML=xmlHttp.responseText
  25. }
  26. }
  27.  
  28. function GetXmlHttpObject()
  29. {
  30. var xmlHttp=null;
  31. try
  32. {
  33. // Firefox, Opera 8.0+, Safari
  34. xmlHttp=new XMLHttpRequest();
  35. }
  36. catch (e)
  37. {
  38. //Internet Explorer
  39. try
  40. {
  41. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  42. }
  43. catch (e)
  44. {
  45. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  46. }
  47. }
  48. return xmlHttp;
  49. }
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 25
Reputation: roy-- is an unknown quantity at this point 
Solved Threads: 0
roy-- roy-- is offline Offline
Light Poster

Re: AJAX generated <select> and FIREFOX

 
0
  #2
Sep 12th, 2007
help pls!
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 54
Reputation: HazardTW is an unknown quantity at this point 
Solved Threads: 2
HazardTW HazardTW is offline Offline
Junior Poster in Training

Re: AJAX generated <select> and FIREFOX

 
0
  #3
Sep 12th, 2007
It looks like you are creating a select element with unclosed options elements.

You have the opening and closing tags for select, but I only see the opening tags for the options, which may or may not be your problem.

I use dynamically created options for my select's using ajax requests to PHP code that gets data from a database as well, but the route I took was to have the select elements present in the HTML code with one dummy <option></option>.

When my ajax request is made, my php does not generate text to get with responseText, but it creates an XML document that has the values+text for each element and retrieved with XMLresult instead of responseText.

For my company contacts menu their names are the text and the value is their email address and the XML doc would contain:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <row>Bob,bob@abc.com</row>
  2. <row>Sally,sally@123.com</row>

Of course this is not a full XML doc, but my JS iterates over the "row" tags in the XML and puts the info into a global array named company_email.

Then I use the following to remove any/all options from the select object, and create new options, split the company_email at the comma and set the value and text of the option elements accordingly.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var cs = document.getElementById("<your select element id here");
  2. //remove all options from the select
  3. while ( cs.options.length )
  4. {
  5. cs.remove(cs.options[0]);
  6. }
  7. for ( var i = 0; i < company_email.length; i++ )
  8. {
  9. var newOpt=document.createElement('option');
  10. var tmp = company_email[i].split(",");
  11. newOpt.text=tmp[0];// the text will be the persons name
  12. try
  13. {
  14. cs.add(newOpt,null); // standards compliant
  15. }
  16. catch(ex)
  17. {
  18. cs.add(newOpt); // IE only
  19. }
  20. cs.options[i].value = tmp[1];//the value will be the persons email
  21. cs.selectedIndex = 0;//select the first option, should be default but make sure
  22. }

I just found it easier to work with elements that were generated in the HTML document than to try to dynamically create new elements on the fly, if you want to try this different route and would like to see how I create and read the XML docs let me know.
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 25
Reputation: roy-- is an unknown quantity at this point 
Solved Threads: 0
roy-- roy-- is offline Offline
Light Poster

Re: AJAX generated <select> and FIREFOX

 
0
  #4
Sep 12th, 2007
Hello HazardTW, thank you for your reply. I would very much like to know more about your approach.
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 54
Reputation: HazardTW is an unknown quantity at this point 
Solved Threads: 2
HazardTW HazardTW is offline Offline
Junior Poster in Training

Re: AJAX generated <select> and FIREFOX

 
0
  #5
Sep 13th, 2007
Try this out...

You need a table in your DB named email with at least one column named email.
The data in each row should be in this format: name,email Example: Bob,bob@bob.com

I did test this and verified that it works as long as:
a) you can connect to your database
b) you have a table named email with a column name email
c) you can run PHP on your host server I assume

The php file outputs an XML document, you can just open the PHP directly in the browser and see it's output, might help you get an idea of what it's doing.

The PHP filetest.ajax.php)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?php
  2. header('Content-Type: text/xml');
  3. header("Cache-Control: no-cache, must-revalidate");
  4. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  5. echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r";
  6. echo "<response>\r\r";
  7. //=============================================================================//
  8. $dbconn = NULL;
  9. function dbconnect($verbose=true) {
  10. global $dbconn;
  11. include('<usernames and pws come in here>');
  12. if (!$dbconn = @mysql_connect("localhost",$name,$pw)){return false;}
  13. if($verbose){echo "\r<!-- opening mysql connection -->\r";}
  14. return true;}
  15. //=============================================================================//
  16.  
  17. // this function creates a string delimited by "^": "Bob Smith,bob@abc.com^Sally White,sally@xyz.com^John Doe,jdoe@msn.com"
  18.  
  19. // this function actually serves a bunch of uses, not just the email, I stripped out everything else
  20. // there are some queries where I want unique results only, others I want all results, hence the 'allowDuplicates' toggle
  21.  
  22.  
  23. function db_fetch_str($table,$needle,$haystack_1=1,$match_1=1,$allowDuplicates=false,$haystack_2=1,$match_2=1) {
  24. $str = "";
  25. $sql = "SELECT $needle FROM $table WHERE $haystack_1 = '$match_1' AND $haystack_2 = '$match_2'";
  26. $result = @mysql_query($sql);
  27. if ( !$result || !mysql_affected_rows())
  28. {
  29. $str .= "-- NONE --";
  30. }
  31. else
  32. {
  33. $delimiter = "";
  34. $dups = array();
  35. while ( $row = @mysql_fetch_array($result))
  36. {
  37. if ( $allowDuplicates || !in_array($row[$needle],$dups) )
  38. {
  39. if (!$allowDuplicates){array_push($dups,$row[$needle]);}
  40. $str .= $delimiter.$row[$needle];
  41. $delimiter = "^";
  42. }
  43. }
  44. }
  45. return($str);
  46. }
  47. // ------------------------------------------------------------- //
  48. $connection_open = dbconnect(false) or die(" <status>FAILED DBCONN</status>\r</response>");
  49. @mysql_select_db("<name of your database>") or die(" <status>FAILED DBSELECT</status>\r</response>");
  50.  
  51. echo "<status>SUCCESS</status>\r";
  52.  
  53. echo "<email>".db_fetch_str('email','email',1,1,true)."</email>\r";
  54.  
  55. echo "\r</response>";
  56. if ($connection_open){@mysql_close($dbconn);}?>
And the HTML with javascript in it:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. <!--
  8. function HttpClient() { } // HTTPCLIENT CLASS
  9. HttpClient.prototype = {
  10. // type GET,POST passed to open
  11. requestType:'GET',
  12. // when set to true, async calls are made
  13. isAsync:true,
  14. // where an XMLHttpRequest instance is stored
  15. xmlhttp:false,
  16. // what is called when a successful async call is made
  17. callback:false,
  18. // what is called when send is called on XMLHttpRequest
  19. // set your own function to onSend to have a custom loading
  20. // effect
  21. onSend:function()
  22. {
  23. //document.getElementById('HttpClientStatus').style.display = 'block';
  24. },
  25.  
  26. // what is called when readyState 4 is reached, this is
  27. // called before your callback
  28. onload:function()
  29. {
  30. //document.getElementById('HttpClientStatus').style.display = 'none';
  31. },
  32.  
  33. // what is called when an http error happens
  34. onError:function(error)
  35. {
  36. alert(error);
  37. },
  38.  
  39. // method to initialize an xmlhttpclient
  40. init:function()
  41. {
  42. try
  43. {
  44. // Mozilla / Safari
  45. this.xmlhttp = new XMLHttpRequest();
  46. }
  47. catch (e)
  48. {
  49. // IE
  50. var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
  51. 'MSXML2.XMLHTTP.4.0',
  52. 'MSXML2.XMLHTTP.3.0',
  53. 'MSXML2.XMLHTTP',
  54. 'Microsoft.XMLHTTP');
  55. var success = false;
  56. for (var i=0;i < XMLHTTP_IDS.length && !success; i++)
  57. {
  58. try
  59. {
  60. this.xmlhttp = new ActiveXObject
  61. (XMLHTTP_IDS[i]);
  62. success = true;
  63. }
  64. catch (e)
  65. {}
  66. }
  67. if (!success)
  68. {
  69. this.onError('Unable to create XMLHttpRequest.');
  70. }
  71. }
  72. },
  73. // method to make a page request
  74. // @param string url The page to make the request to
  75. // @param string payload What you're sending if this is a POST
  76. // request
  77. makeRequest: function(url,payload)
  78. {
  79. if (!this.xmlhttp)
  80. {
  81. this.init();
  82. }
  83. this.xmlhttp.open(this.requestType,url,this.isAsync);
  84.  
  85. // set onreadystatechange here since it will be reset after a
  86. //completed call in Mozilla
  87. var self = this;
  88. this.xmlhttp.onreadystatechange = function()
  89. {
  90. self._readyStateChangeCallback();
  91. }
  92. if (this.requestType == "POST")
  93. {
  94. this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  95. this.xmlhttp.setRequestHeader("Content-length", payload.length);
  96. this.xmlhttp.setRequestHeader("Connection", "close");
  97. }
  98.  
  99. this.xmlhttp.send(payload);
  100.  
  101. if (!this.isAsync)
  102. {
  103. return this.xmlhttp.responseXML;
  104. }
  105. },
  106.  
  107. // internal method used to handle ready state changes
  108. _readyStateChangeCallback:function()
  109. {
  110. switch(this.xmlhttp.readyState)
  111. {
  112. case 2:
  113. this.onSend();
  114. break;
  115. case 4:
  116. this.onload();
  117. if (this.xmlhttp.status == 200)
  118. {
  119. this.callback(this.xmlhttp.responseXML);
  120. }
  121. else
  122. {
  123. this.onError('HTTP Error Making Request: ' + '[' + this.xmlhttp.status + ']' + ' ' + this.xmlhttp.statusText);
  124. }
  125. break;
  126. }
  127. }
  128. }
  129.  
  130. var client = new HttpClient();// create an instance of the object
  131. client.isAsync = false;// I personally set this to false to hold execution until the request is finished
  132. var company_email = null;// declare the global
  133. var http_status = null; // global I use to keep track of status
  134. function get_global_email()
  135. {
  136. client.requestType = "GET";
  137. // function to handle completed calls
  138. client.callback = function(XMLresult)
  139. {
  140. if (XMLresult.getElementsByTagName("status"))// did XML page create a 'status' element?
  141. {
  142. http_status = XMLresult.getElementsByTagName("status")[0].childNodes[0].nodeValue;
  143. }else{// if no 'status' element was returned, set global http_status to FAILED NO STATUS
  144. http_status = "FAILED NO STATUS";
  145. return;
  146. }
  147. if (http_status == "SUCCESS") {// if we got a SUCCESS in 'status' element, put row data in global variable
  148. // use of split("^") gives us an array of "name,email" pairs.
  149. company_email = XMLresult.getElementsByTagName("email")[0].childNodes[0].nodeValue.split("^");
  150. }
  151. }
  152. client.makeRequest('test.ajax.php?sid='+Math.random(),null);
  153. return;
  154. }
  155.  
  156. function build_contact_list()
  157. {
  158. http_status=null; // make sure it's clear beforehand
  159. get_global_email(); // call our ajax function to retrieve contact info from database
  160.  
  161. // handle incomplete requests
  162. if (http_status != "SUCCESS"){alert("something went wrong:"+http_status);return;}
  163.  
  164. var cm = document.getElementById("contact_menu"); // get the select element
  165.  
  166. // remove all options from this select element
  167. while ( cm.options.length )
  168. {
  169. cm.remove(cm.options[0]);
  170. }
  171.  
  172. for ( var i = 0; i < company_email.length; i++ )
  173. {
  174. var newOpt=document.createElement('option');
  175. // now seperate the name from the email address
  176. var tmp = company_email[i].split(",");
  177. newOpt.text=tmp[0];// set the persons name as the text of the option element
  178. try
  179. {
  180. cm.add(newOpt,null); // standards compliant
  181. }
  182. catch(ex)
  183. {
  184. cm.add(newOpt); // IE only
  185. }
  186. cm.options[i].value = tmp[1];// set the email address as the value of the option element
  187. cm.selectedIndex = 0;
  188. }
  189. }
  190.  
  191.  
  192. -->
  193. </script>
  194. </head>
  195.  
  196. <body>
  197. <div>
  198. <select id="contact_menu">
  199. <option></option><!-- dummy option so you don't throw validation errors -->
  200. </select>
  201. <br>
  202. <button type="button" onClick="build_contact_list()">Build The Menu</button>
  203. </div>
  204. </body>
  205. </html>
  206.  

My disclaimer is that I have never been trained in programming, only self taught, so any pro's out there that see anything they wish to comment on, I would be happy to receive the critique.(with the exception of the HTML portion of the doc above that I just threw together for this example)

For simplicity I have been retrieving all rows I get from my database this way, in a "^" delimited string that I split once I have retrieved it.

Hope this helps you with your menu building.

This method has worked great so far, my goal for the app I am working on is to never have to reload the page and the menus are updated every time the layer is they are on is made visible.
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 25
Reputation: roy-- is an unknown quantity at this point 
Solved Threads: 0
roy-- roy-- is offline Offline
Light Poster

Re: AJAX generated <select> and FIREFOX

 
0
  #6
Sep 13th, 2007
Interesting approach you've got here.. appreciate your time.

I am no programmer myself, just trying to work things out :/

I tried your example and it worked fine.

My requirements are a bit different though,

I have two <select> boxes.

first contains a list of countries

second would a list of the cities in the selected country (i.e will be changed each time the first select is changed)

any ideas?


P.S: i found out that closing the <option> is optional in most of the browsers. did close it anyways though.
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 54
Reputation: HazardTW is an unknown quantity at this point 
Solved Threads: 2
HazardTW HazardTW is offline Offline
Junior Poster in Training

Re: AJAX generated <select> and FIREFOX

 
0
  #7
Sep 13th, 2007
Browsers will go into quirks mode when encountering markup errors, they try to correct your errors which can from my understanding result in slower pages and pages that do not render quite right.

Again from my understanding it is best to use a strict doc type and validate your code, the strict doc type tells the browser your doc contains no errors and to render it exactly as you have written.

On your cascading selects, that is actually more simple than you might think, I have them implemented 3-deep in my current app.

Here is an example of 2-deep cascading selects for country and city.

When you change the value of country, the "onChange" calls the function to rebuild the city menu, sending it's value for the function to use.

You will of course need to have all the arrays filled, you should be able to use the previous examples to fill in global variables for countries and cities.

Example:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. <!--
  8. var cities = new Array();
  9. cities["country1"]="c1city1,c1city2,c1city3";
  10. cities["country2"]="c2city1,c2city2,c2city3";
  11. cities["country3"]="c3city1,c3city2,c3city3";
  12.  
  13.  
  14. function build_city_menu(country)
  15. {
  16. var cs = document.getElementById("city_menu");
  17. // remove all options from it
  18. while ( cs.options.length )
  19. {
  20. cs.remove(cs.options[0]);
  21. }
  22.  
  23. var cty = cities[country].split(",");
  24.  
  25. for ( var i = 0; i < cty.length; i++ )
  26. {
  27. // create new option element
  28. var newOpt=document.createElement('option');
  29.  
  30. newOpt.text=cty[i];
  31. // try adding the option to the select object
  32. try
  33. {
  34. cs.add(newOpt,null); // standards compliant
  35. }
  36. catch(ex)
  37. {
  38. cs.add(newOpt); // IE only
  39. }
  40. // set the value to same as the text
  41. cs.options[i].value = cty[i];
  42. }
  43. // set selected index
  44. cs.selectedIndex = 0;
  45. }
  46.  
  47.  
  48. -->
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body onLoad="build_city_menu('country1')">
  54.  
  55. <select id="country_menu" onchange="build_city_menu(this.value)">
  56. <option value="country1" selected="selected">country 1</option>
  57. <option value="country2">country 2</option>
  58. <option value="country3">country 3</option>
  59. </select>
  60.  
  61. <select id="city_menu">
  62. <option></option>
  63. </select>
  64.  
  65. </body>
  66. </html>

You might use one global variable for the cities menu, and add an ajax call from the build_city_menu
function requesting the cities from your database for the country name passed to the function, have the returned result a comma delimited string place right into a global city_list and replace cities[] with that.
That would save you having to fill city lists for every country.
Last edited by HazardTW; Sep 13th, 2007 at 2:19 pm. Reason: Added a comment
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: AJAX generated <select> and FIREFOX

 
0
  #8
Sep 13th, 2007
Just remember that the validator can't validate code created by JavaScript. If an error occurs in a strict doctype due to JavaScript changing the code, the page often will quit working at that point.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 25
Reputation: roy-- is an unknown quantity at this point 
Solved Threads: 0
roy-- roy-- is offline Offline
Light Poster

Re: AJAX generated <select> and FIREFOX

 
0
  #9
Sep 13th, 2007
point taken regarding strict doc type. spot on.


You might use one global variable for the cities menu, and add an ajax call from the build_city_menu
function requesting the cities from your database for the country name passed to the function, have the returned result a comma delimited string place right into a global city_list and replace cities[] with that.
That would save you having to fill city lists for every country.
In my first post I managed to populate the second select box just fine. the whole problem was in the Ajax call.

I couldnt manage to write a proper ajax method that would work on all browsers (firefox didnt like my method) (refer to my first post)

it would be nice to see your way of doing it.

cheers mate.
Reply With Quote Quick reply to this message  
Join Date: Sep 2007
Posts: 54
Reputation: HazardTW is an unknown quantity at this point 
Solved Threads: 2
HazardTW HazardTW is offline Offline
Junior Poster in Training

Re: AJAX generated <select> and FIREFOX

 
0
  #10
Sep 13th, 2007
I will post more when I get home, but wanted to say thanks for that comment MidiMagic, I had not thought about that, so far I have had no problems, keeping fingers crossed.

Regarding Firefox not liking your HTTP requests, I have not figured why that is, but installing Firebug has worked on 3 PC's with Firefox 2.0.0.6 installed.

Each would not run my app until I installed Firebug, just google it, easy to find and install.

What's funny is I initially installed Firebug so I could view the response headers to see what was going on, but it magically started working then

EDIT: btw MidiMagic, are you referring to html created via document.write(), .innerHTML, or .createElement() + .appendChild()??
Last edited by HazardTW; Sep 13th, 2007 at 8:49 pm. Reason: Additional comment
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC