[Ajax] innerHTML met tables in IE

[monnick]

Voor een filmdatabase die ik aan het maken ben haal ik m.b.v. Ajax filminformatie op wanneer een gebruiker op een rij klikt. Zie: http://www.tomrunia.nl/dev/index_ajax.php?uid=2

De response text die de server teruggeeft is een <table> die in de <tr> van de reeds bestaande tabel wordt neergezet:

PHP:

    <td colspan="<?php echo 7+$extraColumn; ?>" class="inforow">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr><td class="title" colspan="3"><?php echo $title; ?></td></tr>
        <tr><td rowspan="18" width="120px"><a href="<?php echo $url; ?>" title="Bezoek de IMDB pagina"><img src="<?php echo $coverLoc; ?>" alt="cover" class="cover"/></a></td></tr>
        <tr><td width="15%" class="label">Premiere datum</td><td><?php echo $fulldate; ?></td></tr>
        <tr><td width="15%" class="label">Regisseur</td><td><a href="index.php?dir=<?php echo $director; ?>"><?php echo $director; ?></a></td></tr>
        <tr><td width="15%" class="label">Genre</td><td><?php echo $genre; ?></td></tr>
        <tr><td width="15%" class="label">Omschrijving</td><td><?php echo $plot; ?></td></tr>
        <tr><td width="15%" class="label">Speelduur</td><td><img src="img/clock<?php echo $clock; ?>.gif" title="Speelduur indicatie" alt="klokje" /> <?php echo $runtime; ?> min</td></tr>
        <tr><td width="15%" class="label">IMDB rating</td><td><?php generateStars($imdbscore, 'imdb'); ?> <?php echo $imdbscore; ?> / 10 </td></tr>
        <?php if ($row['seen'] == 1 && $row['ownscore'] != 0) { ?><tr><td width="15%" class="label">Cijfer</td><td><?php generateStars($ownscore, 'own'); ?> <?php echo $ownscore; ?> / 10 </td></tr>
        <?php } if($showDVDcolumn == 1) { ?><tr><td width="15%" class="label">DVD in bezit</td><td><?php echo $dvd_expand; ?></td></tr>
        <?php } if($showDIVXcolumn == 1) { ?><tr><td width="15%" class="label">DivX in bezit</td><td><?php echo $divx_expand; ?></td></tr>
        <?php } if($showHDcolumn == 1) { ?><tr><td width="15%" class="label">HD in bezit</td><td><?php echo $hd_expand; ?></td></tr>
        <?php } ?><tr><td width="15%" class="label">Gezien</td><td><?php echo $seen2; ?></td></tr>
        <tr><td width="15%" class="label">Trailer</td><td><a href="trailer.php?uid=<?php echo $uid."&amp;id=".$id; ?>" onclick="window.open('trailer.php?uid=<?php echo $uid."&amp;id=".$id; ?>','trailer.php?id=<?php echo $title; ?>','width=480,height=430,scrollbars=no,toolbar=no,location=no'); return false">Klik hier om de trailer te bekijken</a> (Beta)</td></tr>
        <?php if ($row['comment'] != "") { ?><tr><td width="15%" class="label">Aanvullende informatie</td><td><?php echo stripslashes($row['comment']); ?></td></tr><?php } ?>        
      </table>
    </td>

In Firefox en Chrome werkt dit gewoon prima het met het gebruik van innerHTML:

JavaScript:

document.getElementById("infoRow" + counter).innerHTML = xmlhttp.responseText;

Alleen heeft IE kennelijk wat problemen met het injecteren van data in een tabel m.b.v. innerHTML. In IE wordt de filminformatie niet geladen. Zie bijvoorbeeld deze bugreport op de site van Microsoft.

Nu heb ik deze workaround gevonden met gebruik van DOM, dit zou ook in IE moeten werken. Maar dat doet het niet bij mij. http://domscripting.com/blog/display/99

Iemand een passende oplossing voor dit nare probleem? (IE..... )

[Currahee]

Niet helemaal een oplossing voor je probleem, maar heb je al eens geprobeerd om jQuery te gaan gebruiken. Deze bevat een functie .html, waarmee je de response van de ajax request kunt invoeren in een bepaald id. In jouw geval:

JavaScript:

$('#basisRow1').html('Je tabel');

Dit levert bij mij geen problemen op in Internet Explorer.

[TJHeuvel]

Sowieso is het geen goed idee om HTML heen en weer te versturen, probeer iets als JSON of XML van je server te ontvangen en dit in javascript te parsen.
Op deze manier houd je alles netjes gescheiden, nu zit je data direct in je representatie.

Bovendien betwijfel ik of dat echt het bericht is wat je van je server krijgt; er staan namelijk letterlijk stukken PHP in.

offtopic:
En uiteraard, een heel framework gebruiken voor een enkele AJAX call is nogal overkill.

[ Voor 13% gewijzigd door TJHeuvel op 26-07-2010 15:24 ]

[Copyman]

Als je de MSDN documentatie over innerHTML leest, zie je dat innerHTML op een aantal elementen read-only is:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

Zelfs de verantwoordelijke voor deze implementatie liep hier tegenaan.

Ik kan je, samen met het JSON-advies van CyCloneNL, adviseren om eens naar insertRow, insertCell en eventueel appendChild te kijken. En document.createElement natuurlijk.

Overigens is innerHTML wel toe te passen op TD's (write).

[monnick]

Copyman schreef op dinsdag 27 juli 2010 @ 17:02:
Als je de MSDN documentatie over innerHTML leest, zie je dat innerHTML op een aantal elementen read-only is:

[...]

Zelfs de verantwoordelijke voor deze implementatie liep hier tegenaan.

Ik kan je, samen met het JSON-advies van CyCloneNL, adviseren om eens naar insertRow, insertCell en eventueel appendChild te kijken. En document.createElement natuurlijk.

Overigens is innerHTML wel toe te passen op TD's (write).

Bedankt voor de reacties. Ik heb gewoon innerHTML op een TD toegepast, dat werkt wel in alle browsers