Who Am I Who Am I - 4 months ago 22
jQuery Question

jQuery Chained Select TypeError: Cannot read property 'fn' of undefined

I'm trying to make 3 tier chain select from this link http://www.appelsiini.net/projects/chained

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>

<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model" name="model">
<option value="">--</option>
<option value="coupe" class="series-3 series-6 a5">Coupe</option>
<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
<option value="sportback" class="a3 a5">Sportback</option>
</select>

<script language="JavaScript" type="text/javascript">
var $ = jQuery.noConflict();
jQuery(document).ready(function($) {
/* For $.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");

return;
/* Show button after each pulldown has a value. */
$("#engine").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
$("#button").fadeIn();
} else {
$("#button").hide();
}
})
});
</script>

</html>


When I run this code, I got an issue the dropdown couldn't chain and show an error message TypeError: Cannot read property 'fn' of undefined. So how to solving this problem? Thanks

Answer

Close the script tag for the jquery include. Everything will work as expected.

Change

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">

to

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
  <script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>

  <select id="mark" name="mark">
    <option value="">--</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </select>
  <select id="series" name="series">
    <option value="">--</option>
    <option value="series-3" class="bmw">3 series</option>
    <option value="series-5" class="bmw">5 series</option>
    <option value="series-6" class="bmw">6 series</option>
    <option value="a3" class="audi">A3</option>
    <option value="a4" class="audi">A4</option>
    <option value="a5" class="audi">A5</option>
  </select>
  <select id="model" name="model">
    <option value="">--</option>
    <option value="coupe" class="series-3 series-6 a5">Coupe</option>
    <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
    <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
    <option value="sportback" class="a3 a5">Sportback</option>
  </select>

  <script language="JavaScript" type="text/javascript">
    var $ = jQuery.noConflict();
    jQuery(document).ready(function($) {
      /* For $.chained.js */
      $("#series").chained("#mark");
      $("#model").chained("#series");
      $("#engine").chained("#series, #model");

      return;
      /* Show button after each pulldown has a value. */
      $("#engine").bind("change", function(event) {
        if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
          $("#button").fadeIn();
        } else {
          $("#button").hide();
        }
      })
    });
  </script>

</html>