Question

Based on this SO answer, I’m doing this:

$(document).ready(function () {
    $('#stateid').change(function () {
        $.ajax({
            url: "/admin/state_teamlist.php",
            data: {
                stateid: $("#stateid").val()
            },
            dataType: "json",
            success: function (json) {
                $('#teamid').empty().each(json, function (value, key) {
                    $('#teamid').append($("<option></option>")
                        .attr("value", value).text(key));
                });
            }
        });
    });
});

Data returned is valid JSON (from PHP’s json_encode):

{"16734":"Anchorage Christian","12241":"Barrow","1060":"Bartlett","1064":"Chugiak","5802":"Colony","1061":"Dimond","1058":"Eagle River","1063":"East","3943":"Eielson","7104":"Homer","11597":"Houston","5568":"Juneau-Douglas","10229":"Kenai Central","14260":"Ketchikan","9444":"Kodiak","8443":"Lathrop","12152":"Monroe Catholic","7554":"Nikiski","4082":"North Pole","1065":"Palmer","1057":"Service","14370":"Seward","12271":"Sitka","11780":"Skyview","3308":"Soldotna","844":"South","9919":"Thunder Mountain","13803":"Valdez","9766":"Wasilla","1059":"West","1062":"West Valley"}

But I’m getting this error:

Uncaught TypeError: Object # has no method ‘apply’

The error line in jquery.JS is:

if ( callback.apply( obj[ i++ ], args ) === false ) {

The full part around this is:

// args is for internal usage only
    each: function( obj, callback, args ) {
        var name,
            i = 0,
            length = obj.length,
            isObj = length === undefined || jQuery.isFunction( obj );

        if ( args ) {
            if ( isObj ) {
                for ( name in obj ) {
                    if ( callback.apply( obj[ name ], args ) === false ) {
                        break;
                    }
                }
            } else {
                for ( ; i < length; ) {
                    if ( callback.apply( obj[ i++ ], args ) === false ) {
Uncaught TypeError: Object #<Object> has no method 'apply'
                        break;
                    }
                }
            }

        // A special, fast, case for the most common use of each
        }

The teamid select list empties correct, but isn’t repopulated with the JSON data. I can post the HTML if needed, but I don’t think that’s a problem.

I’ve been through every SO answer on the topic but none of the solutions have fit my problem. Why am I getting this error?

I’ve tried jquery.min.js, different versions of jquery, changin the $('teamid') to the $el like in the references SO answer, and using .post and .get instead of .ajax and nothing seems to solve it. Please help.

Answer 1

Why are you chaining empty() and $.each ? It doesn’t make sense to chain them in this particular example.

$('#teamid').empty().each(json, function (value, key) {
     $('#teamid').append($("<option></option>").attr("value", value).text(key));
 });

Do one at a time.

  $('#teamid').empty(); 
  $.each(json, function (value, key) {
      $('#teamid').append($("<option></option>").attr("value", value).text(key));
  });