jQuery AJAX call not accepting response data

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.

charlietfl · Accepted Answer · 2013-01-07 22:02:19Z

2

Your each in success callback isn't correct.

Chnage :

$('#teamid').empty().each(json, function (value, key) {..

TO:

$('#teamid').empty();
$.each(json, function (value, key) {...

answered Jan 7, 2013 at 22:02

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aziz punjani · Accepted Answer · 2013-01-07 22:01:41Z

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));
  });

answered Jan 7, 2013 at 22:01

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

1 Comment

MECU Over a year ago

Doing one at a time worked. My thought in chaining them was that I wanted to apply both actions to the same ID, so why not chain them? I guess jQuery works different than my thought process. I selected this answer because they all said the same thing and this was first.

user400654 · Accepted Answer · 2013-01-07 22:02:10Z

1

Your use of .each is simply wrong.

$('#teamid').empty().each(json, function (value, key) {
    ...
});

In this case, jQuery tries to execute the json function (which isn't a function at all) for each #teamid element using the function's .apply method. Your json object doesn't have an apply method (and it shouldn't as json strings can't contain functions) hence the error.

Try this instead:

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

answered Jan 7, 2013 at 22:02

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX call not accepting response data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related