www.webdeveloper.com
Results 1 to 5 of 5

Thread: Adding "selected" to Ajax dynamic drop down

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    5

    Adding "selected" to Ajax dynamic drop down

    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

  2. #2
    Join Date
    Jul 2005
    Location
    Tangerang, Indonesia
    Posts
    171
    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">
    <!-- your combo box here -->
    </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
    Last edited by yearbass; 09-26-2010 at 01:51 PM.
    Yerie Piscesa

  3. #3
    Join Date
    Nov 2009
    Posts
    5

    Cannot get city_id to select.

    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?

  4. #4
    Join Date
    Nov 2009
    Posts
    5

    YearBass

    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?

  5. #5
    Join Date
    Jul 2005
    Location
    Tangerang, Indonesia
    Posts
    171
    Yerie Piscesa

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles