Adding "selected" to Ajax dynamic drop down

**Mulith** · 09-26-2010 04:15 AM

Hi all,

I am in the process of adding a dynamic dropdown of cities that populates based on the county/state selected by the user.

I have managed to get it working but the problem I have is that when the user goes to edit their details this dropdown list does not:

1) Show the dynamically generated list of cities because the list uses the javascript onchange element i.e onChange="AjaxFunction(this.value);"

2)Have the city value that is stored in the database selected as default.

Here is the Ajax/Javascript used:

Code:

<script type="text/javascript">
function AjaxFunction(cat_id)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
          try
                        {
                    httpxml=new ActiveXObject("Msxml2.XMLHTTP");
                    }
              catch (e)
                    {
                try
              {
              httpxml=new ActiveXObject("Microsoft.XMLHTTP");
              }
                catch (e)
              {
              alert("Your browser does not support AJAX!");
              return false;
              }
            }
  }
function stateck() 
    {
    if(httpxml.readyState==4)
      {

var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.forms[0].city_id.options.length-1;j>=0;j--)
{
document.forms[0].city_id.remove(j);
}


for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];

document.forms[0].city_id.options.add(optn);

} 
      }
    }
    var url="dd.php";
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
</script>

Here is the code for dd.php:

Code:

<?
include('../Secure/DBConnect.php');

$cat_id=$_GET['cat_id'];
$q=mysql_query("SELECT * FROM locations WHERE tier4='$cat_id' AND tier5 != 0");
echo mysql_error();
$myarray=array();
$str="";
while($nt=mysql_fetch_array($q)){
$str=$str . "\"$nt[name]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo "new Array($str)";

?>

and this is how the function is called:

Code:

<tr><td class="input_label" align="right">County:</td><td colspan = "3"><?=$rs->SelectSQLWithValue("tier4", "form", "SELECT id, name, tier_value FROM locations WHERE tier_value < 5 AND tier5 = 0 AND tier_value > 1 ORDER BY id", 200,'County','onChange="AjaxFunction(this.value);"')?><span style="color:#5c9514; font-size:12px">*</span></td></tr>  
                  <tr><td class="input_label" align="right">Town/City:</td><td colspan = "3"><select name='city_id'><option value="1" disabled selected>Select county first...</option></select><span style="color:#5c9514; font-size:12px">*</span></td></tr>

The first problem is to get the list to dynamically populate on page load and the second is to include the users selected city as "selected" in the options created by javascipt and ajax functions.

Any help would be appreciated.

Thank you

**yearbass** · 09-26-2010 01:46 PM

in edit mode, it's better to let child element(s) remain empty, but assign the retrieved data to a variable. for example :

<script>
var city_id = "<?php echo $dataFromDB['city_id']; ?>";
</script>
<form id="frm">

</form>

after page load, check the root select element (country in your case), if there was a value, call function to populate it's child, then set the child as selected (by assigning value property):

if (city_id != "") document.getElementById("city_id").value = city_id;

do it recursively until the last child (if any), but root element should be change

Or you can use my prototype.js plugin called DynamiCombo
See the demo here

**Mulith** · 10-26-2010 08:45 AM

Thank you for the help.

I have managed to get the list to populate in edit mode by using the following:

Code:

if($tier4 > 0){
$pop_city = "onLoad=\"AjaxFunction(".$tier4.")\"";
}
else {
	$pop_city = "";
	}

I then call it like this:

Code:

<body <? echo $pop_city; ?>>

but I have tried all sorts to get the selected value to match what I have in my database.

I've tried this

Code:

document.getElementById("city_id").value = "<? echo $city_name; ?>";

but it doesn't seem to work.

Where should I place this JS? In the <head> tags or further down or does it not matter?

**Mulith** · 11-11-2010 05:23 AM

Your DynamiCombo pluggin looks good but not sure how to integrate it.

Do you have a readme or are you able to walk me through the basics of how I would use it?

**yearbass** · 11-18-2010 09:14 AM

check this out: http://blog.fbxphpindonesia.com/dynamicombo/

Thread: Adding "selected" to Ajax dynamic drop down

Thread Tools

Display

Adding "selected" to Ajax dynamic drop down

Cannot get city_id to select.

YearBass

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions