DOJO: Wie initiieren Sie Formularelemente nach Ajax-Aufruf?

Question

Ich versuche, ein paar Dinge mit Zend Framework & Dojo Toolkit zu tun, und jede Hilfe wäre willkommen. Hier ist das Problem:

Ich habe ein Formular, das mit der Zend Framework Form Klasse gerendert wird, die eine Ajax Radio Button-Auswahl hat. Wenn Sie auf einen dieser Optionsfelder klicken, wird eine Ajax-Anforderung an einen anderen Controller gesendet, der kein Layout hat, sondern nur ein gerendertes Formular. Die Ajax-Anfrage füllt dann ein Div mit den neuen Formularoptionen.

Problem ist, wenn ich die innerHTML des div durch die Ajax-Antwort ersetzen, erben alle Formulareingaben und -Elemente nicht die gleiche Dojo Styling und Formularüberprüfung.

Ich frage mich, ob es eine Möglichkeit gibt, Formularelemente nach einem Ajax-Aufruf zu reinitialisieren?

Ich habe versucht, den beigefügten Code zu verwenden, den ich für dieses Beispiel gefunden und leicht modifiziert habe, aber es hat nicht funktioniert. Wenn ich die Zeile dojo.parser.parse(div); verwende, ändert sich nichts (rg_adress im Beispiel ist die ID eines Formularelements, das auf dem DOM platziert wird). Hier ist die console.log von rg_address:

<input type="text" dojotype="dijit.form.ValidationTextBox" 
    required="1" invalidmessage="The first name of the recipient" 
    value="" name="rg_address" id="rg_address" class="textbox"/> 

    onClick=' 

    dojo.xhrGet({ 
    url: "/transfer/newrecipient/", 
    handleAs: "text", 
    timeout: 10000, // Time in milliseconds 

    // The LOAD function will be called on a successful response. 
    load: function(response, ioArgs) { 
    $("#newRecipient").html(response); 
     $("#newPayMethod").html(""); 
    $("#newPayDetail").html(""); 

    var div = dojo.byId("rg_address"); 
    console.log(div); 
    dojo.parser.parse(div); 

    return response; 
    }, 

    // The ERROR function will be called in an error case. 
    error: function(response, ioArgs) { 
    $("#newRecipient").html("Error loading registration form"); 
    $("#newPayMethod").html(""); 
    $("#newPayDetail").html(""); 
    return response; 
    } 

    });' 

Danke, Dural

Answer 1

DojoX hat eine Form Manager zu aufwendigen CRUD Anwendungen zu erstellen. Grundsätzlich erlaubt es, ein flaches JSON-style-Objekt zu einem Formular in beiden Richtungen (Lesen/Schreiben), vereinheitlichte Ereignisverarbeitung und viele andere Dinge, die Sie dynamisch mit Formularen durchführen möchten, zuzuordnen. Es funktioniert gut mit HTML-Formularelementen und Dijit-Widgets gleichermaßen.

Beispiel:

dojo.require("dojox.form.Manager"); 

// our data 
var data = { 
    name: "Bob Smith", 
    gender: "male" 
}; 

// the form manager 
var fm = new dojox.form.Manager({}, "my_form"); 

// now we can populate the form 
fm.setFormValues(data); 

// we can read them back when user submits them 
// or indicated that she finished with them 
var newData = fm.gatherFormValues(); 

// populate fields separately 
fm.elementValue("name", "Jane Doe"); 
fm.elementValue("gender", "female"); 

// read a field value 
var newName = fm.elementValue("name"); 

Das HTML-Snippet für das obige Beispiel so etwas wie das sein kann:

<fieldset id="my_form"> 
    Name: <input type="text" name="name" value=""> 
    <br> 
    Gender: <input type="text" name="gender" value=""> 
</fieldset> 

Oder kann es so sein:

<fieldset id="my_form"> 
    Name: <textarea name="name"></textarea> 
    <br> 
    Gender: <select name="gender"> 
    <option value="male" >Male<option> 
    <option value="female">Female<option> 
    </select> 
</fieldset> 

oder es kann sei wie folgt:

<fieldset id="my_form"> 
    Name: <input type="text" name="name" value=""> 
    <br> 
    Gender: <label><input type="radio" name="gender" value="male">Male</label> 
    <label><input type="radio" name="gender" value="female">Female</label> 
</fieldset> 

Wie Sie sehen können, ist die Präsentation ziemlich von der Mechanik des Formulars getrennt. Daher liegt es an Ihrem UI-Designer, die beste Darstellung der Daten zu finden und das Formular ad infinitum zu optimieren, ohne den Code zu ändern oder dich belästigen. ;-)

Was können Sie noch tun? Viele andere schöne Dinge:

// disable all fields temporarily 
fm.disable(); 
// ... 
// doing I/O here? we want to prohibit a user 
// from modifying the form until we are done 
// ... 
// now we can enable all fields 
fm.enable(); 

// sample field list 
var fields = ["name"]; 

// we can enable/disable fields by name 
fm.disable(fields); 
// ... 
fm.enable(fields); 

// let's hide fields and show them back 
fm.hide(fields); 
// ... 
fm.show(fields); 

Ereignisverarbeitung unabhängig von der zugrunde liegenden Formelement/widget:

// our business objective calls for pissing our users royally 
// by popping an alert on every single field change 
var my_alert = function(name, node){ 
    var onChangeEventName = dojox.form.manager.changeEvent(node); 
    return dojo.connect(node, onChangeEventName, function(){ 
    alert("Are you annoyed yet?"); 
    } 
}; 
var adapted = dojox.form.manager.actionAdapter(my_alert); 
// let's apply our function to all fields 
fm.inspect(adapted); 

Natürlich können wir aktivieren/deaktivieren/show/hide/mehr reagiert auf Aktionen des Benutzers statt die Benutzer verärgern.

Das Formular-Manager-Paket hat viel mehr als das: Beobachter, Formularbehandlung, Klassenverknüpfungen. Das Ganze ist als eine Reihe von Mixins strukturiert, so dass Sie Ihren eigenen Formularmanager erstellen können, indem Sie nur das verwenden, was Sie wirklich brauchen.

Starten Sie Lesen der Dokumentation von dojox.form.manager und folgen Sie Links zu Mixins und (die Standard-Manager-Klasse, die alle Mixins auf einmal enthält) für weitere Details. Vergessen Sie nicht, the form manager test zu überprüfen (Warnung: Der Test ist für das Debuggen optimiert und kann langsam gestartet werden).

Kann ich mit nicht flachen Daten arbeiten? Ja. Sie haben zwei Optionen:

1. Konvertieren Sie es in einige flache Struktur und zurück, wenn nötig. Beispiel:

   var data = { 
       name: { 
       first: "Bob", 
       last: "Smith" 
       } 
   }; 
   

   können umgewandelt werden:

   var data = { 
       "name-first": "Bob", 
       "name-last": "Smith" 
   }; 
   

2. Verwenden verschiedener Form Manager auf verschiedene Teile handhaben.

Normalerweise ist die erste Option einfacher zu implementieren. Verwenden Sie nur einige Vor- und Nachbearbeitungen für Ihre Daten.

Wie kann man die Eingabevalidierung, die Formatierung von Formatierungen oder andere spezielle Datenfelder durchführen? Erwägen Sie die Verwendung von Dijit Widgets — sie können all diese Dinge und mehr tun.

Answer 2

Ich habe die gleiche Frage und ich fand eine mögliche Antwort:

http://o.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dijit-parse-after-ajax-call-again

Von dem, was ich verstehe, würden Sie brauchen so etwas wie dies in Ihrer Funktion zu tun, die die empfangenen Daten zu handhaben aufgerufen von dem ajax-Aufruf:

function updateform(data) 
{ 
    var targetNode = dojo.byId(\"step2\"); 
    targetNode.innerHTML = data; 
    dojo.parser.parse(targetNode); 
} 

Dies funktioniert mit:

Zend_Dojo_View_Helper_Dojo::setUseDeclarative(); 

Aber ich möchte programmatisch verwenden. Ich werde eine Frage dazu stellen.