Question

我正在尝试使用Zend Framework＆amp; amp; 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;
    }

  });'

谢谢，硬脑膜

Answer 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();

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

Answer 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代码段可能是这样的：

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

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

表单管理器包不仅仅包括：观察者，表单处理，类快捷方式。整个事情的结构是一组mixins，所以你可以只使用你真正需要的东西创建自己的表单管理器。

从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小部件 - 他们可以做所有这些事情以及更多。

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

2 个答案: