Question

function getHtmlBodyFromFile( filename ){
    var outStr = '';
    $.get(filename, function(data, status) {
        outStr = $('body', $(data)).html();
    });
    return outStr;
}
$("div#detail").html( getHtmlBodyFromFile('OEBPS/text/section0002.xhtml') ); //blank

The return outStr is blank because the function return immediately after call to $.get()
Could you please suggest me a better way to do return with a valid data for those non-blocking style.
Thank you so much

Answer 1

Instead of expecting to return data from getHtmlBodyFromFile function, pass a callback function to getHtmlBodyFromFile which should be executed after the ajax call.

Something like this:

function getHtmlBodyFromFile( filename, callback ){
    var outStr = '';
    $.get(filename, function(data, status) {
        outStr = $('body', $(data)).html();
                callback(outStr)
    });
    //return outStr;
}
getHtmlBodyFromFile('OEBPS/text/section0002.xhtml', function(data) {
    $("div#detail").html(data);
});