Question

Basically I’m trying to call a function getTableData that loads a table and places it inside the div tableContents.

Then what I’m trying to do is get the id values from each th that is generated from the function. The table loads with the correct data, but the id values do not alert. I’ve even put an alert right after the load and nothing pops…

    $(document).ready(function () {
        $('.tableNames').live('click', function (event) {
            $('#tableContents').load(getDBData('getTableData', '', $(this).text()), function () {
           //alert('here');
                $('#tableData th').each(function () {
                    var id = $(this).attr("id");
                    // compare id to what you want
                    alert(id);
                });
            });
        });
    });

What am I doing incorrectly?

<table id='tableData'>
<tr class='tableHeader'>
<th>Modified</th>
<th id='col1'>col1</th>
<th id='col2'>col2</th>
<th id='col3'>col3</th>
<th id='col4'>col4</th>
<th id='col5'>col5</th>
<th id='col6'>col6</th>
<th id='col7'>col7</th>
<th id='col8'>col8</th>
<th id='col9'>col9</th>
</tr>...

function getDBData(type, dbName, tableName) {

    $.ajax({
        type: "GET",
        url: "ajaxDBReturn.asp?type="+ type + "&dbName=" + dbName + "&tableName=" + tableName,
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if(type == "getTables")
            {
                //result = "<table id='tableList'>" + result + "</table>";
                ($("#tableList").html(result));
            } else if (type == "getTableData") {
                ($("#tableContents").html(result));
            }else if (type == "getTableRelationship"){
                result = "<table id='listTableBody'>" + result + "</table>";
            }



        }
    });

}

Answer 1

As far as I’ve read this quickly. Your .load() function should get an url and not a complete piece of data. If you do, that could result into no actual adding to your data, because the load() method doesn’t load a thing if it doesn’t get a string with an url.

If you getDBData adds it itself, then there is no succes. You should give your succes function to your getDBData instead and invoke the function after you’re done building your table.

If this is the case, I would recommend a simple global function call like so:

$(document).ready(function () 
{
    $('.tableNames').live('click', function (event) 
    {
        // here is the change
        // do you really need to call $('#tableContents')?
        // you are probably also doing that in the function itself.
        // also give your success function to your home-made function
        getDBData('getTableData', '', $(this).text(), function()
        {
            $('#tableData th').each(function () 
            {
                var id = $(this).attr("id");
                // compare id to what you want
                alert(id);
            });
        });
    });
});