Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have this jQuery code

(function () {
    function load_page (pagename) {
        $.ajax({
            url: "/backend/index.php/frontend/pull_page/",
            type: "POST",
            data: {page: pagename},
            success: function (json) {
                var parsed = $.parseJSON(json);
                console.log(parsed);
                return parsed;
            },
            error: function (error) {
                $('#content').html('Sorry, there was an error: <br>' + error);
                return false;
            }
        });
    }
    ...
    var json = load_page(page);
    console.log(json);
    if (json == false) {
        $('body').fadeIn();
    } else {
        document.title = json.pagename + ' | The Other Half | freddum.com';
        $("#content").html(json.content);
        $('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
        $('body').fadeIn();
    }
})();

and, guess what, it doesn't work. The AJAX request fires fine, and the server returns valid JSON but the console.log(json); returns undefined and the js crashes when it gets to json.pagename. The first console.log(parsed) also returns good data so it's just a problem with the return (I think).

I knew I was clutching at straws and would be extremely if this worked, but it doesn't. To be honest, I don't know how to program callback functions for this situation.

EDIT: This is my now updated code, which doesn't work either.

function load_page (pagename, callback) {
    $.ajax({
        url: "/backend/index.php/frontend/pull_page/",
        type: "POST",
        data: {page: pagename},
        success: function (json) {
            callback(json);
        },
        error: function (error) {
            $('#content').html('Sorry, there was an error: <br>' + error);
            var json = false;
            callback(json);
        }
    });
}
(function () {
    $('body').hide();
    var page = window.location.hash.slice(1);
    if (page == "") page = 'home';
    load_page(page, function(json) {
        var parsed = $.parseJSON(json);
        console.log(parsed);
        if (json.pagename == "" || json.pagename == null) {
            document.title = 'Page Not Found | The Other Half | freddum.com';
            $('body').fadeIn();
        } else {
            document.title = parsed.pagename + ' | The Other Half | freddum.com';
            $("#content").html(parsed.content);
            $('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
            $('body').fadeIn();
        }    
    });

})();

I moved load_page into global namespace 'cos I needed it to be there. The console.log(parsed) returns what seems to be a valid json object, but console.log(parsed.content) yields undefined. #content isn't being set either. Any ideas? I'll be glad to do any testing.

Any help is greatly appreciated!

share|improve this question

5 Answers

up vote 8 down vote accepted

Because Ajax requests are asynchronous, the code following the $.ajax function invocation still executes, whether the request is finished or not, so you should accept a callback as a argument to load_page that is invoked when the request is finished:

function load_page (pagename, callback) {
    $.ajax({
        url: "/backend/index.php/frontend/pull_page/",
        type: "POST",
        data: {page: pagename},
        success: function (json) {
            var parsed = $.parseJSON(json);
            console.log(parsed);
            callback(parsed); //bingo
        },
        error: function (error) {
            $('#content').html('Sorry, there was an error: <br>' + error);
        }
    });
}

load_page(page, function(json) {
   console.log(json);
   if (json == false) {
      $('body').fadeIn();
   } else {
      document.title = json.pagename + ' | The Other Half | freddum.com';
      $("#content").html(json.content);
      $('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
      $('body').fadeIn();
   }
});
share|improve this answer
1  
You are a genius. I thought that it being asynchronous would be a problem. Thanks so much! –  Fred Dec 24 '10 at 5:59
 
@Fred You mean you thought it wouldn't be a problem? And you're welcome! :) –  Jacob Relkin Dec 24 '10 at 6:01
 
I had a sinking feeling it wouldn't work but I didn't know any way around without beefing up my code loads and copying the code multiple times, and I will accept your answer after dinner. Thanks! –  Fred Dec 24 '10 at 6:02
 
Hey, please see question for latest conundrum, thanks! –  Fred Dec 24 '10 at 8:12
up vote 2 down vote

Inside the definition of the load_page function there is no "return" statement, not directly at least hence by doing a var json = load_page(page); you'll end up with json = undefined. Ideally you should re-organize your code a little. There is more than one way of doing this but here is one:

(function () {
    function mySuccess(json) {
        var parsed = $.parseJSON(json);
        console.log(json);
        console.log(parsed);
        document.title = parsed.pagename + " | The Other Half | freddum.com";
        $("#content").html(parsed.content);
        $("#header-navigation-ul a:Contains(" + page + ")").addClass("nav-selected");
        $("body").fadeIn();
    }
    function myFailure(error) {
        $('#content').html('Sorry, there was an error: <br>' + error);
        $("body").fadeIn();
    }
    function load_page(pagename, onSuccess, onFailure) {
        $.ajax({
            url: "/backend/index.php/frontend/pull_page/",
            type: "POST",
            data: {
                page: pagename
            },
            success: onSuccess,
            error: onFailure
        });
    }
    load_page(page, mySuccess, myFailure);
})();
share|improve this answer
up vote 1 down vote

The issue is because jQuery issues ajax calls asynchronously by default. Hence the next statement is executed even before the ajax call is complete after
var json = load_page(page);. You can either make the calls synchronous by passing async:false in the config parameters and dealing with the retun value in the callback function.

share|improve this answer
 
+1 but using aysnc:false would stop the javascript though while the AJAX call was running, which is not the desired affect. –  Fred Dec 24 '10 at 6:01
 
Yep, I always prefer callbacks...but just wanted to provide info on available options –  Chandu Dec 24 '10 at 6:02
up vote 0 down vote

try console.log before parsing to check what data is exactly coming. is it valid json

success: function (json) { console.log(json); var parsed = $.parseJSON(json);

share|improve this answer
up vote 0 down vote

It's an AJAX call, as in, the code is completed asynchronously. You need to put the console.log and any other use of the json variable in the success function.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.