Javascript XML

[ThunderNet]

Ik ben bezig met een webapplicatie. Die redelijk veel javascript bevat. Ook kan de gebruiker heel veel dingen aanpassen. Echter wil ik dat deze aanpassingen pas verstuurd worden naar de server als de gebruiker op enkele knoppen drukt (zoals op een save knop).

Daarom wou ik binnen een div, wat xml plaatsen. En vanuit javascript deze xml aanpassen, en zodra de gebruiker dus op een save knop drukt, deze xml opsturen naar de server waar dit in de database opgeslagen wordt.

Serverside gebruik ik Asp.Net Ajax. Clientside gebruik ik het dojo framework.

JavaScript:

function CreateGuidCallback(result)
{
    myGuid = result;
    var tmpProjectXML = "<xml><project id='xml_project'><title id='xml_title' text=''></title><guid id='xml_guid' text='" + myGuid + "'></guid><theme id='xml_theme' text='none'></theme><fotos id='xml_fotos'>    </fotos> </project></xml>";    
    dojo.byId('projectholder').InnerHtml = tmpProjectXML;
}

In deze javascript plaats ik de xml in de daarvoor bedoelde div (die uiteindelijk gewoon hidden wordt.

Het eerste probleem waar ik tegen aanloop is dat InnerHtml het als attribuut geplaatst wordt in IE. Echter gebeurd er niks in firefox met de dom. Als ik innerHTML gebruik, wordt het netjes zoals ik wil in de dom geplaatst, namelijk als volgt:

XML:

<DIV id="projectholder">
  <XML _moz-userdefined="">
    <PROJECT _moz-userdefined="" id="xml_project">
      <TITLE text="" id="xml_title"/>
      <GUID _moz-userdefined="" text="{f30fc175-9b24-4b3e-b723-45127bf63e9c}" id="xml_guid"/>
      <THEME _moz-userdefined="" text="none" id="xml_theme"/>
      <FOTOS _moz-userdefined="" id="xml_fotos">
          </FOTOS>
     </PROJECT>
  </XML>
</DIV>

Dit krijg ik dus niet voor elkaar in IE.
Waar ik ook tegen aanloop dat ik niet de zoekfuncties zoals dojo.byId kan gebruiken (wat een cross-browser versie van getElementById is).

Of kan ik in deze situatie beter een andere manier gebruiken. Ik heb voor deze methode gekozen in eerste instantie, omdat ik op deze manier erg gemakkelijk andere dom objecten kan verplaatsen naar het stukje xml.

[crisp]

IE bouwt geen echte DOM-tree zoals andere browsers. Onbekende elementen worden in IE verder genegeerd. Ik denk dat je beter van je geserialiseerde XML een XML document kan aanmaken en een referentie daarnaar opslaan in een javascript variabele ipv de HTML-DOM daarvoor te misbruiken.

Verder heeft een ID-attribuut geen speciale betekenis in een XML-DOM, daardoor kan je ook geen methods zoals getElementById gebruiken.

[ Voor 19% gewijzigd door crisp op 08-11-2007 10:15 ]

[ThunderNet]

Ok, dan gaat de manier waarop ik het bedacht niet werken. Ik ga even uitzoeken hoe ik losse xml documenten kan maken en deze in javascript te gebruiken, zonder eerst met de server te communiceren.

[Juup]

Voor IE en Fx kun je dit doen:

JavaScript:

if (document.implementation.createDocument)
{
   //Fx
   var parser = new DOMParser();
}
else
{
   //IE
   var docXML = new ActiveXObject("MSXML2.DOMDocument");
}
var myelem = docXML.createElement("mytagname");
docXML.documentElement.appendChild(myelem);

etcetera.

[ Voor 50% gewijzigd door Juup op 08-11-2007 11:17 ]

[ThunderNet]

Ik heb me nu zitten inlezen in JSON, en het lijkt mij verstandig om dit verder in JSON uit te voeren?
Dan moet ik alleen de DOM objecten die ik uiteindelijk wil verplaatsen in een JSON object zetten en deze naar de server te versturen.

Nu heb ik echter nog 1 vraag. Bij het aanmaken van een JSON "klasse" mag je dan het volgende doen?

JavaScript: Klasse1.js

var mijnklasse = { 
    "project" : {
        "title" : "mijn ingevulde titel",
        "guid" : myGuid
     }
}

JavaScript: Klasse2.js

var mijnklasse = { 
    "project" : {
        "theme" : "mijn ingevulde thema",
        "fotos" :  {
             "foto" : "http://tempuri.org/image.jpg"
         }
     }
}

Dat dit dan samengevoegd wordt als 1 klasse?
Mijn gevoel zegt van niet omdat ik 2x een var mijnklasse aanmaak en deze vul.
Maar op deze manier zou ik wel heel gemakkelijk mijn "library" code onder 1 object kunnen laten vallen.

[ Voor 10% gewijzigd door ThunderNet op 09-11-2007 10:46 ]

[Juup]

Nee dat kan niet maar je kunt wel in Klasse2 dit doen:

JavaScript:

mijnklasse.project.fotos = {"foto" : "http://tempuri.org/image.jpg"};

[ThunderNet]

Juup schreef op vrijdag 09 november 2007 @ 11:07:
Nee dat kan niet maar je kunt wel in Klasse2 dit doen:

JavaScript:

mijnklasse.project.fotos = {"foto" : "http://tempuri.org/image.jpg"};

Aha! dankje...

Ik kan dus in een eerste javascript bestand alles definieeren.
en later hier de functies en data inplaatsen.

Op deze manier kan ik erg netjes functies groeperen, en zo het geheel wat duidelijker maken.