Probleem Javascript + Internet Explorer + tabel

[Verwijderd]

Ik heb een probleem met javascript in Internet Explorer. In Firefox en Opera werkt het wel goed.

Ik heb een javascript dat een deel van de pagina opbouwt. Het bestaat uit een loopje door een array waar bestandsnamen van andere scripts in staan. De bedoeling is dat er een tabel ontstaat met in iedere cel een script. Bijvoorbeeld:

HTML:

<td>script 1</td><td>script 2</td>

.
Die scripts doen voorlopig niets anders dan een aantal dingen weergeven met behulp van document.write. Onder Firefox en Opera krijg ik netjes een aantal cellen naast elkaar met de uitvoer van de verschillende scripts. Het probleem is dat Internet Explorer de uitvoer van de scripts onder elkaar zet.

Script voor opbouwen van pagina. Hij gaat door een loopje en doet voor ieder element:

JavaScript:

document.write("<td class=\"content\">");
document.write("<script src=\"http://localhost/js/"+js[i]+".js\" type=\"text/javascript\"></scr"+"ipt>");
document.write("</td>");

Dat werkt dus niet onder IE. Wanneer ik het volgende doe:

JavaScript:

document.write("<td class=\"content\">");
document.write("tekst <script src=\"http://localhost/js/"+js[i]+".js\" type=\"text/javascript\"></scr"+"ipt>");
document.write("</td>");

wordt "tekst" wel netjes in cellen naast elkaar weergegeven, maar de uitvoer van de scripts blijft op dezelfde verkeerde manier weergegeven (onder elkaar).

Wanneer ik de code handmatig schrijf (dus <td>script 1</td> enz.), werkt het wel. Het javascriptje is nodig, omdat de scripts niet van te voren vaststaan.

Ik hoop dat het verhaal een beetje duidelijk is en dat iemand weet waar het aan zou kunnen liggen.

[funkwurm]

Ik denk dat IE pas de losse scripts gaat parsen nadat de initiele pagina klaar met renderen is. Als hij dan daarin document.write() tegen komt rendert hij die dan pas en wordt de zwik dus onder de tabel geplaatst. En ik moet zeggen dat ik dat ook geen vreemd gedrag vind, want eigenlijk doe je dit:

JavaScript:

document.write('<script type="text/javascript"> document.write(\'scriptresultaat\'); </script>');

Hierbij moet de JS-thread toch rare sprongen maken, geneste document.write()'s zijn denk ik nooit een charmante oplossing.

Wat je denk ik het best kan doen is helemaal geen gebruik maken van document.write(), maar de scripts die hun resultaat in de cellen moeten plaatsen ook expliciet opdracht geven om iets in de cellen te plaatsen.

Je moet zelf even kijken wat in jouw situatie het handigste is, een tabel heeft een rows[] array en elke index daarvan heeft weer een cells[] array, maar misschien dat het handiger is om de cellen waar je gebruik van wil maken een id te geven. Zo'n id mag niet alleen een cijfer bevatten, maar als je ze dan c1 t/m c10 noemt kun je de scriptjes die dus niet vast staan opdracht geven om te getElementById('c'+i).appendChild()'en.

Ik zit me te bedenken dat de scriptjes zelf waarschijnlijk niet weten in elke volgorde ze zullen komen te staan dus die i variabele zal dan misschien een global moeten zijn waarvan elk scriptje gewoon aanneemt dat hij bestaat en hem na afloop ophoogt voor de volgende.

Het toevoegen van de (onbekende) scriptjes zelf kan dan door script-tags te appendChild()'en. Dit werkt wel goed namelijk, de js wordt dan ook daadwerkelijk uitgevoerd. Het is daarmee zelfs een beetje de cross-server variant van AJAX.

[ Voor 20% gewijzigd door funkwurm op 09-08-2007 09:16 ]

[Verwijderd]

Ik dacht, ik begin eenvoudig en ga stapje voor stapje verder zodat ik weet waar het eventueel fout gaat. Ik heb nu het volgende, maar zelfs dat werkt niet in IE (6). Het werkt wel onder Firefox (2.0.0.6) en Opera (9.21).

JavaScript:

function bouwen() {
        var tabel = document.getElementById("mijn_tabel");
        var tblBody = document.createElement("tbody");
        var rij = document.createElement("tr");     
        
        //loopje
        for(i = 0; i < 10; i++){
            var cel = document.createElement("td");
            var tekst = document.createTextNode("sdsd");
            cel.appendChild(tekst);
            rij.appendChild(cel);
        }
    
        tblBody.appendChild(rij);
        tabel.appendChild(tblBody);
}

HTML:

<table border="1" id="mijn_tabel">
<script language="javascript" type="text/javascript">
bouwen();
</script>
</table>

Zowel Opera als Firefox geven netjes een aantal cellen weer met daarin de tekst. In IE gebeurt er helemaal niets en blijft de pagina leeg.

[crisp]

IE en dynamische HTML operaties binnen de tabel zelf tijdens de renderfase is een grote no-no. Dat gaat gewoonweg niet werken...

Je zou nog kunnen kijken wat er gebeurd als je in ieder geval de td's niet document.write, dus zo:

HTML:

<table>
  <tr>
    <td>
      <script type="text/javascript">
        document.write('<script src="http://localhost/js/'+js[i]+'.js" type="text/javascript"><\/script>');
      </script>
    </td>
  </tr>
</table>

[ Voor 66% gewijzigd door crisp op 09-08-2007 19:58 ]

[Verwijderd]

Ok, bedankt! Ik ga het nu anders proberen. Ik maak een div'je aan met een id en laat javascript vervolgens binnen die div de tabel aanmaken. Ga kijken of dit wel werkt.

[Verwijderd]

Ok, ik heb nu dit:

JavaScript:

var body = document.getElementById("inhoud");
var tabel = document.createElement("table");
var tblBody = document.createElement("tbody");
var rij = document.createElement("tr");     
....
....
var cel = document.createElement("td");
var tekst = document.createTextNode("blaat");
cel.appendChild(tekst);
rij.appendChild(cel);
....
....
tblBody.appendChild(rij);
tabel.appendChild(tblBody);
body.appendChild(tabel);

Zoals ik wilde maakt dit netjes cellen aan; zelfs in IE.
Ik heb nog wel een vraag: ik wil dus in plaats van de tekst "blaat", het javascript-include.
Wanneer ik dit doe, wordt die tekst (<script src=\"http://localhost/js/"+jss[i]+".js\" type=\"text/javascript\"></scr"+"ipt>) letterlijk getoond, i.p.v. uitgevoerd.
Ik heb in documentatie geen andere methode gevonden dan de createTextNode. Is er misschien een manier om het toch voor elkaar te krijgen?

[Cartman!]

Vrij ranzig maar misschien heb je iets aan innerHTML ?

[frickY]

Verwijderd schreef op donderdag 09 augustus 2007 @ 19:53:

HTML:

<table border="1" id="mijn_tabel">
<script language="javascript" type="text/javascript">
bouwen();
</script>
</table>

Je tabel bestaat niet voor IE tot je hem afsluit. Het volgende zou wel moeten werken

HTML:

<table border="1" id="mijn_tabel">
</table>
<script language="javascript" type="text/javascript">
bouwen();
</script>

[funkwurm]

Verwijderd schreef op donderdag 09 augustus 2007 @ 20:17:
[...]
Ik heb nog wel een vraag: ik wil dus in plaats van de tekst "blaat", het javascript-include.
Wanneer ik dit doe, wordt die tekst (<script src=\"http://localhost/js/"+jss[i]+".js\" type=\"text/javascript\"></scr"+"ipt>) letterlijk getoond, i.p.v. uitgevoerd.
Ik heb in documentatie geen andere methode gevonden dan de createTextNode. Is er misschien een manier om het toch voor elkaar te krijgen?

Ik poogde je nu juist uit te leggen dat je createElement() en appendChild() op script-tags kan toepassen:

JavaScript:

var scr = document.createElement("script");
scr.type="text/javascript";
scr.src = "http://localhost/js/"+jss\[i]+".js";
cel.appendChild(scr);

Maar misschien snap ik je situatie toch niet helemaal want ik dacht dat je die tabelcellen zelf op zich niet dynamisch hoefde aan te maken, alleen de inhoud ervan. Kun je anders het in FF werkende script online zetten, misschien dat het dan duidelijker wordt.

[ Voor 4% gewijzigd door funkwurm op 10-08-2007 00:05 ]

[Verwijderd]

@funkwurm: Dan had ik je in eerste instantie niet goed begrepen. De cellen moeten ook dynamisch worden aangemaakt, omdat niet van te voren bekend is hoeveel het er zullen zijn. Daarnaast staat ook niet vast welk script moet worden geladen in welke cel. De volgorde kan verschillen.

Ik heb nu dit, maar het werkt niet :

HTML:

<div id="inhoud"></div>
<script language="javascript" type="text/javascript">
bouwen();
</script>

JavaScript:

function bouwen() {
    var body = document.getElementById("inhoud");
    var tabel = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var rij = document.createElement("tr");     
        
    //loopje
    for(i = 0; i < 8; i++){
        var cel = document.createElement("td");
        var scr = document.createElement("script");
        scr.type = "text/javascript";
        scr.src = "http://localhost/js/proef.js";
        cel.appendChild(scr);

        //var tekst = document.createTextNode("fff");
        //cel.appendChild(tekst);

        rij.appendChild(cel);   
    }
        
    tblBody.appendChild(rij);
    tabel.appendChild(tblBody);
    body.appendChild(tabel);
    tabel.setAttribute("border", "1");  
}

Er gebeurt nu niets (ook niet in Firefox).
Wanneer ik de commentaar-slashes weghaal voor "var tekst = createTextNode("fff");", worden er netjes een aantal cellen aangemaakt met daarin de tekst. Dit werkt onder alle drie de browsers. Het probleem zit hem dus in het toewijzen/uitvoeren van scripts aan de cellen.

[funkwurm]

Misschien kun je proberen om de volgorde van de appendChild()'s om te draaien zodat je een element altijd append aan een element dat al in het document staat, en niet pas op het aller laatst de hele zwik in de div plempt.

En wat doet proef.js? Ik zie dat het op de localhost staat, dus als het goed is kun je die scripts (zowel proef als de uiteindelijke jssX.js) zelf modificeren waar nodig, toch?

[Verwijderd]

Ik heb al geexperimenteerd met het veranderen van de volgorde de appendChild()'s. Het maakt helaas geen verschil. In alle gevallen heb ik een tabel met cellen met daarin de tekst. En onderaan de pagina wordt de output van de scriptjes getoond (in Firefox, niet in IE). Terwijl die dus juist in de cellen moet worden getoond.

De scriptjes kan ik inderdaad aanpassen, maar ze bevatten op dit moment alleen nog maar een rits document.write-statements.

[Verwijderd]

Ik kwam toevallig op een site waar het ging over Firebug, dus heb ik die maar weer eens aangezet (helemaal vergeten, had misschien wel een hoop gevloek gescheeld ).
Daarmee kon ik zien dat de scripts wel degelijk op de goede plek stonden. Daar kon het dus niet aan liggen.
De scriptjes waren eerst alleen maar document.write-statements.
Deze heb ik vervangen door een functie die een id als parameter doorkrijgt van het "hoofd-script". Hij zoekt vervolgens de cel op en past met behulp van innerHTML de inhoud aan.

Dit werkt prima en ik ben dan ook niet van plan om het te veranderen

Iedereen heel erg bedankt voor zijn hulp (en in het bijzonder funkwurm)

[Verwijderd]

Ik heb trouwens nog een vraagje .
Ik doe dit:

JavaScript:

cel.setAttribute('class', "content");

Cascading Stylesheet:

.content {
    font-size:13px;
    text-align:left;
    vertical-align:top;
    width:300px;
    border: #000000 solid 1px;
}

Zowel Opera als Firefox tekenen een border en zetten de tekst aan de bovenkant van de cel.
Internet Explorer tekent geen border en zet de tekst ook niet aan de bovenkant. Doe ik iets verkeerd en zie ik het niet of is het weer een leuke "feature" van IE?

[Verwijderd]

Gebruik anders gewoon

JavaScript:

cel.className = 'content';

Dat werkt ws wel.

[Verwijderd]

Dat werkt inderdaad wel
Bedankt!