Prototype.js updateContent

[X-Lars]

Hello,

Het gaat over de Ajax-functionaliteit i.c.m. Prototype.js. Ik denk dat het het duidelijkst is als ik gewoon wat code laat zien:

Met het volgende form wil ik de callback-divjes updaten:

HTML:

<div id="callback">This text can be edited in the input field.</div>
<div id="callback-2">This text can be edited in the textarea.</div>

<form method="post" action="submit.php" onsubmit="return false;" id="form1" name="form1">
    <div>
        <label for="form-name">Input field:</label><input id="form-name" name="form-name" type="text">
        <label for="form-textarea">Textarea:</label><textarea id="form-textarea" name="form-textarea"></textarea>
    </div>
</form>

Normaalgesproken geef je 1 target op (het id van de div welke ge-update wordt):

JavaScript:

updateForm1: function(){
    var url = 'submit.php';
    var pars = Form.serialize('form1');
    var target = 'callback';
    var myAjax = new Ajax.Updater(target, url, { method: 'post', parameters: pars});
}

In prototype.js gebeurt dat hier:

JavaScript:

updateContent: function() {
    var receiver = this.responseIsSuccess() ?
      this.containers.success : this.containers.failure;
    var response = this.transport.responseText;

    if (!this.options.evalScripts)
      response = response.stripScripts();

    if (receiver) {
      if (this.options.insertion) {
        new this.options.insertion(receiver, response);
      } else {
        Element.update(receiver, response);
      }
}

Nou kan ik natuurlijk dit gaan hacken en kijken of er bijvoorbeeld een array wordt teruggegeven en dan per value in de array de functie Element.update() aanroepen. Maar ik vraag me af of hier geen betere (bestaande) optie voor is...

Mijn idee is dat het het mooiste zou zijn als je in submit.php gewoon de $_POST (of $_GET) array kunt serializen en echo-en (wat dan dus de responseText is, in JSON?), waarmee Javascript vervolgens aan de slag gaat. Dit idee kan ik zelf ook wel uitwerken, maar ik vraag me af of er al zoiets is in Prototype.js zit cq. iemand dit al eens uitgewerkt heeft cq. wat de "best practice" in deze is

[Koeniepoenie]

Ik kan er ook helemaal naast zitten. Maar kun je niet gewoon XML terug laten sturen (het is immers niet voor niets AJAX) en die gewoon 1 of meerdere nodes laten bevatten en dan met Javascript door de XML lopen?

[X-Lars]

Om er toch maar even op terug te komen...

XML is inderdaad een optie, maar ik heb toch voor JSON gekozen.

Ajax.Request is hier handiger dan Ajax.Updater. Ik gebruik de response.responseText "array" (JSON) en die verdeel ik dan weer over de elementen.

[b19a]

Dan nog zou ik ook voor Ajax.Request gaan, dan kun je de responseText namelijk gewoon opvragen en deze verdelen over de elementen. Ajax.Updater is alleen geschikt als je de responseText in 1 element wilt dumpen. Ajax.Request is ook heel makkelijk te implementeren en doet precies wat je nodig hebt!