[FF:Javascript]InnerHTML probleem

[Possstema]

Hallo, ik ben sinds kort wat aant prutsen met AJAX/JavaScript ( ik kon beide niet ). Nu is het me gelukt om een kleine chat-applicatie te maken. Dit heb ik later in een ( uit tabellen bestaande ) lay-out. Het probleem is alleen dat Firefox de tabel niet 'resized' ofwel aanpast aan de tekst die ik in een cell->span( id=content ) doe, tenzei ik firefox zelf resize of maximaliseer, dan is het ineens weer goed. Nou heb ik al veel gezocht en daaruit bleek dat innerhtml vaak voor problemen zorgt en dat ik het beter met createtectnode ed. kan doen.

Nou vond ik de volgende oplossing op http://developer.mozilla..../DOM:element.replaceChild:

JavaScript:

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// create an empty element node
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// give it an id attribute called 'newSpan'
sp1.setAttribute("id", "newSpan");

// create some content for the new element.
var sp1_content = document.createTextNode("new replacement span element.");

// apply that content to the new element
sp1.appendChild(sp1_content);

// build a reference to the existing node to be replaced
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

Maar dan heb ik exact hetzelfde effect.
Mijn code is zo:

JavaScript:

function processXml(xml)
{
    var list = '';
    
    var categories = xml.getElementsByTagName('categories').item(0);
    var category_nodelist = categories.getElementsByTagName('category');
        
    for (var i = 0; i < category_nodelist.length; i++)
    {
        var node = category_nodelist.item(i);
        var title = node.getElementsByTagName('title').item(0).firstChild.data;
        var subtitle = node.getElementsByTagName('subtitle').item(0).firstChild.data;
        list = list + title + ': ' + subtitle + '<br>';
    }

        var content = document.getElementById("content");
        content.innerHTML = list;
}

En het HTML stukje is zo:

HTML:

  <table width="610" border="0" cellpadding="0" cellspacing="0">
    <tr>...</tr>
    <tr>...</tr>
    <tr>
      <td valign="top" style="..."><div style="...">
      <span id="content"></span>
      <br><br><...2 invoerveldjes + knopje...>
      </div></td>
    </tr>
    <tr>...</tr>
  </table>

In IE en Opera werkt het trouwens prima.

Pic te ondersteuning:

[ Voor 0% gewijzigd door Possstema op 01-08-2006 01:51 . Reden: Beetje opschone... ]

[cyberstalker]

Is een bekende bug met Fx. Een workaround is in je javascript even de display van de body wisselen tussen none en block.

[Possstema]

Ik heb nu het volgende stukje code aan het eind van het script geplaatst,
maar t werkt nog steeds niet:

JavaScript:

if ( navigator.userAgent.indexOf("Firefox") != -1 )
{
    var body = document.getElementsByTagName("body").item(0);
    body.style.display = 'none';
    body.style.display = 'block';
}

[Possstema]

Niemands een idee, ik heb zelf half google afgezocht maar ben nog niet een oplossing tegengekomen. Wel is het volgends mij een bug in het DOM en niet van innerHTML, dat stond iig op bugzilla van Firefox.

[Possstema]

Nog maar eens een kick, ik vind het wat lullig om mensen met FF "buiten te sluiten" ..., heeft echt niemand een idee ( als ist maar een hint ofzo ( al zijn het alleen maar zoek-trefwoorden waarmee ik het mogelijk mee zou kunnen vinden ) ) hoe ik dit zou kunne oplossen.

[Verwijderd]

Ik heb hetzelfde probleem met InnerHTML en firefox
In 2 scripts waarin innerHTML wordt gebruikt werken wel met opera en IE maar niet in Firefox
Ook
body.style.display = 'none';
body.style.display = 'block';
helpt niet.
Iemand een workaround , graag wel eenvoudig houden, ben beginner

[Verwijderd]

verder zoekend heb ik confirmatie, maar geen antwoord gekregen op de problemen met InnerHtml op http://www.quirksmode.org/dom/tests/innerhtmltest.xhtml

Indien workaround hoor ik het graag.

InnerHtml wordt gebruikt in een prachtig banner script gevonden op leejoo.nl
Werkend te zien op Swifterbant.net met IE of Opera en niet werkend met Fx

[Verwijderd]

Ik had een vergelijkbaar probleem. Dynamic content (met DOM of innerHTML) die tabellen bevat worden niet opnieuw gerendered. De oplossing die ik gebruikte (weet niet of het voor jou ook werkt) is 't werken met expliciete breedtes. Gebruik daarbij een container element om de breedtes op te vragen.

Bijvoorbeeld: container is "container" en de tabel is "tabel". Het volgende zorgt voor een hoogte voor de tabel gelijk aan de container:

JavaScript:

var height = document.getElementById("container").style.height;
// do some calculations with height if necessary.
document.getElementById("tabel").style.height = height;

Voor mij zelf gold dat mijn pagina in de onload aangemaakt werd. Om het geheel werkende te krijgen, moest er een doResize functie aan te pas komen die zorgt voor de resizing voor FF. Afhankelijk van jouw code en hoe je hebt geprogrammeerd, heb je zoiets nodig (ik denk direct na jouw content.innerHTML)

Success!

[Verwijderd]

InnerHtml wordt gebruikt in een prachtig banner script gevonden op leejoo.nl

Over het algemeen is het aan te raden om zoveel mogelijk gebruik te maken van DOM voor DOM-aware browsers (Opera, Safari en Gecko based browsers zoals FireFox, Mozilla, K-Meleon) en innerHTML voor IE en clonen. Echter, voor het gemak wordt vaak teruggegrepen op innerHTML voor allemaal.

Helaas zijn er verschillende browser gedragingen. Als je je echter aan DOM houdt binnen de HTML die je injecteert (dus geen html fouten, open tags etc), gaat het over het algemeen goed en geldt de regel: als het in FF en andere standards-compliant browsers werkt, kan je het daarna vrij eenvoudig aanpassen aan IE. Omgekeerd geldt helaas niet (IE herstelt fouten voor je, het is moeilijk te zien waar je ze maakt en of je ze maakt en het heeft een dramatisch slechte error reporting).

Een tip: gebruik de FF plugin "View Rendered Source Chart". Je kan dan zien hoe je pagina eruit ziet in HTML nadat je pagina-manipulatie en innerHTML injecties hebt gedaan. Een life-saver!

verder zoekend heb ik confirmatie op http://www.quirksmode.org/dom/tests/innerhtmltest.xhtml

Dit geldt alleen voor zeer speciale situaties, waarbij de XHTML wordt gebruikt en aplication/xhtml+xml als content-type wordt doorgegeven door de HTTP daemon. Dit komt echter maar weinig voor (en geeft weer andere problemen dan alleen met innerHTML), content-type text/html is veel gebruikelijker.