CODEWITHSUNDEEP
jqueryajax
MECU
MECU

Reputation: 780

jQuery AJAX call not accepting response data

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.

Upvotes: 1

Views: 381

Answers (3)

charlietfl
charlietfl

Reputation: 171690

Your each in success callback isn't correct.

Chnage :

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

TO:

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

Upvotes: 2

Kevin B
Kevin B

Reputation: 95064

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

Upvotes: 1

aziz punjani
aziz punjani

Reputation: 25786

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

Upvotes: 1

Related Questions