Dependent Select With Ajax

JavaScript
1

Hi, I am trying to do my first ajax, dependant select boxes but the subcategory_id control is showing no results on change and the js console is showing the following error:

Uncaught TypeError: Cannot use ‘in’ operator to search for ‘1298555’ in <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”> </script>

Where have I gone wrong with this?



catalogues.php

$('#category_id').change( function() {
    checkCategory();   // checks value and enables/disables subcategory control
    var catid = $(this).val();
    var dataString = 'catid='+catid;
    $.ajax ({
      type: "POST",
      url: "catalogues.php",
      data: dataString,
      cache: false,
      success: function(data) {
        var el = document.getElementById('subcategory_id');
        $(el).empty(); // remove all HTML inside <select/>
        $.each(data, function(i, option) { // add each <option/> from data
          $('<option value="' + option.id + '">' + option.name + '</option>').appendTo(el);
        });
      }
    });
  });


catalogues.php

if(isset($_POST['catid'] )) {

  $catid=$_POST['catid'];
  $sql_subcategory = "SELECT
                  catalogues_categories.id,
                  catalogues_categories.category,
                  catalogues_categories.parent_id,
                  catalogues_categories.inuse
                  FROM
                  catalogues_categories
                  WHERE
                  catalogues_categories.parent_id = '.$catid.' AND
                  catalogues_categories.inuse = 1
                  ORDER BY
                  catalogues_categories.category ASC";

  $query_subcategory = $conn->query($sql_subcategory);
  $results_subcategory = $query_subcategory->fetchAll();
} else {
  $results_subcategory = null;
  }

Thanks in advance, James

2

This has been resolved.