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.
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");
I am not sure if your way of doing that is correct or what do you really want to achieve.
First of all - when you create HTML table you should create it like:
<table>
<thead>
<tr>
<!-- columns descriptions here -->
</tr>
</thead>
<tbody id="ContentId">
</tbody>
</table>
And only update tbody element.
Secondly, at first start of application you should render data with ASP.NET, but then (if you want to use AJAX with jQuery) the simplest (but not the best) way of updating that data would be:
JS
$("#UpdateTBody").on("click", function () {
$.ajax({
url : "script.asp",
...,
success: redrawTBody
});
// let's say success callback receives HTML in data argument
function redrawTBody (data) {
// disclaimer : this is simple, but not the best way
// drawing table
$("ContentId").html(data);
}
});
HTML returned by script.asp
<tr> <!-- row 1 --> </tr>
<!-- following rows -->
And when it comes to changing URL better way would be to use location.assign( location.href + '#ContentId' ) or location.hash="ContentId"