ajax is not a function inside a namespace

Question

I am trying to create a namespace that contains all the calls of my application, but I do not know why when I try to do an Ajax call inside the namespace it says that ajax is not a function

I Tried to set jQuery as a dependency and pass it to the namespace but still having the issue

Here is the js

   var FOF = FOF || {};
   FOF.Users = {
    init: function(userRequest){

    var request = userRequest.request || '';
    var callbacks = userRequest.callbacks || {};
    var userId = userRequest.userId || 0;
    var event = userRequest.domainEvent || false;
    var dependency = userRequest.dependency ||  false;
    console.log(userRequest.dependency);
    console.log(userRequest);


    switch(request) {
        case 'getUser':{
            FOF.Users.getUserData(callbacks,dependency);
            break;
        }
        default:{
            console.log('Param Request Empty or not valid');
        }
    }


    },
    getUserData : function(callbacks,dependency){

        dependency.ajax({
            url: "Mocks/users.json",
            data: {},
            dataType: "json",
            method: 'get',
            success: function (data) {
                if (!isObjectEmpty(callbacks)) {
                    callbacks.run(data);
                }
                if(event){
                    document.dispatchEvent(new CustomEvent(event, {detail: {data}}));
                }

            },
            error : function (data) {
                if (!isObjectEmpty(callbacks)) {
                    callbacks.errors(data);
                }
                if(event){
                    document.dispatchEvent(new CustomEvent(event, {detail: {data}}));
                }
            },
            cache: false,
        });


        /*
        var xhr = new XMLHttpRequest();
        xhr.open('GET', encodeURI('Mocks/users.json'));
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('Request Done', xhr);

            }
            else {
                console.log('Request Failed');
            }
        };
        xhr.send();
        */

    }

}




$(document).ready(function($){

    var userRequest = {
        dependency : jQuery,
        request: 'getUser',
        userId : 1,
        callbacks :getUserCallbacks,
        domainEvent: 'getUser' 
    }

    var getUserCallbacks = {
        run: function(data){
            console.log(data);
        },
        errors: function(data) {
            console.log(data);
        },
        serverError : function(data){
            console.log('La Culpa es de Api, preguntar a Pedro');
        },
    }

    FOF.Users.init(userRequest);
});




function isObjectEmpty(obj) {
    return Object.keys(obj).length === 0;
}

And also a Plunker https://plnkr.co/edit/1fPelOGyMiroOWWXMXXU?p=preview

I hope that my englis is good enough, If you have any questions please ask me Thanks!

Answer 1

This line:

var dependency = FOF.Users.jQuery ||  false;

PDF.Users.jQuery is not actually jQuery (it appears to be undefined).

Did you perhaps mean to say:

var dependency = usersRequest.dependency || false

EDIT

I'll bet your AJAX request goes through, but your callbacks aren't getting called, because of hoisting and the fact that you've declared userRequest before getUserCallbacks.

Declare getUserCallbacks before userRequest - otherwise, userRequest.callbacks will be undefined.

var getUserCallbacks = {
    run: function(data){
        console.log(data);
    },
    errors: function(data) {
        console.log(data);
    },
    serverError : function(data){
        console.log('La Culpa es de Api, preguntar a Pedro');
    },
};

var userRequest = {
    dependency : jQuery,
    request: 'getUser',
    userId : 1,
    callbacks :getUserCallbacks,
    domainEvent: 'getUser' 
}

EDIT #2

In addition to my previous edit, you're including jQuery slim in your header. jQuery slim does not include the ajax functionality of jQuery. If you want to use ajax, just include jQuery and not jQuery slim.