Tengo un código HTML como este aquí:
<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> Como puede ver, estoy llamando a una función asp después del primer tr . El resultado que genera es correcto (después de recargar el sitio). Sin embargo, no quiero recargarlo.
Para este escenario, hice una pequeña función JS, que funciona en Chrome, pero no en IE (7). Solo una nota rápida: no puedo simplemente no admitir 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"); } Leí la documentación para load y, como dije, funciona en Chrome. IE, sin embargo, simplemente "oculta" la salida. Después de enviar (o presionar este botón (que está en otro div, si eso es importante)) la tabla simplemente desaparece, pero el dom es correcto. No hay una regla CSS o lo que sea que pueda ocultar esa tabla. Sin embargo, también afectaría a los otros navegadores.
El DOM después de enviar también tiene los valores correctos (por lo que se "recarga", pero no se muestra)
¿Ideas? Familiarizado con ese problema?
Actualizar
Descubrí que la tabla no se genera correctamente. Mi HTML da como resultado algo como esto:
<table id="exportTable"> <table id="exportTable"> correct content here </table> </table>Cuando muevo la mesa interior sobre la otra, para que quede sola de nuevo, la visualización es correcta. Por alguna razón, en lugar de volver a generar el contenido, agrega otra tabla.
Traté de "desenvolver" la segunda ocurrencia con esto, pero eso no funcionó:
var e = $('#exportTable:last'); e.prev().insertAfter(e);La tabla interna no se selecciona con eso, solo afecta a la externa
e.unwrap()tampoco lo hice
Ni siquiera puedo alcanzarlo con each en un bucle. Simplemente se deja atrás.
No sé por qué, pero "recargar" una table termina teniendo 2 tablas con las mismas clases + ID, donde la primera es solo un envoltorio de la segunda.
Envolví un <div> alrededor de la mesa, cambié mi JS para recargar ese div y ahora está funcionando.
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");No estoy seguro de si tu forma de hacerlo es correcta o qué es lo que realmente quieres lograr.
En primer lugar, cuando crea una tabla HTML, debe crearla como:
<table> <thead> <tr> <!-- columns descriptions here --> </tr> </thead> <tbody id="ContentId"> </tbody> </table>Y solo actualice el elemento tbody .
En segundo lugar, al iniciar la aplicación por primera vez, debe procesar los datos con ASP.NET, pero luego (si desea usar AJAX con jQuery), la forma más simple (pero no la mejor) de actualizar esos datos sería:
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 devuelto por script.asp
<tr> <!-- row 1 --> </tr> <!-- following rows -->Y cuando se trata de cambiar la URL, la mejor manera sería usar location.assign (ubicación.href + '#ContentId') o location.hash="ContentId"