[DHTML] insertAdjacentHTML en tabel/style

[Verwijderd]

Ik heb problemen uitdagingen om een js-array op het scherm te tonen. Mijn eerste versie was het concatten van een variabele en deze op het einde via de innerHTML prop. van een div het resultaat te laten tonen. Dit duurde op mijn 2500+ 10 secondes voor 800 objecten. Te lang dus.

Toen stuitte ik op insertAdjacentHTML. Dit duurde nog maar 3 secondes! MAAR:

Mijn tabel is vern**kt veranderd en de styletags worden niet meer gebruikt.
Is dat een behavior van deze functie? Met insertAdjacentText heb ik de text laten printen, deze vervolgens copy paste in dezelfde div gegooid en hiermee kreeg ik wel alles goed. Zie ook het plaatje. Boven fout, onder goed.



Hier mijn JS code:

code:

function WriteResults2()
{
    // 800 dingen 3 secondes!
    var elem = document.getElementById("divResult");
    elem.insertAdjacentText("afterBegin","\n<table width='542' border='0' cellspacing='0' cellpadding='0' class='ResultaatBg'>");
    var i = 1;
    for(var j = 0;j < 2;j++)
    {
        
        elem.insertAdjacentText("beforeEnd","<tr><td width='180' rowspan='2' height='25'><a href='default.aspx?m=qua_wa&id="+arObjects[i][OBJID]+"'>[img]'"+MEDIAURL+arObjects[i][FOTOGUID]+"_foto_small.jpg'[/img]</a></td><td width='7' rowspan='2'></td><td width='61' class='ResultaatTekst'><b>NIEUW</b></td><td width='107' class='ResultaatTekst'>&nbsp;"+arObjects[i][PLAATS]+"</td><td width='187' class='ResultaatTekst'>&nbsp;"+arObjects[i][PRIJS]+"</td></tr>");
        elem.insertAdjacentText("beforeEnd","<tr><td colspan='3' height='87' valign='top'><br><table cellpadding='0' cellspacing='0' border='0' width='355'><tr>");
        elem.insertAdjacentText("beforeEnd","<td class='ResultaatTekst' valign='top' width='258'>"+arObjects[i][OMSCHR]+"</td><td valign='top' width='50'>");
        if (arObjects[i][FOTOFLSH] == 'J')
            elem.insertAdjacentText("beforeEnd","<a href='#'>[img]'../Styles/Qualis/images/nl/zoeken/icon_flash.gif'[/img]</a>");
        else
            elem.insertAdjacentText("beforeEnd","&nbsp;");
            
        elem.insertAdjacentText("beforeEnd","</td><td valign='top' width='47'>");
        if (arObjects[i][FILMFLSH] == 'J')
            elem.insertAdjacentText("beforeEnd","<a href='#'>[img]'../Styles/Qualis/images/nl/zoeken/icon_video.gif'[/img]</a>");
        else    
            elem.insertAdjacentText("beforeEnd","&nbsp;");
            
        elem.insertAdjacentText("beforeEnd","</td></tr></table></td></tr><tr><td colspan='5' height='1' class='ResultaatSpacer'></td></tr>");
    }
    elem.insertAdjacentText("beforeEnd","</table>\n");
    
}
window.onLoad = WriteResults2();

Iemand een id hoe ik e.e.a. wel goed ga krijgen?
Reden trouwens waarom ik dit wil is dat de tabel dingen bevat die via criteria wel of niet getoond gaan worden. Dit zonder postback o.i.d. dus client side scripting.
Ow en verder staat er een harde waarde in mijn for-loop, maar hiermee kon ik mooi performance testen.

p.s. dit is de insertAdjacentText variant. Ik had de insertAdjacentHTML functie reeds veranderd dat hij 1 rij per keer insertte

p.s.2 Ik heb ook een functie gevonden waarmee insertAdjacentHTML ook werkt in mozilla en NS6, ben me dus bewust van de beperkingen die dit gaf

[djluc]

Wat wil je precies bereiken? Waarom schrijf je niet gewoon alles in correcte HTML met id's en verberg je producten die onzichtbaar moeten zijn?

[Verwijderd]

djluc schreef op 07 juli 2004 @ 10:18:
Wat wil je precies bereiken? Waarom schrijf je niet gewoon alles in correcte HTML met id's en verberg je producten die onzichtbaar moeten zijn?

Dat wordt ook de bedoeling, ik moet nog de criteria-verwerking in de functie gaan zetten, maar ik werk gewoon stap voor stap.
stap 1) Maak een array (check)
stap 2) Schrijf je array op scherm (check dmv sHTML += "nieuw html" enz. enz.)
stap 3) Pas de for loop aan naar 800 rounds en check performance (fail)

dus nu ben ik aan het kijken naar alternatieven van het sHTML-concatten en in 1 keer via innerHTML in de div posten.

Document.Write weet ik niet of dat gaat lukken, dit werkt nl op de plek waar de code staat en ik weet niet hoe ik mijn div dan kan legen als er een andere criteria geselecteerd worden en ik dus mijn div opnieuw moet gaan vullen

stap 4) maak je output afhankelijke van geselecteerde criteria (todo)
stap 5) complimentjes incashen bij de klant

[BtM909]

Het lijkt me sowieso handig om ook dit artikel eens te lezen: http://www.quirksmode.org/dom/innerhtml.html

[djluc]

InnerHTML is sowieso traag.
Ik snap niet veel van je verhaal. Laat eens zien waar je gegevens vandaan komen, uit een database o.i.d.?

Wat je doet: je schrijft een compleet document uit de database:

code:

<div id=product1>omschrijving enzo</div>
<div id=product2>omschrijving enzo</div>

Dan kan je toch gewoon de ongewenste producten verbergen?

[ Voor 6% gewijzigd door djluc op 07-07-2004 10:30 ]

[Verwijderd]

djluc schreef op 07 juli 2004 @ 10:30:
InnerHTML is sowieso traag.
Ik snap niet veel van je verhaal. Laat eens zien waar je gegevens vandaan komen, uit een database o.i.d.?

Wat je doet: je schrijft een compleet document uit de database:

code:

<div id=product1>omschrijving enzo</div>
<div id=product2>omschrijving enzo</div>

Dan kan je toch gewoon de ongewenste producten verbergen?

Het gaat mij in de huidige versie niet zozeer om hoe ik de producten ga verbergen of niet.
Het gaat mij er nu om dat mijn tabel en style niet goed geprint worden.

Hoe ik aan mijn data kom is dus ook niet van toepassing, maar als je het erg graag wilt weten:
SQL Server database, via C# code, render XSLT die mijn array maakt omdat xslt snel door bomen van data kan zoeken om mijn array te maken.
Mijn Array:

code:

<script language="javascript">
var arObjects = new Array();
var OBJID = 0;
var FOTOGUID = 1;
var OMSCHR = 2;
var PLAATS = 3;
var PRIJS = 4;
var FOTOFLSH = 5;
var FILMFLSH = 6;
var SOORT = 7;
var OMGVNG = 8;
var KENMRKN = 9;
var TYPE = 10;
        
        var MEDIAURL = 'http://mediaserver/';
        arObjects[0] = new Array(1,'9ACEC4D3-516E-47B7-96B9-6DAB9117FEC4','Werk','Utrecht','0','N','N','a','','','b');      
        arObjects[1] = new Array(2,'09EE8649-19E6-476C-990B-4A13A684D129','Fanta','Maarssen','0','N','N','a','','','b');        
        </script>

[Verwijderd]

BtM909 schreef op 07 juli 2004 @ 10:27:
Het lijkt me sowieso handig om ook dit artikel eens te lezen: http://www.quirksmode.org/dom/innerhtml.html

ziet er interessant uit. ff checken . tnx

[crisp]

p.s.2 Ik heb ook een functie gevonden waarmee insertAdjacentHTML ook werkt in mozilla en NS6, ben me dus bewust van de beperkingen die dit gaf.

Ben je je ook bewust van het feit dat er DOM methoden zijn die gewoon in alle moderne browsers werken, en waarmee je ook dynamisch content aan een pagina kan toevoegen?
Ik noem er een paar: createElement, createTextNode, appendChild, addRow, addCell etcetera...

[djluc]

quote: startpost

Reden trouwens waarom ik dit wil is dat de tabel dingen bevat die via criteria wel of niet getoond gaan worden.

Kan je dit eens verder specificeren?

[Verwijderd]

crisp schreef op 07 juli 2004 @ 10:42:
[...]

Ben je je ook bewust van het feit dat er DOM methoden zijn die gewoon in alle moderne browsers werken, en waarmee je ook dynamisch content aan een pagina kan toevoegen?
Ik noem er een paar: createElement, createTextNode, appendChild, addRow, addCell etcetera...

Klopt. Dit script maakt daar gebruik van:

code:

// insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement()
// for Netscape 6/Mozilla by Thor Larholm [e-mail]
// Usage: include this code segment at the beginning of your document
// before any other Javascript contents.

if(typeof HTMLElement!="undefined" &&!
HTMLElement.prototype.insertAdjacentElement){
    HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
    {
        switch (where){
        case 'beforeBegin':
            this.parentNode.insertBefore(parsedNode,this)
            break;
        case 'afterBegin':
            this.insertBefore(parsedNode,this.firstChild);
            break;
        case 'beforeEnd':
            this.appendChild(parsedNode);
            break;
        case 'afterEnd':
            if (this.nextSibling) 
                this.parentNode.insertBefore(parsedNode,this.nextSibling);
            else 
                this.parentNode.appendChild(parsedNode);
            break;
        }
    }

    HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)
    {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where,parsedHTML)
    }


    HTMLElement.prototype.insertAdjacentText = function(where,txtStr)
    {
        var parsedText = document.createTextNode(txtStr)
        this.insertAdjacentElement(where,parsedText)
    }
}

[Verwijderd]

Ik zou alle cases lowercase doen, en dan de string where converteren naar kleine letters.

code:

switch(where.toLowerCase()) {
  case "beforebegin":
    // blaat
    break;
  case "afterbegin";
     ...
}

[Verwijderd]

Verwijderd schreef op 07 juli 2004 @ 10:51:
Ik zou alle cases lowercase doen, en dan de string where converteren naar kleine letters.

code:

switch(where.toLowerCase()) {
  case "beforebegin":
    // blaat
    break;
  case "afterbegin";
     ...
}

Op zich op, maar de where parameter is namelijk conform standaard van DHTML. Dus als de where niet klopt, houd je je er niet meer aan en zou het gewoon fout moeten zijn

[ Voor 6% gewijzigd door Verwijderd op 07-07-2004 11:03 ]

[Verwijderd]

djluc schreef op 07 juli 2004 @ 10:43:
[...]
Kan je dit eens verder specificeren?

Ik heb 4 sets van criteria: omgeving, soort, type, kenmerken
Aan de hand van de selectie van de gebruiker moeten items wel of niet getoond worden.

De optie van div aan of uit zetten vind ik niet echt lekker. Dan moet de client namelijk altijd alle div's eerst genereren ook als hij deze nooit ziet.

nog even een note:
Mijn code houdt nog nergens rekening ermee, zoals reeds gemeld is dat mijn volgende uitdaging wat dus niet bij mijn huidige vraag hoort

[ Voor 16% gewijzigd door Verwijderd op 07-07-2004 11:05 ]

[Verwijderd]

Verwijderd schreef op 07 juli 2004 @ 11:02:
[...]

Op zich op, maar de where parameter is namelijk conform standaard van DHTML. Dus als de where niet klopt, houd je je er niet meer aan en zou het gewoon fout moeten zijn

Standards Information There is no public standard that applies to this method.

't Is mij een raadsel op welke standaard jij doelt.

[ Voor 6% gewijzigd door Verwijderd op 07-07-2004 11:25 ]

[Verwijderd]

Verwijderd schreef op 07 juli 2004 @ 11:24:
[...]


Standards Information There is no public standard that applies to this method.

't Is mij een raadsel op welke standaard jij doelt.

Ik doel op dit stukkie:
sWhere Required. String that specifies where to insert the HTML text, using one of the following values:
beforeBegin Inserts sText immediately before the object.
afterBegin Inserts sText after the start of the object but before all other content in the object.
beforeEnd Inserts sText immediately before the end of the object but after all other content in the object.
afterEnd Inserts sText immediately after the end of the object.

[Verwijderd]

Dankzie het linkie van BtM909 heb ik mijn code herschreven naar de push methode. Geeft inderdaad de beste performance.

Enerzijds is mijn uitdaging dus gefixt, door gewoon andere code te gebruiken. Anderzijds is mijn topic niet opgelost, want mijn post was juist waarom insertAdjacentHTML de tabel definitie en style vernachelde.

bedankt iig voor de input!

[Verwijderd]

Als slot... afterBegin (en alle andere drie) mag je schrijven zoals je wil, mét of zonder hoofdletter...

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>insertAdjacentHTML Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
window.onload = function () {
  // Geen hoofdletter b van Begin, geen probleem voor IE...
  // W3C validator zuigt, je mag geen HTML gebruiken in JavaScript block :S
  document.body.insertAdjacentHTML("afterbegin", "<" + "b>jorgen</" + "b>");
}
    </script>
  </head>
  <body>

  </body>
</html>