Change event not populating dropdown with data

Question

I have been trying for the past few days to figure out how chosen.js handles change events with no success hence the post. I have tried so many options and configurations, that I am admitting defeat and hoping someone can help.

I have a very simple select which populates from mysql. This works ok. Now, when I trigger the change event, I can see that the data is being returned in firebug, but no data is present in the dropdown. So, I guess my question is, how the hell do you work with change events in chosen.js.

If I take chosen out of the equation, it works well. Where I am getting confused is why I can see the data in firebug but the select is not updating. many thanks.

FYI: Assume all libraries are loaded and working.

html

       <div class="fieldset">
          <h1><span>Select a Customer</span></h1>
          <p>
            <select data-placeholder="Choose a customer..." class="chosen-select" style="width:250px;" name="dstr_customer" id="dstr_customer">
              <option value=""></option>
                <option value="DEMO">DEMO</option>
                <option value="DEMO2">DEMO2</option>
                <option value="DEMO3">DEMO3</option>
                <option value="DEMO4">DEMO4</option>
                <option value="DEMO5">DEMO5</option>
            </select>
            <span></span>
            <a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a>
          </p>

        </div>

        <div class="fieldset">
          <h1><span>Select a Department</span></h1>
          <p>
            <select data-placeholder="Choose a dept..." class="chosen-select" style="width:250px;" name="dstr_dept" id="dstr_dept">
              <option value=""></option>

            </select>
            <span></span>
            <a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a>
          </p>
          <div class="noDept"></div>
        </div>

js

$(function() {
    $("#dstr_customer").change(function() {
      $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>');
      $.get('droptestback.php?cltdstrdept=' + $(this).val(), function(data) {
        $('#dstr_dept').html(data);
        $('#loader').slideUp(200, function() {
          $(this).remove();
          $("dstr_dept").trigger("chosen:updated");
          //$("#dstr_dept").prop('disabled', false);
        });        
      });
    });
  });

  $(function() {
    $("#dstr_customer").chosen({
      width: "260px"
    });
  });

  $(function() {
    $("#dstr_dept").chosen({
      width: "260px",
      placeholder_text_single: "Select Some Options"
    });
  });

droptestback.php

if (mysql_num_rows($result) > 0) {

    echo "<script type=text/javascript>\n";
    echo "$(function() {\n";
    echo "$(\".noDept\").html('')\n";
    echo "var newOption = \"<option value=''>Some Text</option>\"\n";

    echo "$(\"#dstr_dept\").attr(\"placeholder\", newOption)\n";
    echo "$(\"#dstr_dept\").prop('disabled', false)\n";
    echo "});\n";
    echo "</script>\n";

    //echo "<option value=\"\">Choose Your dept</option>";

    while($row = mysql_fetch_array($result)) {
    echo "<option value='$row[name]'>$row[name]</option>";
    }  



    } else {

    echo "<script type=text/javascript>\n";
    echo "$(function() {\n";
    echo "$('.noDept').html('ERROR: There are no departments that match that company. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n";
    echo "$('#box_dstr').attr('data-placeholder', \"No boxes to display...\").prop('disabled', true)\n";
    echo "});\n";
    echo "</script>\n";

    //echo "<option value='No boxes in that dept'>No boxes in that dept</option>";

    }

Answer 1

$("dstr_dept").trigger("chosen:updated"); you missed # before dstr_dep