Question

I want to receive HTML code in chat.openChat() from chat.getHtmlPage() but return operation is “undefined”.

var chat = {
    openChat : function($url){
        $('#popup').html(chat.getHtmlPage($url)); // It's wrong, UNDEFINED.
    },

    getHtmlPage : function($url){
        $.ajax({
            url: $url
        }).done(function($html) { 
            return $html; // It's OK! $html is with correct html, see with alert().
        });
    }
}

$(document).ready(function(){
    $('.btnChat').click(function(){
        chat.openChat($(this).attr('href')); // It's OK!
        ...
        return false;
    });
});

Answer 1

By default AJAX request is asynchronous, so it ends after you get result from getHtmlPage. Even if you change it to be synchronous, you will still have undefined in openChat, because you return value from done handler, not from getHtmlPage.

You should provide a callback to getHtmlPage method. Example:

var chat = {
    openChat : function($url){
        chat.getHtmlPage($url, function(html) {
            $('#popup').html(html); 
        });
    },
    getHtmlPage : function($url, callback){
        $.ajax({
            url: $url
        }).done(callback);
    }
}