loadPlayer function inside success function is undefined

Question

I get the following message when trying the following code.

angular.js:9419 Referenceerror: loadplayer is not defined.

Here is my code:

(function getAllAlbums(){
$http({
    method: 'GET',
    url: "api/playlist.php?type=playlist",
})
.success(function(response){
  console.log(response);
  loadPlayer(response);
})
.error(function(response){
 console.log(response);
})

})();

Down the file I have the function:

jQuery(function loadPlayer($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if (supportsAudio) {.......

Why do I get the message that loadPlayer is undefined??

This isn't an answer, but I'm slightly concerned about the arguments to `loadPlayer`. The function definition contains a single argument called `$`, which is (conventionally) the global jQuery object. The `jQuery(loadPlayer)` part should call `loadPlayer` with no arguments. But then you've got `loadPlayer(response)`, which uses a completely different argument. Why would you need the jQuery object as an argument? Do you need the `response` argument? Should this be two different functions? — David Knipe, Jul 23 '17 at 11:48

score 1 · Answer 1 · answered Jul 23 '17 at 10:56

Because of different scope. Your first function was declared in a self invoked function. Your second function was declared i don't even know where. What you ca do is to declare both of them in a one scope. Smth like this.

(function ($) {

$(document).onload = function () {
    function loadPlayer($) {}
    $http({
            method: 'GET',
            url: "api/playlist.php?type=playlist",
        })
        .success(function (response) {
            console.log(response);
            loadPlayer(response);
        })
        .error(function (response) {
            console.log(response);
        })
}
}(jQuery));

loadPlayer function inside success function is undefined

1 Answers1