Re: chained select with ajax

On 7/17/2011 11:38 AM, Chris Stinemetz wrote:

Thanks all. I am trying to create a cascading seletct with 3 menu choices. For some reason my third select menu is not populating. It doesn't seem like my ajax is correctly sending $_post values to the final query in my PHP class I built. By the time I make it to the final third select menu there are no choices. Hopefully someone can find something I missed in the following code snippits. Any help is greatly appreciated. Please excuse the incorrect indentions. For some reason gmail changes it. Thanks, Chris

I have made a few assumptions in the following code... with that said Well, without seeing more of your code, from what I can tell from what you provided, you are missing a few statements in your jQuery and you are using the wrong variables that jQuery is passing to your PHP. Also, since I do not see you populating the #market SELECT field with jQuery, is it safe to assume that you are populating it when you create the page?

<script> $(document).ready(function() { $("select#type").attr("disabled","disabled"); $("select#store").attr("disabled","disabled"); $("select#market").change(function() {

remove the following line, it is redundant

    $("select#type").attr("disabled","disabled");
    $("select#type").html("<option>please wait...</option>");
    var id = $("select#market option:selected").attr('value');
    $.post("select_type.php", {id:id}, function(data)
    {
      $("select#type").removeAttr("disabled");
      $("select#type").html(data);
    });

}); $("select#type").change(function() {

remove the following line, it is redundant

    $("select#store").attr("disabled","disabled");
    $("select#store").html("<option>please wait...</option>");

     var m_id = $("select#market option:selected").attr('value');
     var t_id = $("select#type option:selected").attr('value');
     $.post("select_store.php",
            {market_id:m_id,type_id:t_id},
            function(data)
            {
              $("select#store").removeAttr("disabled");
              $("select#store").html(data);
            });

}); $("form#select_form").submit(function() {

    var market = $("select#market option:selected").attr('value');
    var type = $("select#type option:selected").attr('value');
    var store = $("select#store option:selected").attr('value');
    if(market>0 && type>0 && store>0)
    {
      var market = $("select#market option:selected").html();
      var type = $("select#type option:selected").html();
      var store = $("select#store option:selected").html();
      $("#result").html('your choices were: ' + market + ' , ' + type + ' and ' + store);

    } else {
      $("#result").html("you must choose three options!");
    }
    return false;

}); }); </script> php class for populating select menus.... <?php class SelectList { protected $conn; public function __construct() {

    $this->DbConnect();

} protected function DbConnect() {

    include "db_config.php";
    $this->conn = mysql_connect($host,$user,$password)
                  OR die("Unable to connect to the database");
    mysql_select_db($db,$this->conn)
    OR die("cannot select the database $db");
    return TRUE;

} public function ShowMarket() {

    $sql = "SELECT DISTINCT id_markets FROM store_list";
    $res = mysql_query($sql,$this->conn);
    $market = '<option value="0">market...</option>';
    while($row = mysql_fetch_array($res))
    {

you are using $row['id'] below, but you do not select it above...

      $market .= '<option value="' . $row['id'] . '">' .
                 $row['id_markets'] . '</option>';
    }
    return $market;

} public function ShowType() {

    $sql = "SELECT DISTINCT store_type FROM store_list";
    $res = mysql_query($sql,$this->conn);
    $type = '<option value="0">store type...</option>';
    while($row = mysql_fetch_array($res))
    {

you are using $row['id'] below, but you do not select it above...

      $type .= '<option value="' . $row['id'] . '">' .
               $row['store_type'] . '</option>';
    }
    return $type;

} public function ShowStore() {

    $sql = "SELECT store_name
            FROM   store_list

Are you suppose to be using the same $_POST variable for this select statement?

            WHERE  id_markets=$_POST[id]
            AND    store_type=$_POST[id]";

to work with the changes that I made above in the jQuery code, you will need to change the previous two lines to the following two lines of code

            WHERE  id_markets=$_POST['market_id']
            AND    store_type=$_POST['type_id']";

That show fix most of your problems and get you headed down the rod to recovery...

    $res = mysql_query($sql,$this->conn);
    $Store = '<option value="0">stores...</option>';
    while($row = mysql_fetch_array($res))
    {

you are using $row['id'] below, but you do not select it above...

    $Store .= '<option value="' . $row['id'] . '">' .
              $row['store_name'] . '</option>';
    }
    return $Store;

} } $opt = new SelectList(); ?>