DOJO：ajax 调用后如何重新启动表单元素？答案

【问题标题】：DOJO : How do you reinitiate form elements after ajax call?DOJO：ajax 调用后如何重新启动表单元素？
【发布时间】：2009-07-24 01:22:31
【问题描述】：

我正在尝试使用 Zend Framework 和 Dojo Toolkit 做一些事情，如果有任何帮助，我将不胜感激。问题来了：

我有一个使用 Zend Framework 表单类呈现的表单，它有一个 ajax 单选按钮选择。单击其中一个单选按钮将向另一个控制器发送 ajax 请求，该控制器没有布局，只是一个呈现的表单。然后，ajax 请求将使用新的表单选项填充一个 div。

问题是，当我用 ajax 响应替换 div 的 innerHTML 时，所有表单输入和元素都没有继承相同的 Dojo 样式和表单验证。

我想知道是否有办法在 ajax 调用后重新启动表单元素？

我尝试使用我为这个示例找到并稍微修改的附加代码，但是它不起作用。如果我使用 dojo.parser.parse( div ); 行，则没有任何变化（示例中的 rg_adress 是放置在 DOM 上的表单元素的 ID）。这是rg_address的console.log：

 <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;
    }

  });'

谢谢，硬脑膜

【问题讨论】：

标签： ajax zend-framework dojo init

【解决方案1】：

我有同样的问题，我找到了一个可能的答案：

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

据我了解，您需要在您的函数中执行类似的操作，以处理从 ajax 调用接收到的数据：

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

这适用于：

Zend_Dojo_View_Helper_Dojo::setUseDeclarative();

但我想使用程序化。我会发布一个关于这个的问题。

【讨论】：

【解决方案2】：

DojoX 有一个表单管理器来创建复杂的CRUD 应用程序。基本上，它允许以两种方式（读/写）、统一事件处理以及您希望对表单进行动态执行的许多其他事情将平面 JSON 样式的对象映射到表单。它适用于 HTML 表单元素和类似的 Dijit 小部件。

例子：

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");

上面例子的 HTML sn-p 可以是这样的：

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

也可以这样：

<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>

或者可以是这样的：

<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>

正如您所看到的，演示文稿与表单的机制几乎是分开的，因此您的 UI 设计师需要提供数据的最佳表示，并在不更改代码或困扰你。 ;-)

你还能做什么？还有很多其他的好东西：

// 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);

事件处理与底层表单元素/小部件无关：

// 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);

显然我们可以启用/禁用/显示/隐藏/更多响应用户的操作，而不是激怒用户。

表单管理器包的功能远不止这些：观察者、表单处理、类快捷方式。整个事情是由一组 mixin 构成的，因此您可以只使用您真正需要的东西来创建自己的表单管理器。

从 dojox.form.manager 开始阅读其文档，并点击 mixins 和 dojox.form.Manager（默认管理器类，一次包含所有 mixins）的链接了解更多详细信息。不要忘记查看the form manager test（警告：测试已针对调试进行了优化，启动速度可能会很慢）。

是否可以使用非平面数据？是的。你有两个选择：

在需要时将其转换为一些扁平结构并返回。示例：

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

可以转换为：

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

使用多个表单管理器来处理不同的部分。

通常第一个选项更容易实现。只需对您的数据进行一些预处理和后处理。

如何进行输入验证、花哨的数据格式化或其他很酷的数据字段特定的事情？考虑使用 Dijit 小部件——它们可以做所有这些事情，甚至更多。

【讨论】：