javascript - Uncaught TypeError: Property ... is not a function - after page has loaded -

i'm using cross-domain ajax request external api. every fails, console message:

uncaught typeerror: property 'photos' of object [object domwindow] not function 

looking @ json being returned, valid json, not fault of external api.

i can't reproduce error reliably: factor seems trigger error when call request , repeatedly.

in case i'm calling ajax request when user moves google map (to add markers map), , occurs if user moves around quickly.

here relevant parts of code:

// code located inside external js file referenced inside head // not wrapped inside document.ready - code setting  // map (calling function calls function adds  // tilesloaded listener) *is* inside document.ready function addmarkers() {     var pm_url = "http://www.cyclestreets.net/api/photos.json?key=" + my_key;     $.ajax({        url: pm_url,        crossdomain: true,         contenttype: "application/json",        datatype: 'jsonp',        data: pmdata,        jsonpcallback: 'photos',        success: function(data) {         // tba        },        error: function() {            alert("sorry, error retrieving photos!");        }    }); }  google.maps.event.addlistener(map, 'tilesloaded', function() {  addmarkers(map);  }); 

having googled bit, error uncaught typeerror: property 'photos' of object [object domwindow] not function seems occur when jquery has not been loaded.

however, don't see relevant here, because function called map's tilesloaded event - , doesn't fire first time, tends fire after 5 or 6 rapid map resizes. if works once, page surely can't have 'forgotten' jquery?

thanks advice.

if want specify name of function jquery creates success handler, not define a separate function use, you should use jsonp: 'photos' instead of jsonpcallback: photos. it's using photos in url means it's calling photos({ ...data... }) when jsonp response comes back, , doesn't exist. using jsonp option on $.ajax() create it. have few options here.

you can (in global scope) either of these 2 ways:

function addmarkers() {     var pm_url = "http://www.cyclestreets.net/api/photos.json?key=" + my_key;     $.ajax({        url: pm_url,        crossdomain: true,         contenttype: "application/json",        datatype: 'jsonp',        data: pmdata,        jsonpcallback: 'photos',        error: function() {            alert("sorry, error retrieving photos!");        }    }); } function photos(data) {     // tba } 

or, intended think:

function addmarkers() {     var pm_url = "http://www.cyclestreets.net/api/photos.json?key=" + my_key;     $.ajax({        url: pm_url,        crossdomain: true,         contenttype: "application/json",        datatype: 'jsonp',        data: pmdata,        jsonp: 'photos',        success: function(data) {         // tba        },        error: function() {            alert("sorry, error retrieving photos!");        }    }); } 

....or leave both off , let jquery name success callback (this happens default, based on timestamp).