Refreshing a dropdown list when selecting another dropdown list.

[eluser]theighost[/eluser]
hi,

I am using codeigniter for a site and need to make a script that makes the following :

I have a dropdown list named "states" for example,and another drop down list named "cities".

I want when i select a state the "cities" dropdown list to refresh automaticly,showing the cities in the state selected.

I saw many scripts on the net...but they were not for codeiginter and they were using the method get, which i dont really know how to apply it in codeigniter.

BTW the states and the cities are taken from a database and are not static info.

any help would be appreciated.

[eluser]xwero[/eluser]
This can only be done using javascript. If you want this in php there is another action needed, for instance a button that submits the states selection.

Changing get urls to CI urls can be done by replacing the key-value pairs with segments: site.com/show?cities=1 -> site.com/show/cities/1. This change is done in javascript.

[eluser]theighost[/eluser]
yes i tried that, but the scripts that i tried written in ajax and when i tried to change them to look like site.com/show/cities/1, they didnt work.


this is the original code:

the file state.php:

<?
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i") . " 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'];

//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'>\n";
echo "<option value='0'>==== choose state ====</option>\n";
$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";
?&gt;





The second file state_dropdown.php:


&lt;?
echo "&lt;form name=sel&gt;\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";
?&gt;

[removed]
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)[removed]=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
[removed]







I changed the files (following in the next comment):

[eluser]theighost[/eluser]
the first file changed to:

&lt;?
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

header("content-type: application/x-javascript; charset=tis-620");

$data=$this->uri->segment(3);
$data=$this->uri->segment(4);

//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'>\n";
echo "<option value='0'>==== choose state ====</option>\n";
$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";
?&gt;




the second changed to :


&lt;?
echo "&lt;form name=sel&gt;\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";
?&gt;

[removed]
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)[removed]=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php/"+src+"/"+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
[removed]



and it didnt work plz help

[eluser]xwero[/eluser]
Check in firebug if the url is correct. I'm guessing it's not because you have no state.php file in CI everything goes via the index.php file so your url will be something like index.php/state/"+src+"/"+val

[eluser]theighost[/eluser]
I've tried in every way now...its not working...there must be something missing...it doesnt even show any state in the dropdown menu although everything is written properly!

[eluser]xwero[/eluser]
did you check if the controller is outputting the cities? In other words what does site.com/index.php/state/src/val gives you?

I'm not an ajax specialist, i'm a jquery user Then your code looks like this

Code:

$('#states').change(function(){ // do when element with the id states changes
  // get the values you need for the url
  var val = $(this).val();
  var src = $(this).attr('id');

  $.ajax({
   url: "index.php/state/"+src+"/"+val, // build url
   success: function(msg){ // do if the ajax request is successful
     $('#cities').html(msg); // add server generated html to the element with the id cities
   }
  });

});

As you see it's a bit more readable than your javascript snippet that handles the XMLHttp object directly.

[eluser]theighost[/eluser]
yes i did that before and it has the same result...

you're code is little hard... i shall paste it instead of the "dochange()" function right?

and by the way i am not using site.com/index.php/state/src/val

but site.com/admin/controller_class/function(state)/state_dropdown/src/val

[eluser]xwero[/eluser]
It's not copy'n'paste code. It's meant as an example how it's done with jquery. Because you find it difficult i heavy documented it. And removed a line that wasn't needed.

The url too was meant as an example.

[eluser]theighost[/eluser]
yep i know that i should change it to my case...anyway its really strange that the dropdown list doesnt show anything....if the problem was in refreshing it would have been normal...but actually it doesn't take the values from the database(not likely) or the state.php doesn't run (likely) which contains the sql query!