Rendering af tabel efter AJAX kald ?

hvad er det du sender tilbage og hvordan forsøger du at sætte det ind i din div?

man kan bruge lave hele tabellen serverside og indsætte den via innerHTML (og få olebole på nakken), eller man kan lave JSON data serverside og så lave genskabe tabellen i browseren via DOM.

Begge metoder har sine fordele og ulemper. I det lange løb er DOM nok bedst.

Jeg sender :

<table>
    <tr>
        <td></td>
    </tr>
</table>

Tilbage fra serveride kald og jeg bruger olebole's ajax wrapper til dette formål. Og når jeg indsætter det gør jeg følgende :

document.getElementById("roleManagement").firstChild.nodeValue = oHttp.responseText;

Hvor roleManagement er ideet på min div, men det udskrives stadigt som almindelig tekst istedet for at blive renderet som html.

Det du får tilbage er jo ikke en DOM node (så vidt jeg ved), det er netop bare en tekst, så den kan du ikke få ind på den måde.

Hvis du laver html serverside, er muligheden så vidt jeg ved vist kun innerHTML (men tager sikkert fejl)

Du bør absolut _ikke_ benytte den teknik, hvilket du jo så også har opdaget !-)

-- du _kan_ bruge innerHTML, men da den aldrig har været eller vil være en del af den officielle binding mellem javascript og html, er det som daleif påpeger, uheldigt at bruge den (og så op i numsen med hvem man får på nakken, det vigtigste er, at man ikke skal lave hele sin grundlæggende kode om, hvergang der kommer en browser !-)

-- du bør derfor i stedet lave et json-objekt, som du kan indsætte elementerne via DOM fra ...

-- kender du den færdige struktur i svaret er det rasende simpelt, er strukturen nogenlunde fast, f.eks. altid 3 (eller måske 6 !-) kolonner i hver række, er det også rimeligt simpelt ...

-- hvis det er mere kompliceret, kan det blive vanskeligt !o]

Lavede lige en test med innerHTML og det virker fint, men jeg er sikker på at olebole nok har noget i ærmet der vil virke ud over json, mon ikke ;o)

roenving >> kan du linke til et eksempel der viser hvordan jeg bære mig ad med dette eller har du noget liggende du kunne poste her ?

<ole>

En ting, man også bør tænke på (det er nævnt i en bisætning i slutningen af min artikel om innerHTML) er, at det ofte tager 5-10.000 gange længere tid at skrive HTML ud på serveren i forhold til at skrive samme data i JSON!  ;o)

Men som roenving skriver, kan man ikke angive alternativer uden at kende den nøjagtige kode

/mvh
</bole>

Der er ikke noget specielt kompliceret i det jeg skal lave det er lige ud af landevejen en tabel med f.eks 6 kolonner hvor der vises noget tekst, nogle links og nogle submit buttons.

Links og buttons i bruges så til at behandle hver record fra databasen.

Findes der ikke nogle brugbare eksempler jeg kan se lidt på ?

Jamen, det er da fint, det ikke er kompliceret. Så kan du jo lynhurtigt vise os, hvordan din præcise struktur ser ud  ;o)

Som Roenving og Olebole nævner, kan man ikke angive en fast formel for, hvordan du bør gøre, når vi ikke ved præcis, hvad du skal have produceret. Der er nemlig mange faldgruber og ting, der skal tages højde for, som afhænger 100% af detaljer i den kode, der skal opstå.

i den henseende har jeg et bi-spørgsmål:

hvis man har en tekst som hentes via AJAX/JSON og denne tekst indeholder links, hvad er så den "rigtige" måde at ordne sin tekst i JSON således at man kan få teksten overført, for vi kan jo ikke bare skrive <a href...>...</a> inden i teksten i JSON.

Det ville nok være rigtigst, nok helst med regexp, at dele teksten ved alle links. F.eks. kunne:

Lorem ipsum dolor sit amet, http://www.eksperten.dk consectetur adipiscing elit.

blive:

"Lorem ipsum dolor sit amet, "
"http://www.eksperten.dk"
" consectetur adipiscing elit."

Så kan det sammensættes ordentligt med DOM.
Første tekst indsættes som tekstnode, en A-node oprettes og linkteksten indsættes i dens HREF-attribut, og den anden tekst indsættes som tekstnode herefter.

Det er også den metode jeg anvendte i de indledende tests jeg har lavet med JSON, en smule bøvlet når ULR og URL tekst er forskellige, men det kan nemt fikses ved at opdele ved alle links i teksten.

Spurgte bare for at høre om der var andre (smartere) metoder.

Ok, havde ikke lige fanget at i gerne ville se hvordan min tabel skal se ud ;o)

<table width="100%" cellspacing="2" cellpadding="2">
    <tr>
        <td><b>Id</b></td>
        <td><b>Bruger gruppe</b></td>
        <td><b>Beskrivelse</b></td>
        <td><b>Oprettet</b></td>
        <td><b>Handling</b></td>
    </tr>
    <tr>
        <td>1</td>
        <td>Admin</td>
        <td>Har fuld kontrol</td>
        <td>01-04-2008</td>
        <td>
            <input type="image" src="edit.gif" id="delete" onclick="ajaxEdit(1)" />
            <input type="image" src="delete.gif" id="delete" onclick="ajaxDelete(1)" />
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bruger</td>
        <td>Har ikke fuld kontrol</td>
        <td>01-04-2008</td>
        <td>
            <input type="image" src="edit.gif" id="delete" onclick="ajaxEdit(1)" />
            <input type="image" src="delete.gif" id="delete" onclick="ajaxDelete(1)" />
        </td>
    </tr>
</table>

Så håber jeg det giver et overblik over hvad jeg mener med simpelt ;o)

Hvorfor har du det på en side, du henter med AJAX? Det ser ikke ud til at være dynamisk jo.

Ah, ok. Nu tror jeg, jeg forstår det. :)

Til dette kunne du f.eks. returnere følgende JSON-data:

{"users":[[1,"Admin","Har fuld kontrol","01-04-2008"],[2,"Bruger","Har ikke fuld kontrol","01-04-2008"]]}

Jeg mener, det må være nogenlunde sådan - det kan godt være, jeg er lidt rusten i det.

Så vil du kunne modtage det som:

json.users[0][0] = 1;
json.users[0][1] = "Admin";
osv.

og:

json.users[1][0] = 2;
json.users[1][1] = "Bruger";
osv.

03/04-2008 11:39:49 >>

Skal jeg så forstå det sådan at jeg fra mit c# kode kan lave noget i stil med dette :

StringBuilder sb = new StringBuilder();
sb.Append("{"users":[");
foreach (BrugerGruppe grp in MinGenericList)
{
    sb.Append("[");
    sb.Append(grp.Id.ToString());
    sb.Append(grp.Admin.ToString());
    sb.Append(grp.Description.ToString());
    sb.Append(grp.Dato.ToString());
    sb.Append("]");
}
sb.Append("]}");

Det var lige hurtigt fra hoften, mener endda der er lavet en JSON.net version jeg kan bruge til dette på server siden.

03/04-2008 11:42:00 >>

Der hvor det så kniber lidt på javascript siden, er hvordan jeg får min JSON data smidt i en tabel.

du skal bruge din JSON data til at loope igenenm om via dette genererer du din tabel via DOM metoder, altså laver element noder og fylder dem med andre element og tekst noder

C# kender jeg ikke til.

JavaScript-delen, når du har hentet JSON-data, kunne være noget i stil med:

var cntr=document.getElementById("beholder"); //elementet, som tabellen bliver lagt i
if(json.users.length){
  var newElement=document.createElement("table");
  newElement.style.width="100%";
  newElement.setAttribute("cellspacing","2");
  newElement.setAttribute("cellpadding","2");
  newElement.appendChild(document.createElement("tbody"));
  newElement.getElementsByTagName("tbody").appendChild(document.createElement("tr"));
  var newElementTr=newElement.getElementsByTagName("tr");
  newElementTr.style.fontWeight="bold";
  newElementTr.appendChild(document.createElement("td"));
  newElementTr.lastChild.appendChild(document.createTextNode("Id"));
  newElementTr.appendChild(document.createElement("td"));
  newElementTr.lastChild.appendChild(document.createTextNode("Bruger gruppe"));
  newElementTr.appendChild(document.createElement("td"));
  newElementTr.lastChild.appendChild(document.createTextNode("Beskrivelse"));
  newElementTr.appendChild(document.createElement("td"));
  newElementTr.lastChild.appendChild(document.createTextNode("Oprettet"));
  newElementTr.appendChild(document.createElement("td"));
  newElementTr.lastChild.appendChild(document.createTextNode("Handling"));
  for(var i=0;i<json.users.length;i++){
    newElement.appendChild(document.createElement("tr"));
    newElementTr=newElement.getElementsByTagName("tbody").lastChild;

    newElementTr.appendChild(document.createElement("td"));
    newElementTr.lastChild.appendChild(document.createTextNode(json.users[i][0]));

    newElementTr.appendChild(document.createElement("td"));
    newElementTr.lastChild.appendChild(document.createTextNode(json.users[i][1]));

    newElementTr.appendChild(document.createElement("td"));
    newElementTr.lastChild.appendChild(document.createTextNode(json.users[i][2]));

    newElementTr.appendChild(document.createElement("td"));
    newElementTr.lastChild.appendChild(document.createTextNode(json.users[i][3]));

    newElementTr.appendChild(document.createElement("td"));

    newElementTr.lastChild.appendChild(document.createElement("input"));
    newElementInput=newElementTr.lastChild.lastChild;
    newElementInput.setAttribute("type","image");
    newElementInput.setAttribute("src","edit.gif");
    newElementInput.onclick=new Function("ajaxEdit("+json.users[i][0]+")");

    newElementTr.lastChild.appendChild(document.createElement("input"));
    newElementInput=newElementTr.lastChild.lastChild;
    newElementInput.setAttribute("type","image");
    newElementInput.setAttribute("src","delete.gif");
    newElementInput.onclick=new Function("ajaxDelete("+json.users[i][0]+")");
  }
  cntr.appendChild(newElement);
}

Det er dog meget utestet og kunne sagtens laves pænere/kortere, men det giver dig da en idé om det.

Hvis man havde lavet tabellens grundstruktur i HTML først (og evt. skjult den med style="display:none") kunne en hel del kode spares væk i ovenstående eksempel.

w13 >> Mange tak for det, så er der lidt at arbejde videre med. Jeg kan godt se at hvis min tabel bliver noget mere kompliceret så bliver javascriptet meget langt i forhold til brugen af .innerHTML

Flere af jer har advaret mod faldgrupper og ting jeg skal passe på, kan i komme med nogle af dem her ?

Ja, koden bliver længere, men du har til gengæld fuld kontrol over det hele, i og med du selv opbygger det fra bunden. innerHTML arbejder med objekter i string-format, hvilket er helt misforstået.

En af faldgruberne er jeg faktisk selv røget i i ovenstående eksempel, der hvor jeg sætter:

newElementInput.onclick=new Function("ajaxDelete("+json.users[i][0]+")");

I virkeligheden bør eventhandlers (såsom onclick, onmouseover, osv.) først sættes på elementet, når elementet er indsat i dokumentet. Og det er det jo endnu ikke i min kode.

Hvad angår C# så glem det. Det jeg ville frem til med det var at jeg i min serverside kode skal generere den streng du viste længere oppe {"users":[[.....]]} forstået på den måde at :
1. jeg skal lave et kald til databasen for at hente data
2. disse skal løbes igennem for at danne ovenstående streng
3. strengen med data sendes retur via mit ajax kald.

Og så spørger jeg sikkert dumt, men som jeg læser koden så indsætter du først i dokumentet når loopen er kørt med denne cntr.appendChild(newElement); skal jeg så lave en function til at indsætte det med ?

Det er korrekt: loopen køres igennem (og konstruerer tabelrækkerne og -cellerne) og derefter indsættes tabellen i elementet med id="beholder".
Dette kan selvfølgelig ændres efter behov.

Lige nu mener jeg godt, du bare kan gøre det, som jeg viser - jeg ved ikke så meget om det, Olebole er eksperten på det område, men ulempen ved f.eks. at sætte onclick på noget, der endnu ikke er indsat i dokumentet, er at _når_ det indsættes, ryddes der ikke ordentligt op i hukommelsen i Internet Explorer, og hvis AJAX kaldes mange gange, har man derved et hukommelsesproblem. Dvs. at det er en regulær bug!

Hvis det kun er tekst man indsætter, altså ingen eventhandlers, skal man så vente med at sætte den ind indtil man er færdig med at lave alle noder?

Jeg har før prøvet at bygge en liste af overskrifter, tekst og links ved at appende noder lide så snart jeg har lavet dem. Er der nogen problemer med denne metode?

Men fra json-objektet er det langt det nemmeste at have en skjult række, som klones og befolkes, f.eks.

<table width="100%" cellspacing="2" cellpadding="2" id="medlemstabel">
    <tr>
        <td><b>Id</b></td>
        <td><b>Bruger gruppe</b></td>
        <td><b>Beskrivelse</b></td>
        <td><b>Oprettet</b></td>
        <td><b>Handling</b></td>
    </tr>
    <tr style="display:none;">
        <td>1</td>
        <td>Admin</td>
        <td>Har fuld kontrol</td>
        <td>01-04-2008</td>
        <td>
            <input type="image" src="edit.gif" id="delete" onclick="ajaxEdit(1)" />
            <input type="image" src="delete.gif" id="delete" onclick="ajaxDelete(1)" />
        </td>
    </tr>
</table>

-- og funktionen til indsættelse, bliver så nogenlunde:

function insertData(jsonObject){
  var rowparent = document.getElementById("medlemstabel").firstChild;//finder tbody-elementet
  var klonNode = rowparent.getElementsByTagName("tr")[1],newRow,tds,inps;
  var ua = navigator.userAgent.toLowerCase();
  var displayType = ua.indexOf("msie")>-1 && ua.indexOf("opera") == -1 ? "block" : "table-row";
  var ary = jsonObject.users;
  for(i=0,im=ary.length;im>i;i++){
    newRow = klonNode.cloneNode(true);
    newRow.style.display = displayType;
    tds = newRow.getElementsByTagName("td");
    for(j=0;4>j;j++){
      tds[j].firstChild.nodeValue = ary[i][j];
    }
    rowparent.appendchild(newRow);
    inps = newRow.getElementsByTagName("input");
    //Her bør du lave en egentlig rutine, der indsætter funktionerne med DOM, her springer jeg over et lavt gærde !-)
    inps[0].onclick = function(){ajaxDelete(ary[i][0]);};
    inps[1].onclick = function(){ajaxDelete(ary[i][0]);};
  }
}

Uff, jeg glemte, at onclick ikke bør være på masteren:

...
        <td>
            <input type="image" src="edit.gif" name="edit">
            <input type="image" src="delete.gif" name="delete">
        </td>
...

-- og id'er er heller ikke er smarte !-)

-- og det skal selvfølgelig være ajaxEdit og ajaxDelete ...

Ok roenving, det gav jo en noget kortere javascript, så det prøver jeg lige at lege lidt med, så vender jeg tilbage med et resultat ;o)

Så fik jeg testet lidt og jeg får denne fejl :

    rowparent.getElementsByTagName is not a function

I denne linie :

    var klonNode = rowparent.getElementsByTagName("tr")[1],newRow,tds,inps;

Men det kan sagtens skyldes at jeg ikke helt har styr på mine øvrige javascript, så de kommer lige her.

Den første sørger for kald af ajax:

    function AjaxReq(sMethod, sUrl, oVars, fnCallBack)
    {       
        var oHttp = new XMLHttpRequest();
        oHttp.open(sMethod, sUrl, true);
        oHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
        oHttp.onreadystatechange = _fnCallBack;
        var aQuery = [];
        for (var x in oVars) aQuery.push( encodeURIComponent(x) + "=" + encodeURIComponent(oVars[x]) );
        oHttp.send( aQuery.join("&") );
        aQuery = null;
       
        function _fnCallBack() {
            if (oHttp.readyState<4) return;
            fnCallBack(oHttp);
            oHttp = null;
        }
        return this;
    }

Den næste bruger jeg til at kalde den side der levere json data:

    function listRoles()
    {
        new AjaxReq("POST", "roles/list.aspx", {"m":"listroles"}, myCallBack());
    }

Men i min sidste function er jeg lidt usikker på hvad der skal til:

    function myCallBack(oHttp)
    {
        document.getElementById("roleManagement").firstChild.nodeValue = insertData(oHttp.responseText);
    }

Min document.getElementById("roleManagement") er en <div> som er planen skal bruges som container for diverse ajax kald

Har du tabellen "medlemstabel" ?-)

Ovenstående fejl fremkommer i FF 2.0, køre jeg derimod koden i IE 6 får jeg en anden fejl der hedder :

    'length er null eller ikke et object'

I denne linie :

    for(i=0,im=ary.length;im>i;i++)

Så der må jo tilsyneladende være forskel på hvordan diverse browsere håndtere koden.

Er der ikke en af jer der kan hjælpe mig igennem med dette ?

Du glemmer også at lave det til et objekt:

... nodeValue = insertData(eval("("+oHttp.responseText+")");

-- hvad skal forøvrigt nodeValue på diven her ?-)

Ja den ligger på samme side som javascriptet ;o)

Ok Det prøver jeg lige.

Ideen er den at jeg har en div der skal være container for diverse ajax kald og det med nodeValue er noget fra et andet javascript, men jeg ved ikke hvad jeg skal skrive istedet for.

Hvad med:

function myCallBack(oHttp)
    {
        insertData(eval("("+oHttp.responseText+")");
    }

Så kom jeg lidt længere men får nu fejlen :

    'syntax error ()'

I denne linie :

    function myCallBack(oHttp)
    {
        insertData(eval("("+oHttp.responseText+")"));
    }

Hvordan ser din responseText så ud ?-)

Det ser ud som følger :

{"users":[
    [1,"Administrator","La la la la","11-11-2007 00:00:00"],
    [2,"Super bruger","En super bruger har adgang til næsten alt på siden.","15-01-2008 12:41:20"],
    [5,"Bruger","En bruger har adgang til egne data","19-01-2008 21:53:50"],
    [7,"Besøgende","Besøgende har kun adgang til gennemlæsning og tilføjelse.","20-01-2008 02:13:18"]
]}

Blev det for meget med alle mine spørgsmål, jeg ligger ikke skjul på at javascript ikke er min stærkeste side.

Men ser det rigtigt ud den måde jeg får lavet min json på ?

roenving >> Dit script i (03/04-2008 17:05:26) holder ikke. I IE returnerer 'document.getElementById("medlemstabel").firstChild' et TBODY-element, men i FF en textNode - nemlig linjebrudet efter <table ......>  ;o)

Brug i stedet:
    document.getElementById("medlemstabel").getElementsByTagName("tbody")[0]

karl-koder >> De faldgruber, jeg omtalte tidligere, handler om et interface, hvor du gentagne gange skal oprette og nedlægge mange tabelrækker - og hvor disse har tilknyttet event handlers.
I sådanne tilfælde skal de enkelte event handlers fjernes og null'es, inden elementerne fjernes og null'es.

Den slags løsninger vil jeg absolut ikke anbefale dig at kaste dig ud i, med mindre du er _meget_ stærk i objekt orienteret JavaScript og IE's elendige garbage collection. Så hellere bruge 'gammeldags' navigation med alm. sideskift  :)

olebole >>

Når jeg skifter den omtalte kode får jeg fejl :

    rowparent.appendchild is not a function

I denne linie :

    rowparent.appendchild(newRow);

Vil du mene at jeg skal droppe brugen af ajax og json til at vise data med ? Jeg er som sagt ikke særlig skarp i brugen af javascript ;o)

appendchild skal være appendChild, hvis der ikke står det.

Ja det fandt jeg så også lige ud af ;o)

"Vil du mene at jeg skal droppe brugen af ajax og json til at vise data med" >> Det kommer helt anpå, hvad du vil. Til små ting, hvor du ikke skal oprette og nedlægge rigtig mange elementer, kan du roligt bruge Ajax - men komplekse applikationer bliver _meget_ komplekse med Ajax!

Derudover skal du jo tænke på, at indhold, du er interesseret i, at søgemaskinerne skal indeksere, ikke må vises med Ajax - for så finder søgemaskinerne det aldrig

Det der var min intention var at bruge det til et admin modul hvor det er hammer ligegyldigt hvorvidt data indekseres eller ej.

Og så kun bruge det til submit af formulare på de offentlige tilgængelige sider af mine applicationer.

Kan du ud fra ovenstående eksempel vise mig hvordan jeg fjerner/null'er event handlers på en fornuftig måde ?

Nej, så skal koden bygges op på en væsentlig anderledes måde. En forklaring på det kræver flere laaaange tutorials - og er derfor ikke egnet til en Eksperten-tråd

Ok, det er der jo ikke at gøre ved, jeg må se om jeg kan finde noget info på nettet om det ;o)

Smid nogle svar ;o)

Det må vist være de andre, der jo har knoklet i denne tråd  ;o)

Tjoh, en deler er vel i orden !-)

Velbekomme '-)

Der var lige en sidste ting, hvordan undgår jeg at data dublikeres hver gang jeg klikker på link/knap ?

Kigger efter om det tidligere er sket, ved f.eks. at sætte en variabel, som du så tester på, og undgår indsættelse, hvis det allerede er sket ...

var isInserted = false;
function insertData(jsonObject){
  if(isInserted)return;
  else isInserted = true;
  var rowparent = document.getElementById("medlemstabel").getElementsByTagName("tbody")[0];//finder tbody-elementet
...

Ok det så ud til at virke i første omgang, men når jeg så klikker på et af de image button der sættes i koden får jeg denne fejl :

    ary[i] has no properties

Som fremkommer i en af disse linier afhænnigt af hvilken button der klikkes på :

    inps[0].onclick = function(){ajaxEdit(ary[i][0]);};
    inps[1].onclick = function(){ajaxDelete(ary[i][0]);};

Jeg ved ikke om det har noget med den ovenstående kode at gøre ved jeg ikke ;o)

sæt deklarationen af ary udenfor funktionen:

var isInserted = false,ary;
function insertData(jsonObject){
  if(isInserted)return;
  else isInserted = true;
  var rowparent = document.getElementById("medlemstabel").getElementsByTagName("tbody")[0];//finder tbody-elementet
var klonNode = rowparent.getElementsByTagName("tr")[1],newRow,tds,inps;
  var ua = navigator.userAgent.toLowerCase();
  var displayType = ua.indexOf("msie")>-1 && ua.indexOf("opera") == -1 ? "block" : "table-row";
  ary = jsonObject.users;

...

Ok jeg fandt endvidere ud af at det skal være onClick og ikke onclick for at det skal virke ;o)

Du skriver "Her bør du lave en egentlig rutine, der indsætter funktionerne med DOM, her springer jeg over et lavt gærde !-)"

Kan du kort ilustrere hvad du mener med dette ?

function insertEvent(elm, evnt, func){
  if(elm.addEventListener && !elm.attachEvent)//DOM-compliant
    elm.addEventListener(evnt, func, true);
  else if(elm.attachEvent)//M$-compliant
    elm.attachEvent("on"+evnt, func);
  else//andet
    elm["on"+evnt] = func;
}

Kaldet bliver så f.eks.

  insertEvent(inps[0], "click", function(){ajaxEdit(ary[i][0])};

-- absolut utestet, men ideen burde være ret tydelig !-)

Ups, der manglede vi8st lige en parantes:

  insertEvent(inps[0], "click", function(){ajaxEdit(ary[i][0])});

Se det virker også fint, men den trækker det første id fra array'et med som variabel på alle knapper ?

Ja, det gør den jo nok ...

-- måske:

  var idx = i;
  insertEvent(inps[0], "click", function(){ajaxEdit(ary[idx][0])};

-- kan hjælpe !-)

Det virker heller ikke, jeg prøver at rode lidt med det ;o)

Nå w13 vil vist ikke have point for denne så jeg lukker ;o)

Tak for point ;~}

Det var så lidt, du hjalp mig jo en god del af vejen ;o)