Entry

How do I read values from a server side file to populate a drop down list?

Mar 1st, 2005 20:31
Bernhard Ostheimer, Josh Davis, Michael Pickard, Bill Overbaugh, A Matthews,

ADDITION AS OF 3-02-05
Check also the "XML HTTP Request object" operating properly on IE (Win),
Safari (Mac OS-X) and Mozilla

You can populate a SELECT-drop-down-list without reloading the page -
really neat.

Example: "Countries of the World" 
You need 2 scripts: a client-side Javascript an a server-sided script
(i.e. written in PHP).

The client-side script:

<script language="javascript" type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope 
// with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

// Letīs start up
xmlhttp.open("GET", "http://www.foo.com/countries.js" , true);
 xmlhttp.onreadystatechange=function() {
  // readyState==4 - meaning the load is complete
  if (xmlhttp.readyState==4) {
    // only if "OK"
    if (xmlhttp.status == 200) {
      // The javascript-code generated by the server-sided script 
      // will be executed 
      // (it includes an Javascript-Array like the one described below)
      eval(xmlhttp.responseText);
      // The Javascript-function defined below is called
      popSelect();
    }
  }
 }
 xmlhttp.send(null)
</script>

The server-sided script could look like (i.e. written in PHP):
<?php
echo "stateAr = new Array();\n";
// Get all the countries
$Countries = file("http://www.php.net/~derick/countries");
foreach ($Countries as $linenr => $line) {
  $splittedline = explode("\t",$line);
  // echo JS-Code by PHP (will be evaluated on the client side)
  echo "stateAr[".$linenr."] = ".
       "new Array('".$splittedline[0]."',".
       "'".$splittedline[0]." - ".addslashes($splittedline[2])."');\n";
}
?>


Links: 
- http://jibbering.com/2002/4/httprequest.2004.html
- http://developer.apple.com/internet/webcontent/xmlhttpreq.html
- http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
Countries: http://www.php.net/~derick/countries

--

You can't do this in JavaScript. You'll need a server-side language 
like Java (www.javasoft.com), PHP, ASP, ColdFusion or even Perl.


ADDITION AS OF 2-14-02

This is only partially true. If you can generate a page with a server-
side scripting language to create variables or an array of variables 
you can include that page through a javascript src.

Example:

Use a server-side scripting language to generate a page which includes 
something like this (note: javascript source only)-

var stateAr = new Array();
stateAr[0] = new Array('AK','AK - ALASKA');
stateAr[1] = new Array('AL','AL - ALABAMA');
.
.
.

Then include that generated page with a call like this-

<!-- 
the src file should use the extention of the scripting 
language you used to generate the file. For php use .php
for cold fusion use .cfm, etc
-->
<script src="states.js">
</script>

Then propogate you select list by using the following script-

<script>
function popSelect (){
   for(var x = 0; x < stateAr.length; x++){
      var opt = new Option(stateAr[x][1], stateAr[x][0]);
      //if Netscape 4.x 
      if(document.layers){
         var sel = document.forms.mfrm;
      //if IE or Netscape 6
      }else{
         var sel = document.mfrm;
      }
         sel.STATE[sel.STATE.length] = opt;
      }
}
</script>