0

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

  });'

谢谢， 杜拉尔

4

2 回答 2

3

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

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

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

于 2010-07-07T21:53:54.750 回答
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);

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

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

从dojox.form.manager开始阅读它的文档，并点击 mixins 和dojox.form.Manager（默认管理器类，它同时包含所有 mixin）的链接以获取更多详细信息。不要忘记查看表单管理器测试（警告：该测试针对调试进行了优化，启动速度可能很慢）。

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

  1. 将其转换为一些平面结构，并在需要时返回。例子：

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

    可以转换为：

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

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

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

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

于 2009-07-26T04:50:54.560 回答