Why is my table not populating?

gib65

Hello,

We are having an issue with our DataTable not populating properly.

We have two data tables. A "new" table and an "old" table. The old table gets its data from old stored procedures. The new table gets its data from new stored procedures. We have them both on the same page so that we can compare the old results with the new results. The tables themselves are exactly the same.

The issue we are having is that the new table isn't populating with data. Sometimes refreshing the page solves this problem, sometimes it doesn't. I know that the application returns data from the new stored procedure since I can debug the code in the Chrome console and I see all the data. I suspect that the issue has something to do with a name conflict between the old table and the new table, a variable name or an id or something, though I've scanned the code over and over and cannot spot any name conflicts.

Here's a screen shot of the tables (the old table isn't populating either in the screen shot, but this is expected):

http://www.shahspace.com/Bug 4572/bug #4572 - Criticality Tables Not Appearing.png

Here is the HTML:

@using ACM.RiskAlive.Web.Features.Shared.Models
@model ACM.RiskAlive.Web.Features.CriticalityRiskReduction.Models.CriticalityVM

... <!-- pie charts and bar graphs here -->

<div class="row">
    <div class="col-lg-12">
        <h3>
            <a class="area-toggle" data-toggle="collapse" href="#collapseTablePanelOld">@Model.Type Criticality Table (old)</a>
        </h3>
    </div>
</div>
<div id="collapseTablePanelOld" class="panel-collapse in">
    <div class="row">
        <div id="criticality-table-container-old"></div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <h3>
            <a class="area-toggle" data-toggle="collapse" href="#collapseTablePanel">@Model.Type Criticality Table (new)</a>
        </h3>
    </div>
</div>
<div id="collapseTablePanel" class="panel-collapse in">
    <div class="row">
        <div id="criticality-table-container"></div>
    </div>
</div>

<script>
    (function($) {
        $(document).ready(function() {
            ra.criticalityRiskReduction.initOld();
            ra.criticalityRiskReduction.init();
        });
    })(jQuery);
</script>

As you can see in the script, I call:

ra.criticalityRiskReduction.initOld();
ra.criticalityRiskReduction.init();

initOld initializes the old table (among other things) and init initializes the new table (among other things).

Here's the javascript that does the initialization:

http://www.shahspace.com/Bug 4572/javascript.txt

The error I get is "Cannot read property 'parentNode' of null" and it happens on this line here:

$('#criticality-table-container #criticalityTable').DataTable({...

Can anyone see where the conflict might be arising?

bindrid

$('#criticality-table-container #criticalityTable') I don't see a table by that name. Your link does not work

gib65

criticalityTable is defined dynamically in the javascript a few lines up from the line you quoted:

          var table = $('<table />')
              .addClass('table table-striped table-hover table-bordered table-condensed table-responsive')
              .attr('id', 'criticalityTable');

Here are the links again. Please copy and paste them in a new browser tab:

http://www.shahspace.com/Bug 4572/bug #4572 - Criticality Tables Not Appearing.png

http://www.shahspace.com/Bug 4572/javascript.txt

gib65

UPDATE:

You're right, the link doesn't work. It was the # sign in the png name. Try this one instead:

link

edited by allan

bindrid

Since the links are not working, can you post the js here?

allan

Its the spaces in the URL which are stopping it from being auto linked. You'd need to use %20 to URL encode a space.

I think we'd probably need a link to a test case showing the issue with this one. I don't immediately see the issue, but there is too much code there to just scan over and understand it.

Allan