JQuery: variable from .change not showing up in .load

Question

I'm setting up dynamic pulldowns: the choice on select#category informs the contents of select#subcat.

this is the html for select#category:

<select name="category" id="category">
    <option>Click Here to choose a category</option>
           <?php foreach ($categories as $key => $category) { ?>
    <option value="<?php echo $key ?>"><?php echo $category ?></option>
           <?php } ?>         
</select>

<select name="subcat" id="subcat">
    <option>&lt;-- First Choose a Category</option>                           
</select>

this is the jQuery statement:

$(document).ready(function(){
    $("select#category").change(function(){
        $("select#subcat").load("subcats.php",{ id: $(this).val(), ajax: 'true'});
    });
});

this is subcats.php:

<?php
      //source of categories
      include("config.php") ;
      //initiate option list
      $options =  '<option value="">Choose a Sub-category</option>'."\n" ;
      if(!empty($_GET["id"])) {
      //iterate through the categories
      foreach ($categories as $key => $category) {
      if ($_GET["id"] == $key) {
      //select the data source
      $subcats = file('subcat/'.$key.'.dat', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ;
      natsort($subcats);
      //create the rest of the option list
          foreach ($subcats as $subcat) {
          list ($subname,$subkey ) =explode ("\t", $subcat) ;
           $options .=  '<option value="'.$subkey.'">'.$subname.'</option>'."\n" ;
      }
      echo  $options ;   
          }
      }
      }  else {
      // if no variable given provide option list as error check
      echo  '<option value="">&lt;-- Choose a Category First</option>
      <option value="">Foo Bar</option>'."\n" ;   
          }
      ?>

My understanding is that id: $(this).val() provides the selected option from select#category for use in the php document; am I off base here? Really, if I'm reading the docs right, I shouldn't even need the , { id: $(this).val(), ajax: 'true'} bit the ajax request .load is working, because the error check menu items appear in the select#subcats.

However, that's all that appears: the variable does not seem to be getting through...

Li'l help here? Thanks in advance!

Answer 1

In your situation this belongs to select#subcat. Try to use this code:

$(document).ready(function(){
   $("select#category").change(function(){
      $("select#subcat").load("subcats.php",{ id: $("select#category").val(), ajax: 'true'});
   })
})

Answer 2

use console.log($(this).val()) before .load to debug the submitted value

are you sure the data is send per get method?

Example: Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });

and as found under the comments on http://api.jquery.com/load/

According to the documentation: "The POST method is used if data is provided as an object; otherwise, GET is assumed."

You could simply use $_REQUEST['id'] instead of $_GET['id'] or $_POST['id'] to cover both (see php.net::$_REQUEST for more informations)