[ajax] element uit responseXML importeren* - Softwareontwikkeling

zaterdag 2 september 2006 21:32

Acties:

uhuh

Topicstarter

ik ben wat met ajax aan het expirimenteren maar stuit nu op het volgende probleem. ik haal dmv een httprequest wat xhtml op uit een bestand op de server. omdat ik deze code in wil kunnen voegen op mijn website haal ik het zaakje op als xml, dus met de responseXML property. dat werkt allemaal goed, maar nu begint het probleem. ik wil nu de code toevoegen op mijn website. wat ik doe is ik haal het root element (een div) uit het xmlobject dat ik terugkrijg van mijn httprequest:

JavaScript:

1	code = HTTPRequest.responseXML.getElementsByTagName('div')[0];

en vervolgens wil ik dat in mijn body van mijn website zetten:

JavaScript:

1 2	oBody = document.getElementsByTagName('body')[0]; oBody.appendChild( code );

in firefox lijkt dit te werken, ware het niet dat de div inderdaad op het scherm gezet wordt, maar dat ook maar iedere vorm van opmaak weg is en dat de div op geen enkele manier meer van opmaak kan worden voorzien. dit heb ik nog nooit meegemaakt en vind ik erg bizar.
in IE krijg ik zelfs een fout "invalid pointer", en wordt er niks op het scherm gezet.

wat doe ik hier fout? ik kan het nergens vinden. tevens wil ik het graag netjes doen (via DOM), en niet gewoon het zaakje als text dmv een innerhtml statement op mijn pagina kwakken. ik hoop dat mijn probleem zo een beetje duidelijk is.

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zaterdag 2 september 2006 22:08

Acties:

SchizoDuckie

Kwaak

probeer gewoon heel simpel responseText ipv responseXML ?

dan hoef je ook niet helemaal de <html><head/><body> etc mee te geven, maar kan je gewoon de inhoud van je divje wat je wil updaten in html erheen poepen

Netjes via de DOM gaatje alleen maar meer problemen opleveren (xml, cdata, etc) , bloated code en qua performance wordt het er ook niet beter op

[ Voor 25% gewijzigd door SchizoDuckie op 02-09-2006 22:09 ]

Stop uploading passwords to Github!

zaterdag 2 september 2006 22:16

Acties:

Little Penguin

Zoals reeds aangegeven is het slimmer om de inhouds van de div-jes door te geven en deze over de oude inhoud heen te schrijven.

Over eventuele problemen met XMLHTTPRequest en Internet Explorer: Onder IE is XMLHTTP een ActiveX object en de inhoud van deze objects zijn niet per definitie gemakkelijk in de HTML dom te plaatsen.

Wat ik zelf het meest doe is een callback d.m.v. een JavaScript eval van responseText of het aanmaken van nieuwe HTML objecten(elementen) nav van de inhoud van de overgestuurde XML.

zaterdag 2 september 2006 22:41

Acties:

tombo_inc

uhuh

Topicstarter

wat ik dus in eerste instantie niet wilde doen is de xhtml als text binnenhengelen en hem met innerHTML in mijn webpagina plaatsen. ik weet dat dit werkt, maar vind dit een minder nette methode. mede omdat je dan niet middels DOM door je binnengehaalde code kan navigeren en daarop bewerkingen uit kan voeren. ook is het lastiger als je meerdere zaken achter elkaar in wil voegen, je moet dan rekening houden dat je de oude content niet overschrijft. desalniettemin heb ik het nu tijdelijk op deze manier opgelost.

omdat het xmlobject dat ik terug krijg van mijn httprequest niet echt compatible lijkt met de rest van de browser (ik weet niet waar het aan ligt), ga ik nu proberen om de responsetext om te zetten naar een xmlobject, zodat ik het met DOM kan benaderen en op de nette manier kan toevoegen aan mijn document.
ik zou graag willen weten wat jullie van deze oplossing vinden. en ik zou ook graag willen weten waarom mijn xmlobject dat direct uit mijn httprequest komt niet goed werkt (de manier die ik in mijn topic start beschreven heb).

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zaterdag 2 september 2006 22:52

Acties:

crisp

Devver

Pixelated

Voor standards-compliant browsers:

JavaScript:

1
2
3

var code = HTTPRequest.responseXML.getElementsByTagName('div')[0];
var oBody = document.getElementsByTagName('body')[0];
oBody.appendChild( document.importNode(code, true) );

Voor IE zal je toch iets met de serialized versie moeten doen:

JavaScript:

var code = HTTPRequest.responseXML.getElementsByTagName('div')[0];
var code_serialized = code.xml;
var oBody = document.getElementsByTagName('body')[0];
oBody.insertAdjacentHTML('beforeEnd', code_serialized);

+ gratis titelfix

Overigens: je kan dus niet zomaar een element van het ene document in een ander document zetten, ook niet met cloneNode omdat het element dan nog steeds toebehoort aan het oorspronkelijke document. Daarom is er importNode. Het feit dat het wel lijkt te werken in Firefox is het gevolg van een bug.

[ Voor 23% gewijzigd door crisp op 02-09-2006 23:11 ]

Intentionally left blank

zaterdag 2 september 2006 23:12

Acties:

tombo_inc

uhuh

Topicstarter

harstikke bedankt!
ik heb de versie voor standards-compliant browsers getest en die werkt. alleen snap ik nog niet waarom je niet meteen die div kan appenden, maar dat je die importNode functie nodig hebt.

*edit:
net te laat, je hebt het antwoord al gegeven.
idd het lijkt te werken in FF, maar in feite kun je er niks mee. de code wordt wel in het document gezet, maar is verder immuun voor elke vorm van css of opmaak.

de versie voor IE zal ik zo even testen, maar ik ga ervan uit dat die ook wel werkt. alleen vraag ik me dan nog af waarom je bij IE niet gewoon gebruik kan maken van het xmlobject net als bij standards-compliant browsers. want als je toch gebruik maakt van de geserialiseerde versie, kun je dan niet net zo goed de responseText ophalen ipv de responseXML?

[ Voor 16% gewijzigd door tombo_inc op 02-09-2006 23:14 ]

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zaterdag 2 september 2006 23:16

Acties:

crisp

Devver

Pixelated

Tombo_inc schreef op zaterdag 02 september 2006 @ 23:12:
harstikke bedankt!
ik heb de versie voor standards-compliant browsers getest en die werkt. alleen snap ik nog niet waarom je niet meteen die div kan appenden, maar dat je die importNode functie nodig hebt.

Omdat dat element toebehoort aan het bron-document en niet aan het doel-document.

de versie voor IE zal ik zo even testen, maar ik ga ervan uit dat die ook wel werkt. alleen vraag ik me dan nog af waarom je bij IE niet gewoon gebruik kan maken van het xmlobject net als bij standards-compliant browsers.

omdat het IE is en die nogal achterlopen mbt de implementatie van bepaalde webstandaarden

want als je toch gebruik maakt van de geserialiseerde versie, kun je dan niet net zo goed de responseText ophalen ipv de responseXML?

ja en nee; het voordeel van de .xml property is natuurlijk dat je enkel een serialized string van je div-element kan opvragen ipv met stringfuncties in je responseText te moeten gaan spitten.

Tombo_inc schreef op zaterdag 02 september 2006 @ 23:12:
*edit:
net te laat, je hebt het antwoord al gegeven.
idd het lijkt te werken in FF, maar in feite kun je er niks mee. de code wordt wel in het document gezet, maar is verder immuun voor elke vorm van css of opmaak.

werkt hier anders prima

[ Voor 14% gewijzigd door crisp op 02-09-2006 23:17 ]

Intentionally left blank

zaterdag 2 september 2006 23:27

Acties:

tombo_inc

uhuh

Topicstarter

[...]

werkt hier anders prima

nee, dat bedoel ik niet. jouw oplossing werkt ook prima. ik bedoel dat die bug zo werkt. in FF kun je dus direct een element appenden, maar daarna kun je er niks meer mee.

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zaterdag 2 september 2006 23:36

Acties:

crisp

Devver

Pixelated

Tombo_inc schreef op zaterdag 02 september 2006 @ 23:27:
[...]

nee, dat bedoel ik niet. jouw oplossing werkt ook prima. ik bedoel dat die bug zo werkt. in FF kun je dus direct een element appenden, maar daarna kun je er niks meer mee.

Dat is deze bug; Firefox zou een WRONG_DOCUMENT_ERR exception moeten genereren. Nu krijg je inderdaad rare behaviors en het verkeerde idee dat het wel zo zou moeten werken.

[ Voor 10% gewijzigd door crisp op 02-09-2006 23:37 ]

Intentionally left blank

zondag 3 september 2006 00:04

Acties:

tombo_inc

uhuh

Topicstarter

dit is erg merkwaardig. ik ervaar nu (met jouw oplossing) namelijk hetzelfde alsof ik direct de node toevoeg aan mijn document. mijn parentdiv met subdivs worden nu toegevoegd aan mijn body, maar alle subdivs worden automatisch gefloat, en ik kan wederom geen enkele vorm van styles toepassen.
ik snap er geen snars meer van

dit is de code:

JavaScript:

//stuff aan pagina koppelen
function appendit( sMarkup ) {
  
  oBody = document.getElementsByTagName('body')[0];
  
  //oBody.appendChild( sMarkup );
  oBody.appendChild( document.importNode(sMarkup, true) );
  
}

//httprequest zooi; ajax is mijn eigen httprequestobject
appendit( ajax.getRequestData( 'xml' ).getElementsByTagName('div')[0] );

ik hoop dat dit probleem opgelost kan worden, want ik vind het erg interessant.

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zondag 3 september 2006 00:16

Acties:

crisp

Devver

Pixelated

Tombo_inc schreef op zondag 03 september 2006 @ 00:04:
dit is erg merkwaardig. ik ervaar nu (met jouw oplossing) namelijk hetzelfde alsof ik direct de node toevoeg aan mijn document. mijn parentdiv met subdivs worden nu toegevoegd aan mijn body, maar alle subdivs worden automatisch gefloat, en ik kan wederom geen enkele vorm van styles toepassen.
ik snap er geen snars meer van
dit is de code:
[...]
ik hoop dat dit probleem opgelost kan worden, want ik vind het erg interessant.

Iets meer code zou handig zijn, eveneens welke versie Firefox je gebruikt (hier Ff 1.5.0.6)
Ik had het volgende getest; een XHTML document (opgeslagen als XML anders snapte IE het niet ondanks correcte mimetype) met de volgende division:

HTML:

1
2
3

<div id="foo">
    <b>tralala</b>
</div>

en verder deze code:

HTML:

<style type="text/css">

#foo { background-color: yellow; }

</style>
<body>
<script type="text/javascript">

if (!window.XMLHttpRequest)
{
    window.XMLHttpRequest = function()
    {
        var types = [
            'Microsoft.XMLHTTP',
            'MSXML2.XMLHTTP.5.0',
            'MSXML2.XMLHTTP.4.0',
            'MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP'
        ];

        for (var i = 0; i < types.length; i++)
        {
            try
            {
                return new ActiveXObject(types[i]);
            }
            catch(e) {}
        }

        return undefined;
    }
}

var xml = new XMLHttpRequest();
xml.open('GET', 'http://localhost/bla.xml', false);
xml.send(null);
var code = xml.responseXML.getElementsByTagName('div')[0];
var oBody = document.getElementsByTagName('body')[0];
if (document.importNode)
{
    oBody.appendChild( document.importNode(code, true) );
}
else
{
    var code_serialized = code.xml;
    oBody.insertAdjacentHTML('beforeEnd', code_serialized);
}

</script>
</body>

De style wordt netjes toegepast en de tekst is ook bold.

Intentionally left blank

zondag 3 september 2006 00:44

Acties:

tombo_inc

uhuh

Topicstarter

ik heb mijn xhtml bestand nu gerenamed naar xml en nu doet hij het in IE goed. ik kan nu gewoon css toepassen op het geheel. maar FF weigert nog steeds dienst. hij dumpt alles gewoon linksboven in de hoek en verder kun je er niks mee.
ik heb vervolgens jouw voorbeeldcode precies gekopiert en getest, en die geeft ook nop. hij zet de tekst tralala linksboven in de hoek en that's it. IE doet het daarentegen goed. snap jij het nog, ik niet

$_/-\o_$

edit:
mijn FF versie is ook 1.5.0.6

[ Voor 4% gewijzigd door tombo_inc op 03-09-2006 00:45 ]

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zondag 3 september 2006 11:56

Acties:

crisp

Devver

Pixelated

Inderdaad vreemd, voor de zekerheid nog even mijn volledige XHTML bestand:

XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="foo">
            <b>tralala</b>
        </div>
    </body>
</html>

Intentionally left blank

zondag 3 september 2006 14:12

Acties:

tombo_inc

uhuh

Topicstarter

nope werkt net zo min. werkt het bij jou wel dan in FF? beetje raar, want we hebben dezelfde versie.

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zondag 3 september 2006 14:15

Acties:

crisp

Devver

Pixelated

Tombo_inc schreef op zondag 03 september 2006 @ 14:12:
nope werkt net zo min. werkt het bij jou wel dan in FF? beetje raar, want we hebben dezelfde versie.

Jep, ik krijg de text 'tralala' in bold en met een gele achtergrond according de CSS.

Intentionally left blank

zondag 3 september 2006 14:35

Acties:

tombo_inc

uhuh

Topicstarter

echt raar.
ik heb hem even online gezet, met een screen van mijn result. misschien kun je daar iets mee.
http://www.v-studios.nl/testcase/

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zondag 3 september 2006 14:37

Acties:

crisp

Devver

Pixelated

Je ok.xml is geen XHTML pagina maar in feite puur XML en heeft derhalve geen semantics.

Intentionally left blank

zondag 3 september 2006 14:50

Acties:

tombo_inc

uhuh

Topicstarter

ja, dat zal best

. maar dit is precies jouw voorbeeld. ok.xml bevat gewoon xhtml die ik ophaal en in mijn pagina zet, toch? in IE werkt dit gewoon, maar in FF niet bij mij. ben ik nou gek of is er iets anders aan de hand

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zondag 3 september 2006 16:02

Acties:

crisp

Devver

Pixelated

Nee, ik gebruikte dit als XHTML bestand: crisp in "[ajax] element uit responseXML importere..."
Dit bestand bevat een DTD en definieerd een namespace wat het XHTML maakt, zonder dat is het gewoon puur XML en heeft een attribuut als 'id' geen enkele betekenis.

[ Voor 39% gewijzigd door crisp op 03-09-2006 16:08 ]

Intentionally left blank

zondag 3 september 2006 20:01

Acties:

tombo_inc

uhuh

Topicstarter

aha

nu snap ik het.
je mag dus niet zomaar wat xhtml in een document proppen en dat document inlezen als xml. want dan krijg je gewoon xml en dat kun je niet via de "normale" manier opmaken. je moet dus in feite xhtml documenten maken met dtd en namespace verwijzing, en dan daaruit de content halen die je nodig hebt.
heb ik het nu goed? (het werkt in ieder geval wel

)

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zondag 3 september 2006 22:20

Acties:

crisp

Devver

Pixelated

Jep, dat is het idee. Als je vanuit XML wilt 'importeren' zal je ook moeten serializen en met innerHTML oid moeten werken.

Intentionally left blank

zondag 3 september 2006 23:55

Acties:

tombo_inc

uhuh

Topicstarter

crisp schreef op zondag 03 september 2006 @ 22:20:
Jep, dat is het idee.

mooi dan ben ik weer wat wijzer en is dat probleem ook weer opgelost

Als je vanuit XML wilt 'importeren' zal je ook moeten serializen en met innerHTML oid moeten werken.

ff voor de duidelijkheid (ja ik ben soms een mierenneuker). je bedoelt dat als je uit xml wilt importeren zonder dtd (die er xhtml van maakt) en normaal op wil kunnen maken, dat je dan moet serializeren en met innerHTML moet werken. en als je wel een dtd gebruikt dat je dan de oplossing toe kan passen waar ik zo lang naar gezocht heb (gewoon netjes via DOM).

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition