Question

I am using Mika Tuupola Chained Selects jQuery plugin to build a chained select/dropdown for my website.

I am dynamically pulling the options from two databases categories and subcategories like this:

categories:

<?php
  $query="SELECT * FROM categories";
  $result = mysql_query ($query);
  echo"<select name='cselect1' id='cat'><option value=''>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['number'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

and subcategories

<?php
  $query="SELECT * FROM subcategories";
  $result = mysql_query ($query);
  echo"<select name='sselect1' id='subcat'><option value=''>Sub Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value='".htmlspecialchars($catinfo['subcat'])."' class='".$catinfo['catnumber']."'>".$catinfo['subcat']."</option>";
  }

  echo"</select>";
?>

which echos out something like this:

<select id="cat" name="cselect1">
    <option value="0">Please Select A Category</option>
    <option value="1">Restaurants</option>
    <option value="2">Food</option>
    <option value="3">Nightlife</option>
    <option value="4">Shops</option>
</select>

<select id="subcat" name="sselect1">
    <option value="">Sub Category</option>
    <option class="1" value="American">American</option>
    <option class="2" value="Specialty Food">Specialty Food</option>
    <option class="3" value="Bars">Bars</option>
    <option class="4" value="Computers">Computers</option>
</select>

and here is my jquery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../public/scripts/chain.js" type="text/javascript"></script>
<script type="text/javascript">
        $("#subcat").chained("#cat");
</script>

But for some reason, it’s not working? Why is this?

Thanks for all help on this!

Answer 1

<script type="text/javascript">
    $(document).ready(function(){
        $("#subcat").chained("#cat");
    });
</script>

In your case you have been doing:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../public/scripts/chain.js" type="text/javascript"></script>
<script type="text/javascript">
        $("#subcat").chained("#cat");
</script>

At the time $("#subcat").chained("#cat"); is called the document is still getting downloaded and parsed into DOM, also the jQuery files, chain.js may not be downloaded yet.

The <select id="cat" name="cselect1"> and the other div is also not parsed at this moment. So doing $("#subcat") is referrring to something thats going to exist in future. So your code fails.

One solution that existed for this is to do all such operations accessing elements be done after the element in HTML, so moving such scripts to end of file before closing body will help.

But that is not recommended as you have better solutions now, most modern browsers support an DOMready event that is triggered once everything is downloaded, parsed and DOM is ready. the $(document).ready(function(){..}); is a cross browser implementation of this DOM rady event by jQuery.

Al the below are variants of Document.ready, but does the same thing.

$(document).ready(function () {
});  

$().ready(function () {
}); 

$(function () {
});     

jQuery(function ($) {
});

In a nutshell, writing code inside $(document).ready(function(){..}); makes sure that, everything has completed downloading and DOM is ready at the time our code is executed.

Note : When i say everything is downloaded, it doesnt cover images and other data that is not required to prepeare the DOM. window.load(function(){...}); is the event that is triggered once everything including images are downloaded and page has loaded completely.