问题
I'm trying to do a couple of things using Zend Framework & Dojo Toolkit, and any help would be appreciated. Here's the problem:
I have a form that is rendered with the Zend Framework form class, which has an ajax radio button selection. Clicking one of these radio buttons will send an ajax request to another controller, which has no layout, just a rendered form. The ajax request will then populate a div with the new form options.
Problem is, when I replace the innerHTML of the div with the ajax response, all the form inputs and elements are not inheriting the same Dojo styling and form validation.
I was wondering if there is a way to reinitate form elements after an ajax call?
I have tried to use the code attached which I found and modified slightly for this example, however it did not work. If I use the line dojo.parser.parse( div ); nothing changes (rg_adress in the example is the ID of a form element that is placed on the DOM). Here is the console.log of 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;
}
});'
Thanks, Dural
回答1:
I have the same question and I found a possible answer:
http://o.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dijit-parse-after-ajax-call-again
From what I understand, you'd need to do something like this in your function that is called to handle the data received from the ajax call:
function updateform(data)
{
var targetNode = dojo.byId(\"step2\");
targetNode.innerHTML = data;
dojo.parser.parse(targetNode);
}
This works with:
Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
But I'd like to use programmatic. I'll post a question about that.
回答2:
DojoX has a form manager to create elaborate CRUD applications. Basically it allows to map a flat JSON-style object to a form both ways (read/write), unified event processing, and many other things you want to do dynamically with forms. It works well with HTML form elements and with Dijit widgets alike.
Example:
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");
The HTML snippet for the above example can be something like that:
<fieldset id="my_form">
Name: <input type="text" name="name" value="">
<br>
Gender: <input type="text" name="gender" value="">
</fieldset>
Or it can be like that:
<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>
Or it can be like this:
<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>
As you can see the presentation is pretty much separated from the mechanics of the form, so it is up to your UI designer to come up with the best representation of the data, and tweak the form ad infinitum without changing your code or bothering you. ;-)
What else you can do? A lot of other nice things:
// 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);
Event processing regardless of the underlying form element/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);
Obviously we can enable/disable/show/hide/more responding to user's actions instead of enraging users.
The form manager package has much more than that: observers, form handling, class shortcuts. The whole thing is structured as a set of mixins so you can create your own form manager using only what you really need.
Start reading its documentation from dojox.form.manager and follow links to mixins and dojox.form.Manager (the default manager class, which includes all mixins at once) for more details. Don't forget to check out the form manager test (warning: the test is optimized for debugging, and can be slow to start).
Is it possible to work with non-flat data? Yes. You have two options:
Convert it to some flat structure and back when needed. Example:
var data = { name: { first: "Bob", last: "Smith" } };can be converted to:
var data = { "name-first": "Bob", "name-last": "Smith" };Use several form managers to handle different parts.
Usually the first option is simpler to implement. Just use some pre- and post-processing for your data.
How to do input validation, fancy data formatting, or other cool data-field specific things? Consider using Dijit widgets — they can do all these things and more.
来源：https://stackoverflow.com/questions/1175374/dojo-how-do-you-reinitiate-form-elements-after-ajax-call