[AJAX] Opmaak bepalen a.d.h.v. tags in responsetext - Softwareontwikkeling

vrijdag 22 december 2006 16:10

Acties:

Topicstarter

Ik wil een XML pagina met AJAX in een div laden.

Dit gaat prima, maar als bijvoorbeeld dit binnenkomt:

XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<page>
    <title>Login</title>
    <list>
        <head>
            <field>Naam:</field>
            <field>Nickname</field>
        </head>
        <row>
            <field>TEST</field>
            <field>LOLZOR</field>
        </row>
    </list>
</page>

Wil ik graag dat dit door een stuk javascript omgezet wordt naar een list met gegevens.
Dus dattie scanned voor <list> tags, en dat stuk omzet in een tabel:

HTML:

<table>
  <tr class="head">
    <td>Naam:</td>
    <td>Nickname:</td>
  </tr><tr>
    <td>TEST</td>
    <td>LOLZOR</td>
  </tr>
</table>

Geen idee of dit mogelijk is, maar ik kom er niet uit...
Ben al een poosje hierop aan het kauwen, maar heb niet veel meer dan en standaard response handler die de inhoud van de response in een div pleurt. (En die is niet echt interessant om hier te posten...)

Wie weet hoe ik dit voor elkaar krijg?

[ Voor 9% gewijzigd door _eXistenZ_ op 22-12-2006 16:13 ]

There is no replacement for displacement!

vrijdag 22 december 2006 16:12

Acties:

StevenK

* StevenK mompelt iets over 'getElementsByTagName'. en over JavaScript XML parser.

[ Voor 20% gewijzigd door StevenK op 22-12-2006 16:13 ]

Was advocaat maar vindt het juridische nog steeds leuk

vrijdag 22 december 2006 16:13

Acties:

_eXistenZ_

Topicstarter

Die had ik al gezien maar ik kan niet er klakkeloos vanuit gaan dat elke keer die <list> aanwezig is.
Soms is het een form, soms een dropdown menu, soms een tabelletje, soms wat anders...

There is no replacement for displacement!

vrijdag 22 december 2006 16:18

Acties:

StevenK

_eXistenZ_ schreef op vrijdag 22 december 2006 @ 16:13:
Die had ik al gezien maar ik kan niet er klakkeloos vanuit gaan dat elke keer die <list> aanwezig is.
Soms is het een form, soms een dropdown menu, soms een tabelletje, soms wat anders...

In dat geval ga je toch met de reguliere child-functies aan de gang ? childNodes, firstChild etc.

Was advocaat maar vindt het juridische nog steeds leuk

vrijdag 22 december 2006 16:24

Acties:

_eXistenZ_

Topicstarter

Hmm, interresant, via jouw nodes kwam ik op de nodeslist

als ik die in een forlus door loop, kan ik dingen adden aan de var htmloutput

thanks ik kan nu even verder.

There is no replacement for displacement!

vrijdag 22 december 2006 16:26

Acties:

StevenK

_eXistenZ_ schreef op vrijdag 22 december 2006 @ 16:24:
Hmm, interresant, via jouw nodes kwam ik op de nodeslist als ik die in een forlus door loop, kan ik dingen adden aan de var htmloutput thanks ik kan nu even verder.

htmloutput ? Is 't niet mooier om je target ook op dezelfde manier op te bouwen, met dingen als appendChild ?

Was advocaat maar vindt het juridische nog steeds leuk

vrijdag 22 december 2006 16:32

Acties:

_eXistenZ_

Topicstarter

Hij moet gewoon een stuk HTML uitpoepen, per child check ik op de type, als ik een <list> tegenkom, plak ik aan htmloutput gewoon <table> vast, en stap weer in een sub array, waarna de waarden worden doorgelopen. Deze plak ik aan htmloutput als <td>waarde</td>, enzovoort.

Hoe zie jij het anders voor je? Ik sta altijd open voor mooiere manieren, wilde dit juist gebruiken omdat XML zo mooi clean is...

There is no replacement for displacement!

vrijdag 22 december 2006 16:39

Acties:

.Johnny

Ik vraag me uberhaupt af hoe zinvol het is zo strikt met AJAX te werken. Als je gewoon echt HTML output en dat via de xmlhttp.responseText opvangt en met innerHTML weer je document in stuurt gaat het in elk geval een stuk sneller op de client. Vergeet niet dat javascript ook erg traag kan zijn. Zeker als het om een wat complexere structuur gaat.

Wat dacht je anders van de google ajax kit, kun je lekker met een XSL sheetje de boel parsen.

[ Voor 12% gewijzigd door .Johnny op 22-12-2006 16:40 ]

vrijdag 22 december 2006 16:51

Acties:

_eXistenZ_

Topicstarter

Bij mij is de beperkende factor waarschijnlijk de server...

Zal eens wat benchen

Bedankt voor je tip.

There is no replacement for displacement!

zaterdag 23 december 2006 17:27

Acties:

Verwijderd

Kijk eens naar http://www.json.org/. JSON = JavaScript Object Notation. Als response kan je een JSON string terug geven, en die decoderen met javascript. Zo heb je meteen een object van je response! Erg handig, en sneller dan xml.

JSON is sowieso echt heel handig om te communiceren tussen PHP en JavaScript, maar bijvoorbeeld ook tussen JavaScript, PHP en Flash. Onderin op bovenstaande website staan de JSON classes voor een hoop programmeer talen.

Vaak word een als nadeel van JSON het gebruik van eval() genoemd. Zelf heb ik een mooie JSON class waarin heel eval() niet voorkomt! Dus het is nog snel ook

[ Voor 45% gewijzigd door Verwijderd op 23-12-2006 17:41 ]

zaterdag 23 december 2006 17:47

Acties:

Verwijderd

Of je gebruikt client-side XSLT. Dan kun je precies matchen op de tags die je wilt. Beetje overkill in deze situatie, het hangt er ook sterk vanaf wat de mogelijke responses zijn van de server...misschien kun je daar iets meer info over geven?

Trouwens,

HTML:

<table>
  <tr class="head">
    <td>Naam:</td>
    <td>Nickname:</td>
  </tr><tr>
    <td>TEST</td>
    <td>LOLZOR</td>
  </tr>
</table>

kan beter als:

HTML:

<table>
  <thead>
    <tr>
      <th>Naam:</th>
      <th>Nickname:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TEST</td>
      <td>LOLZOR</td>
    </tr>
  </tbody>
</table>

of zelfs:

HTML:

<dl>
  <dt>Naam</dt>
  <dd>TEST</dd>
  <dt>Nickname</dt>
  <dd>LOLZOR</dd>
</dl>

Maar dat is mijn persoonlijke mening.

Verwijderd schreef op zaterdag 23 december 2006 @ 17:27:
Vaak word een als nadeel van JSON het gebruik van eval() genoemd. Zelf heb ik een mooie JSON class waarin heel eval() niet voorkomt! Dus het is nog snel ook

JSON is nou typisch een situatie waarbij eval() precies is wat het moet zijn... Een leuke oefening om daar zelf een parser voor te schrijven, maar no way dat dat sneller is dan eval().

[ Voor 22% gewijzigd door Verwijderd op 23-12-2006 17:48 ]

zaterdag 23 december 2006 19:45

Acties:

_eXistenZ_

Topicstarter

Er komen verschillende dingen binnen, waarvan van te voren het formaat al bekend is, maar de waarden nog niet. (Maw ik weet al dat er een tabel komt te staan met users bijvoorbeeld.)
Ik zou per pagina kunnen hardcoden in een script dat op die pagina de response in een tabel wordt gekiept, of die response als header gebruikt wordt, maar ik wil het dus flexibel houden.

Dat HTML klopt, wat ik typte kan mooier, maar het ging om het idee

Ben nu met JSON aan het stoeien (thx), en het probleem is atm meer dat als dit binnenkomt:

JavaScript:

{"table": [
  {"naam": "Sjaak", "status": "newbe"},
  {"naam": "Arie", "status": "newbe"},
  {"naam": "Karel", "status": "hax0r"},
   ]
}

ik niet snap hoe dit nu moet omgezet worden in een HTML tabelletje...

Kan iemand mij hier mee helpen?
t'is niet dat ik niet probeer of zoek op internet maar dit wil me gewoon even niet lukken...

/edit

Ik snap dat ik natuurlijk var response = string.parseJSON(hook) moet gebruiken, maar ik loop al tegen de hook aan...

/edit

Als ik dit doe:

JavaScript:

1 2	var parsed = http.responseText.parseJSON(); document.getElementById('main').innerHTML = geparst;

krijg ik enkel te zien:

code:

1	[object Object]

Ik snap dat ik het ding zo verkeerd gebruik, want ik moet de parsed volgens mij doorlopen in een lus en bij elk ding checken wat het is, maar wat ik zie, klopt dit?

[ Voor 21% gewijzigd door _eXistenZ_ op 23-12-2006 20:10 ]

There is no replacement for displacement!

zaterdag 23 december 2006 19:51

Acties:

Verwijderd

Verwijderd schreef op zaterdag 23 december 2006 @ 17:47:
[...]

JSON is nou typisch een situatie waarbij eval() precies is wat het moet zijn... Een leuke oefening om daar zelf een parser voor te schrijven, maar no way dat dat sneller is dan eval().

Ik ga het testen! Lijkt me sowieso interessant om bepaalde methoden goed op performance te testen. Al die kleine beetje zijn het verschil tussen een trage en een snelle app

zaterdag 23 december 2006 20:09

Acties:

Verwijderd

_eXistenZ_ schreef op zaterdag 23 december 2006 @ 19:45:
JavaScript:
1
2
3
4
5
6
{"table": [
  {"naam": "Sjaak", "status": "newbe"},
  {"naam": "Arie", "status": "newbe"},
  {"naam": "Karel", "status": "hax0r"},
   ]
}
Ik snap dat ik natuurlijk var response = string.parseJSON(hook) moet gebruiken, maar ik loop al tegen de hook aan...

Die hook is helemaal niet nodig, dat is een soort tussentijdse callback-functie die voor elke waarde wordt aangeroepen. Sterker nog, die string.parseJSON() is helemaal niet nodig hier, aangezien de response als veilig beschouwd kan worden (komt van je eigen server).

The eval function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues. The use of eval is indicated when the source is trusted. This is commonly the case in web applications when a web server is providing both the base page and the JSON data. There are cases where the source is not trusted. In particular, clients should never be trusted.

http://www.json.org/js.html

Wat je code betreft, dat is een kwestie van eroverheen itereren en een tabel opbouwen.

JavaScript:

var s = '<table>';
s += '<thead><tr><th>Naam</th><th>Status</th></thead>';
s += '<tbody>';

// json = je JSON string
var result = eval('(' + json + ')');
for(var i=0; i<result.table.length; i++) {
  var oRow = result.table[i];
  s += '<tr><td>' + oRow.naam + '</td>';
  s += '<td>' + oRow.status + '</td></tr>';
}
s += '</tbody></table>';

// Dump de opgebouwde HTML ergens in je pagina
document.getElementById('target').innerHTML = s;

Voor de anti-innerHTML-puristen onder ons: ja, dat kan inderdaad ook met standaardmethodes als documeng.createElement() en element.appendChild()...dit leek me duidelijker.

[ Voor 5% gewijzigd door Verwijderd op 23-12-2006 20:15 ]

zaterdag 23 december 2006 20:14

Acties:

_eXistenZ_

Topicstarter

Dan krijg ik dus altijd een tabel, het is juist de bedoeling dat het ding herkent dat ik een titel wil laten zien of een dropdown menu

Daar zit 'm denk ik ook de kneep, ik zie niet hoe ik dat kan

(Overigens alvast ontzettend bedankt voor al jullie hulp alvast

)

/edit

Tevens is niet gezegt dat de thead altijd naam en status is, of dat het een tabel van 2 rijen is.
Daarom moet dit ook allemaal dynamisch gebeuren in mijn scriptje

/edit 2

Wat ik eigenlijk probeer is dat dit:

JavaScript:

{"table": [
  {"naam": "Sjaak", "status": "newbe"},
  {"naam": "Arie", "status": "newbe"},
  {"naam": "Karel", "status": "hax0r"},
   ]
}

en tabel wordt, maar zodra ik er dit had staan:

JavaScript:

{"dropdown": [
  {"option": "Sjaak", "value": "newbe"},
  {"option": "Arie", "value": "newbe"},
  {"option": "Karel", "value": "hax0r"},
   ]
}

Dat het een dropdown menu was geworden...

[ Voor 68% gewijzigd door _eXistenZ_ op 23-12-2006 20:20 ]

There is no replacement for displacement!

zaterdag 23 december 2006 20:26

Acties:

Verwijderd

_eXistenZ_ schreef op zaterdag 23 december 2006 @ 20:14:
Dan krijg ik dus altijd een tabel, het is juist de bedoeling dat het ding herkent dat ik een titel wil laten zien of een dropdown menu

Dat kan op allerlei manieren waarvan dit me de meest voor de hand liggende lijkt:

JavaScript:

var result = eval('(' + json + ')');
if(result.table) {
  // je tabelcode
}
else if(result.menu) {
  // je menucode
}
etc...

Tevens is niet gezegt dat de thead altijd naam en status is, of dat het een tabel van 2 rijen is.
Daarom moet dit ook allemaal dynamisch gebeuren in mijn scriptje

JavaScript:

var result = eval('(' + json + ')');

var s = '<table>';
s += '<thead><tr>';
// Eerst de thead opbouwen, pak het eerste resultaat en
// itereer door de properties.
for(var i in result.table[0]) {
  s += '<th>' + i + '</th>';
}
s += '</tr></thead><tbody>';

// Nu de rest van de table opbouwen...

zaterdag 23 december 2006 20:33

Acties:

_eXistenZ_

Topicstarter

Kerel

Ik denk dat het mij gaat lukken

/edit

Ik ben inmiddels een stuk verder en hij laat ook de headers zien van een tabel die ik in result.data.table aanmaak.

JavaScript:

function handleResponse() {
  if(http.readyState == 4 && http.status == 200){
    if(http.responseText) {
      parsed = '';
      result = eval('(' + http.responseText + ')');
      for(var i=0; i<result.data.length; i++) {
        if(result.data[i].table) {
          parsed += '<table border="1"><thead><tr>';
          for(var j in result.data[i].table[0]) {
            parsed += '<th>' + j + '</th>';
          }
          parsed += '</tr></thead><tbody>';
          for(var j=0; j<result.data[i].table.length; j++) {
            parsed += '<tr>';
            for(var h=0; h<result.data[i].table[j].length; h++) {
              parsed += '<td>' + result.data[i].table[j][h] + '</td>';
            }
            parsed += '</tr>';
          }
          parsed += '</table>';
        }
        document.getElementById('main').innerHTML = parsed;
      }
    }
  }
}

Ik krijg echter geen waarden, maar puur de velden te zien...

Welke trick moet ik nog doen om dit te verhelpen?

Overigens springtie niet netjes in, maar mijn PHPedit wel.

[ Voor 95% gewijzigd door _eXistenZ_ op 23-12-2006 22:24 ]

There is no replacement for displacement!