Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Javascript + HTML een afbeelding uitlezen uit XML

matel
4 antwoorden
  • Hallo, ik heb een HTML bestand waarin in gebruik maak van Javascript om een XML bestand uit te lezen. Dat werkt opzich goed, maar nu wil ik ook een plaatje laten zien en dat krijg ik nog niet voor elkaar.

    Dit is het HTML bestand

    [code:1:795de2d2c3]<html>

    <head>
    <script language="JavaScript">
    function klik(field)
    {
    var row=field.parentElement.rowIndex
    xmldso_list.recordset.absoluteposition=row
    td_datumin.innerHTML=xmldso_list.recordset("DATUMIN")
    td_datumuit.innerHTML=xmldso_list.recordset("DATUMUIT")
    td_land.innerHTML=xmldso_list.recordset("LAND")
    td_plaats.innerHTML=xmldso_list.recordset("PLAATS")
    td_accom.innerHTML=xmldso_list.recordset("ACCOM")
    td_verzorging.innerHTML=xmldso_list.recordset("VERZORGING")
    td_vervoer.innerHTML=xmldso_list.recordset("VERVOER")
    td_opstapplaats.innerHTML=xmldso_list.recordset("OPSTAPPLAATS")
    td_prijs.innerHTML=xmldso_list.recordset("PRIJS")
    td_aantalplaatsen.innerHTML=xmldso_list.recordset("AANTALPLAATSEN")
    td_meer.innerHTML=xmldso_list.recordset("MEER")
    td_plaatje.innerHTML=xmldso_list.recordset("GRAPHIC")
    }
    </script>

    <script for="window" event="onload">
    xmldso_list.XMLDocument.load("reiscat.xml")
    </script>

    <object width="0" height="0"
    classid="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" id="xmldso_list">
    </object>

    </head>

    <body>

    <table border="1" bgcolor="lightblue" width="300">
    <tr align="left"><th>Begindatum: </th><td id="td_datumin"></td></tr>
    <tr align="left"><th>Einddatum: </th><td id="td_datumuit"></td></tr>
    <tr align="left"><th>Land: </th><td id="td_land"></td></tr>
    <tr align="left"><th>Plaats: </th><td id="td_plaats"></td></tr>
    <tr align="left"><th>Accomodatie: </th><td id="td_accom"></td></tr>
    <tr align="left"><th>Verzorging: </th><td id="td_verzorging"></td></tr>
    <tr align="left"><th>Vervoer: </th><td id="td_vervoer"></td></tr>
    <tr align="left"><th>Opstapplaats: </th><td id="td_opstapplaats"></td></tr>
    <tr align="left"><th>Prijs: </th><td id="td_prijs"></td></tr>
    <tr align="left"><th>Aantal plaatsen: </th><td id="td_aantalplaatsen"></td></tr>
    <tr align="left"><th>Meer info: </th><td id="td_meer"></td></tr>
    <tr align="left"><th>Plaatje: </th><td id="td_plaatje"></td></tr>
    </table>

    <p><b>
    Maak een keuze uit de reizen hieronder:
    </b></p>

    <table datasrc="#xmldso_list" border="1">
    <thead>
    <tr align="left" bgcolor="#9acd32"><th>Begindatum</th><th>Einddatum</th><th>Land</th><th>Plaats</th><th>Prijs</th><th>Aantal plaatsen</th></tr>
    </thead>
    <tr align="left">
    <td onclick="klik(this)"><div datafld="DATUMIN"></td>
    <td onclick="klik(this)"><div datafld="DATUMUIT"></td>
    <td onclick="klik(this)"><div datafld="LAND"></td>
    <td onclick="klik(this)"><div datafld="PLAATS"></td>
    <td onclick="klik(this)" align="right"><div datafld="PRIJS"></td>
    <td onclick="klik(this)"><div datafld="AANTALPLAATSEN"></td>
    </tr>
    </table>

    </body>[/code:1:795de2d2c3]

    Het XML bestand heb ik even ingekort:

    [code:1:795de2d2c3]<?xml version="1.0" encoding="ISO8859-1" ?>
    <REIS>
    <ID>
    <REISID>0001</REISID>
    <DATUMIN>30-1-2006</DATUMIN>
    <DATUMUIT>12-2-2006</DATUMUIT>
    <LAND>Spanje</LAND>
    <PLAATS>Barcelona</PLAATS>
    <ACCOM>Hotel, Tripplefun</ACCOM>
    <VERZORGING>Logies, ontbijt</VERZORGING>
    <VERVOER>Busreis</VERVOER>
    <OPSTAPPLAATS>Enschede centraal</OPSTAPPLAATS>
    <PRIJS>225</PRIJS>
    <AANTALPLAATSEN>50</AANTALPLAATSEN>
    <MEER>Een mooie zonnige vakantie in Barcelona. Geniet van het mooie strand en de zon. 's Avonds is er live muziek in het hotel.</MEER>
    <GRAPHIC><img src="reisspanje.gif" /></GRAPHIC>
    </ID>
    </REIS>[/code:1:795de2d2c3]

    Ik heb al veel manieren getest, maar niets lijkt te werken. Wie weet hoe het wel moet?
  • Ik krijg het nu wel voor elkaar om in het overzicht een plaatje te krijgen:

    [code:1:efef93f498]<td onclick="klik(this)"><img datafld="GRAPHIC"></img></td>[/code:1:efef93f498]

    Met in de XML:

    [code:1:efef93f498]<GRAPHIC>leeg.gif</GRAPHIC>[/code:1:efef93f498]

    Maar nog steeds niet in het javascript gebeuren.
  • Het probleem is dat je in je xml file de complete img tag hebt opgenomen en de tekens daarin hebben een speciale betekenis in xml. Er zijn meerdere oplossingen mogelijk.

    1: data opnemen in een CDATA container.
    [code:1:a204991507]<GRAPHIC><![CDATA[<img src="leeg.gif" />]]></GRAPHIC>[/code:1:a204991507]

    2: speciale tekens vervangen door de juiste entiteiten.
    [code:1:a204991507]<GRAPHIC>&lt;img src=&quot;leeg.gif&quot; /&gt;</GRAPHIC>[/code:1:a204991507]

    3: alleen pad opnemen in xml
    [code:1:a204991507]<GRAPHIC>leeg.gif</GRAPHIC>[/code:1:a204991507]
    En in de javascript:
    [code:1:a204991507]
    td_plaatje.innerHTML='<img src="' + xmldso_list.recordset("GRAPHIC") + '" />'
    [/code:1:a204991507]

    On a sidenote: het is wel heel erg lang geleden dat ik met xml Data Island / DataBinding technieken heb gewerkt. Volgens mij was dat zelfs ergens in 1999 vanuit een dhtml-boek :D
    Alhoewel dit wel een leuke techniek was/is, is het nooit echt aangeslagen.
    Er zijn tegenwoordig andere methoden om te werken met XML. Zoek maar eens wat op de term AJAX. Dat wordt behoorlijk gehyped op het moment, maar als je door de marketingtaal heen leest, dan zie je dat het eigenlijk gewoon een manier is om met xml en (asynchrone) xmlrequests te werken. Iets wat jij nu wil bereiken met een Data Island.
  • Heel erg bedankt Annie :D Het werkt perfect. Ik was inderdaad ook aan het kijken naar AJAX, maar daar weet ik nu nog niet voldoende van om in de praktijk te gaan gebruiken.

    Wat ik nu als laatste nog voor elkaar wil zien te krijgen is het mogelijk maken van boekingen via de website. Dat de klant op de knop Boek klikt waarna hij persoonlijke gegevens in moet vullen + met hoeveel personen. Dan moet in de database het aantal beschikbare plaatsen met het opgegeven aantal personen verlaagd worden. De ingevulde gegevens komen in een XML bestand terecht die via een admin sectie uitgelezen kan worden.

    Of ik zover kan komen weet ik niet, maar ik wil het proberen. Ik denk dat ik daarvoor het beste gebruik kan maken van XForms.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.