CODEWITHSUNDEEP
jquery
webdad3
webdad3

Reputation: 9080

get id values from each <th> element

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>";
            }



        }
    });

}

Upvotes: 0

Views: 9180

Answers (2)

Marnix
Marnix

Reputation: 6547

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);
            });
        });
    });
});

Upvotes: 4

Brian Driscoll
Brian Driscoll

Reputation: 19635

If #tableData doesn't exist when the page renders, or if it exists but doesn't have any th elements when the page renders, then the each function will have nothing to iterate over. If #tableData is created or modified when your data is loaded, then you'll need to use delegate to bind your function to it.

Upvotes: -1

Related Questions