Question

I have a global function that sends post requests to my api it looks like the following,

function sendRequest(method,params,callback,cache,override){

    var cacheObject = null;

    if(override == true){
        window.localStorage.removeItem(method);
    }
    //check if cache exists
    if(cache == true){

        console.log('attempting to find cache');

        var cacheString = window.localStorage.getItem(method);

        if(cacheString){
            //put back into object and return to callback
            cacheObject = JSON.parse(cacheString);

            if(cacheObject){
                console.log('cache found' + cacheString);
            }

            window[callback](cacheObject);
            return true;
        }
    }
    if(cacheObject == null || override == true){

        console.log('sending new request');

        var apiKey =  "";
        var sessionKey = null;
        sessionKey = window.localStorage.getItem("session_key");

        var params2 = {
            api_key: apiKey,
            session_key: sessionKey
        }

        var object = $.extend({}, params,params2);    

        var url = apiUrl+method;
        var p = jQuery.param(object);

        //    console.log(url);
        //    console.log(p);

        $.mobile.showPageLoadingMsg();     
        $.post(apiUrl+method,p,function(d) {

            $.mobile.hidePageLoadingMsg();  
            //        console.log(d.success);
            //        console.log(d.message);

            var obj2 = d.data;
            var dataString = JSON.stringify(obj2);

            if(cache == true){

                console.log('updating cache');

                window.localStorage.removeItem(method);

                window.localStorage.setItem(method,dataString);
            }

            console.log(dataString);

            if(d.success == true){
                window[callback](d.data);
            }
            else{
                if(d.message != null){
                    alert(d.message);
                }  
            }
        },'json')
        .error(function(xhr) {

            console.log(xhr.status);
            var status = xhr.status;
            $.mobile.hidePageLoadingMsg();  

            if(status == 400){
                window.localStorage.clear();
                location.href='index.html';

            }
        });

        return true;
    }   
    return false;                
}

This worked ok until I put my page specific javascript for pages in a jquery name space, based off of the model found here http://jacob4u2.posterous.com/documentready-with-jquery-mobile. I have a login page and the attached JS is as follows

(function($, ns) {
    function loginPage() {
    };

    loginPage.prototype.init = function($page, pageDom) {

        $('#login_button').click(function() {
            var params = {
                    email : $('#email').val(),
                    password : $('#password').val()

                }

            //test is the callback function that should fire via window[callback]
            sendRequest('login',params,test);

        });

    };

    ns.pages = ns.pages || {}; 
    ns.pages.login = new loginPage();

    function test(){
        alert('callback successful');
    }
}(jQuery, MYAPP));

but i always get an error that the window[callback] function is undefined. ALso I can’t just stick the function outside of the namespace into a global area because the whole point is to keep the JS modularized per page.

Answer 1

As you probably can see, you are receiving this error because your callback does not exist in the scope of the window object.

Try updating your sendRequest function to invoke the callback as follows:

if ($.isFunction(callback)) {
    callback.call(window, d.data);
}

Whit this will do is make sure that the value of callback is a function and invoke the callback, setting the scope of the callback’s execution to that of the window and passing d.data as the callback’s argument.

As JAAulde pointed out, you may not want to execute the callback in the scope of window, and you may not want to change it’s scope of execution at all. In that case, this will do:

if ($.isFunction(callback)) {
    callback(d.data);
}