[AJAX] Toevoegen van row's aan tabel

[josjos]

Ik ben bezig met het maken van een 'dynamic' tabel .
Zo wil ik een bepaalde subgroep openklappen die door middel van JS/Ajax word opgehaald uit PHP&MYSQL.
Ik gebruik het welbekende:

code:

xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET","addrows.php",true)
xmlHttp.send(null)

Mijn vraag:
Hoe kan ik row's aan een tabel toevoegen vanuit mijn addrows.php. Ik kan wel een complete <tr></tr> teruggeven, maar hoe krijg ik die op de goede plek?
Dit werkt dan niet:

code:

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
tbody.appendChild(xmlHttp.responseText);
}
}

/* Response voorbeeld:
xmlHttp.responseText = "<tr><td>&nbsp;</td><td></td></tr>";
*/

Javascript uitvoeren in deze addrows.php werkt niet anders had ik iets dergelijks gebruikt.
Ik zal vast een logische oplossing over het hoofd zien.......

[ Voor 24% gewijzigd door josjos op 13-07-2008 12:15 ]

[H004]

Volgens mij werkt het niet, omdat je response geen element is maar een string. Je zal dus de html moeten attachen aan de bestaande html:

JavaScript:

var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];

// inhoud van je tabel ophalen
var oude_html = tbody.innerHTML;

//inhoud en nieuwe string aan elkaar plakken
var response = "<tr><td>&nbsp;</td><td></td></tr>";
nieuwe_html = oude_html + response;

//nieuwe code in de tabel plaatsen
document.getElementById(id).getElementsByTagName("TBODY")[0].innerHTML = nieuwe_html;

Mooier is natuurlijk om alleen de inhoud van je cellen op te vragen, en deze vervolgens met javascript in html om te zetten:

JavaScript:

responsetekst = " ";

// code van jouw link
var row = document.createElement("TR")
var td = document.createElement("TD")
td.appendChild(document.createTextNode(responsetekst))
row.appendChild(td1);
tbody.appendChild(row);

Wat Dominic zegt dus

[ Voor 26% gewijzigd door H004 op 13-07-2008 12:58 ]

[dominic]

Het is niet echt netjes om in de data die je teruggeeft serverside met HTML te mengen. Zou je de server niet een array of comma seperated list, of beter nog: XML-data kunnen laten returnen?

Dan kun je in Javascript netjes de velden uitlezen en elementen gaan aanmaken in plaats van HTML strings inserten.

code:

var oTd = document.createElement("TD");
var oTr = document.createElement("TR");

// oTd opbouw
// oTd opbouw

oTr.appendChild(oTd);

etc...

Wat H004 zegt dus..

[ Voor 28% gewijzigd door dominic op 13-07-2008 13:00 ]

[crisp]

innerHTML op TBODY zal iig niet werken in IE:

quote: http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

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.

vwb het werken met HTML fragments of het compleet genereren van markup middels javascript en enkel puur data-overdracht doen via XHR is een designkeuze. Het is imo niet verkeerd om met complete fragments over de lijn te werken aangezien je de scheiding data/markup ook puur serverside kan houden. In het geval dat je ueberhaupt serverside al functies of templates hebt die die markup genereren dan is het juist onderhoudstechnisch niet handig om diezelfde logica ook nog eens clientside te dupliceren voor een XHR interface.

Verder zie ik XML aangeraden worden. XML verwerking clientside is over het algemeen redelijk omslachtig en verbose en het stelt hoge eisen aan je output-generator. Een meer light-weight formaat dat in javascript beter en sneller uit te lezen is is bijvoorbeeld JSON.

In principe zou je ook nog kunnen opteren voor XHTML via XML dat je clientside importeert in een HTML namespace en waar je vervolgens gewoon DOM-methods op los kan laten. Ik kan je echter wel alvast vertellen dat je dan in een crossbrowser hel belandt

Kortom:

- werken met HTML fragments is niet verkeerd
- innerHTML is vaak goed bruikbaar, met uitzondering van bepaalde elementen mbt IE, daar zal je dan dus een workaround voor moeten verzinnen: sommige JS libraries zoals jQuery hebben functionaliteit die in dat soort gevallen het markup fragment omzet naar DOM-methods zodat dit ook in IE gewoon werkt, maar een alternatief zou kunnen zijn om een documentFragment aan te maken en daar innerHTML = '<table>' + responseText + '</table>' op te doen en vervolgens met een DOM-method de juiste childNodes weer over te hevelen

[dominic]

crisp schreef op zondag 13 juli 2008 @ 15:25:
innerHTML op TBODY zal iig niet werken in IE:

[...]




vwb het werken met HTML fragments of het compleet genereren van markup middels javascript en enkel puur data-overdracht doen via XHR is een designkeuze. Het is imo niet verkeerd om met complete fragments over de lijn te werken aangezien je de scheiding data/markup ook puur serverside kan houden. In het geval dat je ueberhaupt serverside al functies of templates hebt die die markup genereren dan is het juist onderhoudstechnisch niet handig om diezelfde logica ook nog eens clientside te dupliceren voor een XHR interface.

Verder zie ik XML aangeraden worden. XML verwerking clientside is over het algemeen redelijk omslachtig en verbose en het stelt hoge eisen aan je output-generator. Een meer light-weight formaat dat in javascript beter en sneller uit te lezen is is bijvoorbeeld JSON.

In principe zou je ook nog kunnen opteren voor XHTML via XML dat je clientside importeert in een HTML namespace en waar je vervolgens gewoon DOM-methods op los kan laten. Ik kan je echter wel alvast vertellen dat je dan in een crossbrowser hel belandt

Kortom:

- werken met HTML fragments is niet verkeerd
- innerHTML is vaak goed bruikbaar, met uitzondering van bepaalde elementen mbt IE, daar zal je dan dus een workaround voor moeten verzinnen: sommige JS libraries zoals jQuery hebben functionaliteit die in dat soort gevallen het markup fragment omzet naar DOM-methods zodat dit ook in IE gewoon werkt, maar een alternatief zou kunnen zijn om een documentFragment aan te maken en daar innerHTML = '<table>' + responseText + '</table>' op te doen en vervolgens met een DOM-method de juiste childNodes weer over te hevelen

Dan heet ik je welkom in de HTML-fragment-hel. Zodra je nl. events van elementen wil gaan opvangen ben je helemaal zuur. Gewoon netjes ieder element via JS aanmaken, dan hou je altijd controle over je dynamische paginacontent.

[crisp]

dominic schreef op zondag 13 juli 2008 @ 15:30:
[...]


Dan heet ik je welkom in de HTML-fragment-hel. Zodra je nl. events van elementen wil gaan opvangen ben je helemaal zuur. Gewoon netjes ieder element via JS aanmaken, dan hou je altijd controle over je dynamische paginacontent.

Ja, maar zoals gezegd zijn er libraries waar je een HTML fragment in kan schieten en die dat verder netjes voor je afhandelen. Wijzelf mixen doorgaans geen markup met behaviour (geen inline eventhandlers) maar attachen die behaviours altijd achteraf, ook als er een fragment update is gedaan via XHR

[josjos]

Alright, ik heb een JS functietje geschreven die de return value lekker opdeeld,
Ik ga ook eens naar JSON kijken, bedankt voor de uitgebreide reacties!

[Bozozo]

Er zijn trouwens standaard functies om tabellen te veranderen.

JavaScript:

var myTable = document.getElementById('myTable');

var row = myTable.insertRow(index) //inserts row at [index], use -1 to append

var cell = row.insertCell(index) //inserts cell at [index], use -1 to append

cell.innerHTML = '...';

Waarschijnlijk is het toevoegen van een paar rijen / cellen sneller dat het volledig updaten van de innerHTML van de tabel.