jQuery重新加载表（IE 7）

Question

I have a HTML-code like this here:

<div id="overview" class="fadeable">
    <table id="exportTable">
        <tr>
            <td style="width: 500px;"><strong>Col 1</strong></td>
            <td style="width: 15px;" class="aligned_td"><strong>Col 2</strong></td>
        </tr>
    <% call getLocationPercentages(is_nll) %>
    </table>
</div>

As you can see, I'm calling an asp-function after the first tr. The output it generates is correct (after reloading the site. However, I don't want to reload it.

For this scenario, I made a small JS-function, which works in Chrome, but not in IE (7). Just a quick note: I can't just not support IE 7.

$(document).on("click", "#updateLocation", function() {
    $.ajax({
        url: "my-file.asp",
        type: "GET",
        scriptCharset: "utf-8",
        cache: false,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: data
    });

    $('#exportTable').load(location.href + " #exportTable");

}

I read the documentation for load and as I said, it works in chrome. IE however just "hides" the output. After submitting (or pressing this button (which is in another div, if that is important)) the table just vanishes, but the dom is correct. There is no CSS rule or what so ever what could hide that table. It would affect the other browsers as well though.

The DOM after submitting also has the correct values (so it is "reloaded", but not displayed)

Ideas? Familiar with that problem?

Update

I figured out, that the Table isn't generated properly. My HTML results in something like this:

<table id="exportTable">
    <table id="exportTable">
        correct content here
    </table>
</table>

When I move the inner table over the other, so it is alone again, the display is correct. For some reason, instead of re-generating the content, it adds another table.

I tried to "unwrap" the 2nd occurence with this, but that didn't do the trick:

var e = $('#exportTable:last');
e.prev().insertAfter(e);

The inner table isn't selected with that, it affects only the outer one

e.unwrap()

didn't do it either

I can't even reach it with each in a loop. It is simply left behind.

Answer 1

I don't know why, but "reloading" a table ends up in having 2 tables with the same classes + id's, where the 1st one is just a wrapper of the 2nd one.

I wrapped a <div> around the table, changed my JS to reload that div and now it is working.

HTML

<div id="tableWrap">
    <table id="exportTable" class="exportTable">
        <tr>
            <td style="width: 500px;"><strong>col 1</strong></td>
            <td style="width: 15px;" class="aligned_td"><strong>col 2</strong></td>                                                                                  
       </tr>                                                                                 
       <% call getLocationPercentages(is_nll) %>
    </table>
</div>

JS

$('#tableWrap').load(location.href + " #exportTable");