Indsæt HTML kode via innerHTML

Hvordan henter du dit HTML ind i scriptet.
Har du overvejet at sende det fra ASP som et JSON object og sætte det ind på siden med javascript?

sHtml = "<%=strHTML%>";
parent.document.getElementById('content').innerHTML = sHtml;

Min ASP variable strHTML indeholder alt HTML koden.

I første omgang kan jeg ikke se du skulle gøre mere end at escape " tegnet når du udskriver:

sHtml = "<%= replace(strHTML, """", "\""") %>";

-- og hvorfor sætte serveren på overarbejde med at generere en hel masse html, når du langt lettere kan generere f.eks. JSON eler XML ?-)

-- men det kan selvfølgelig være ligegyldigt, hvis du næsten ingen besøgende har og/eller kun skal bruge siden nogle måneder eller år ...

-- men som der ligger i undermening til dette og sikkert også __aks indlæg, findes innerHTML slet ikke, og du kan langt lettere indsætte det med javascript ved at klone et eller flere template-elementer, og så tilrette de småting, der er nødvendige (f.eks. med JSON-data !-)

Hej Fennec,

Nu bliver koden sendt igennem uden fejl, så langt så godt. Men det bliver ikke vist helt efter planen.

Koden som bliver sendt over ser således ud:

parent.document.getElementById('chat_content').innerHTML = "<tr>    <td  width=\"100\"><a href=\"java script:void(0);\" onclick=\"setSentTo(377770,'Stina');\"><font color=\"#FF0000\">Stina</a></font></td>    <td >Line 4</td></tr><tr>    <td class=\"row1\" width=\"100\"><a href=\"java script:void(0);\" onclick=\"setSentTo(377770,'Stina');\"><font color=\"#FF0000\">Stina</a></font></td>    <td class=\"row1\">Line 3</td></tr><tr>    <td  width=\"100\"><a href=\"java script:void(0);\" onclick=\"setSentTo(377770,'Stina');\"><font color=\"#FF0000\">Stina</a></font></td>    <td >Line 2</td></tr><tr>    <td class=\"row1\" width=\"100\"><a href=\"java script:void(0);\" onclick=\"setSentTo(377770,'Stina');\"><font color=\"#FF0000\">Stina</a></font></td>    <td class=\"row1\">Line 1</td></tr>";

Problemet nu er at det hele står på én linie, selvom der er flere <TR> tags. Har du nogen forklaring på det?

Jens K

Fennec: Glem det, det var mig som havde lavet en fejl, tester lige lidt videre på det :)

Såvidt jeg kan se, skal du kun sende 2 eller 3 stykker data for hver post, og så kan du spare serveren (og brugernes netforbindelser !-) for en hulens masse data, f.eks. ved at generere dette fa serveren:

json = {[377770,"Stina","Line 4"],[377770,"Stina","Line 2"],[377770,"Stina","Line 3"],[377770,"Stina","Line 1]}

-- og så lave koden clientside således:

<table id="template" style="display:none:">
  <tr>
    <td style="width:100px"><a href="java script:void(0);" style="color:#f00">&nbsp;</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="row1" style="width:100px"><a href="java script:void(0);" style="color:#f00">&nbsp;</a></td>
    <td class="row1">&nbsp;</td>
  </tr>
</table>

<script type="text/javascript">

/* Dine funktioner, hvor du henter data*/

//funktion, der behandler data
function insertData(response){
  var tb = document.getElementById("chat_content");
  var trs = document.getElementById("template").getElementsByTagName("tr");
  var linenum = 1;
  var json = eval( "(" + response + ")");
  for(lines in json){
    linenum = ++linenum % 2;
    var newTr = trs[linenum].cloneNode(true);
    var newA = newTr.getElementsByTagName("a")[0];
    newA.firstChild.nodeValue = lines[1];
    newTr.getElementsByTagName("td")[1].firstChild.nodeValue = lines[2];
//Hvis der er linjeskift (<br>- eller <p>-tags) i dit output, skal der tilføjes en funktion, der håndterer dette
    tb.appendChild(tb);
    setEvent(newA,"click","setSentTo(" + lines[0] + ",'" + lines[1] + "')");
  }
}

function setEvent(elm, evt, func){
  if(elm.addEventListener){
    elm.addEventListener(evt, func, true);
  }else if(elm.attachEvent){
    elm.attachEvent("on" + evt, func);
  }else
    elm["on" + evt] = func;
  }
}
</script>

-- absolut utestet, skrevet lige her for at vise teknikken !o]

Ups, en hurtig fejl:

...
//Hvis der er linjeskift (<br>- eller <p>-tags) i dit output, skal der tilføjes en funktion, der håndterer dette
    tb.appendChild(newTr);
    setEvent(newA,"click","setSentTo(" + lines[0] + ",'" + lines[1] + "')");
...

-- og så glemte jeg at præcisere, at det skal være et tbody-element, der har id'et fra start, da IE ellers ikke kan håndtere indsættelsen af table-rows:

<table>
  <tbody id="chat_content"></tbody>
</table>

<ole>

Property'en innerHTML hører til i midthalvfemserne, hvor vi kun havde invalid 'slamkode' at manipulere sidens elementer med. Siden 99 har vi haft langt bedre metoder til den slags - så du skal nok lære noget om DOM (mere end lige 'getElementById')  ;o)

Prøv at læse:
    http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php

- og læg mærke til, at jeg kun ganske kort berører de problemer, udskrivningen af HTML giver for serveren, som roenving kommer ind på højere oppe i tråden. Det er en hel artikel værd i sig selv.

/mvh
</bole>

roenving: Vil du ikke lige smide et svar?

roenving: Jeg lukker spørgsmålet nu :(