Question

I am trying to use javascript and jquery to build an HTML table based on information returned from a database. I have the JSON and the database hit working properly, but I am unable to show the data on my page.

This is code to display the data

var temp;

var init = function() {
    $(_getMarketInfo()).appendTo(document.body);

    // Used for logging
    temp = $(_getMarketInfo());
    console.log(temp);
};

And then to get and process the data

function _getMarketInfo() {
    $.ajax({
        url:'scripts/db_getMarketInfo.cgi',
        dataType:'json',
        success:function(data, testStatus) {
            var html = '';
            html +='<div class="marketInfoHolder">';
            html +='<table class="tbl" border=1>';
            html +='    <tr><th>Market Information</th></tr>';
            html +='    <tr><td>Market</td></tr>';

            for (var i=0;i< data.marketInfo.length; i++){
                html += '<tr><td>' + data.marketInfo[i].market_name + '</td></tr>';
            }

            html +='</table>';
            html +='</div>';

            //used for logging
            console.log(html);

            return html;
        },
        error:function(data, textStatus) {
            alert('There was an error getting market information.');
        }
    });
 };

According to the console logs, the html variable does have proper html code for a table, but then when I look at temp variable, it is logged as []. It appears that, for some reason, the _getMarketInfo() isn’t properly returning html to temp.

Answer 1

I would use a custom event that is triggered on the success of the ajax call.

var init;

// bind a custom event to the document that is
// triggered in your ajax success callback
$(document).bind('init', function (html) {
    init = html;

    // Used for logging
    console.log(init);    
});

// run _getMarketInfo in a document ready handler
// because you are accessing the DOM
$(document).ready(function () {
    $(_getMarketInfo()).appendTo(document.body);    
});

// your ajax call function
function _getMarketInfo() {
    $.ajax({
        url:'scripts/db_getMarketInfo.cgi',
        dataType:'json',
        success:function(data, testStatus) {
            var html = '';
            html +='<div class="marketInfoHolder">';
            html +='<table class="tbl" border=1>';
            html +='    <tr><th>Market Information</th></tr>';
            html +='    <tr><td>Market</td></tr>';

            for (var i=0;i< data.marketInfo.length; i++){
                html += '<tr><td>' + data.marketInfo[i].market_name + '</td></tr>';
            }

            html +='</table>';
            html +='</div>';

            // trigger your custom event with
            // the html used as a custom parameter;
            // custom event parameters must be passed
            // in an array
            $(document).trigger('init', [html]);

            // return your html for appending
            return html;
        },
        error:function(data, textStatus) {
            alert('There was an error getting market information.');
        }
    });
 };