Question

I am trying to implement Repository pattern in JavaScript. I have ViewModel which i want to initialize with the data when i call Initialize method on it. Everything seems to be falling in places except that i am not able to return the data from my AJAX call. I can see that data is coming back from the ajax call but when i trying to capture the data in SomeViewModel’s done function, it is null.

Can someone please point me out where i am going wrong here?

P.S: Please notice that i am not making Async call so the call chain is properly maintained.

This is how my Repository looks like:

function SomeRepository(){
    this.LoadSomeData = function loadData()
    {
        $.ajax({
            type: "POST",
            url: "someUrl",
            cache: true,
            async: false,
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: "json",
            //success: handleHtml,
            success: function(data) {
                alert('data received');
                return data; 
            },

            error: ajaxFailed
        });



        function ajaxFailed(xmlRequest) {
                alert(xmlRequest.status + ' \n\r ' + 
                xmlRequest.statusText + '\n\r' + 
                xmlRequest.responseText);
        }

    }




};

This is how my ViewModel looks like:

function SomeViewModel(repository){   
    var self = this;
    var def = $.Deferred();

    this.initialize = function () {
    var def = $.Deferred();
    $.when(repository.LoadSomeData())
    .done(function (data) {
        def.resolve();
    });
    return def;
  };

}

This is how i am calling from an aspx page:

var viewModel = new SomeViewModel(new SomeRepository());
viewModel.initialize().done(alert('viewmodel initialized'));
alert(viewModel.someProperty);

Answer 1

I have used successfully an auxiliar variable to put the ajax result, when ajax call is inside a function (only works if ajax is async=false) and i need the function does return the ajax result. I don’t know if this is the best solution.

function ajaxFunction(){
    var result='';
    $.ajax({
        type: "POST",
        url: "someUrl",
        cache: true,
        async: false,
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        //success: handleHtml,
        success: function(data) {
            alert('data received');
            result=data; 
        },

        error: ajaxFailed
    });
    return result;
 }