DOJO中 xhrPost 提交 dijit.form.Form

da_shuaiguo 2010-01-06 05:08:39
各位好!

在使用DOJO时遇到如下问题:
用xhrPost提交一个普通表单可以正常运行。代码片段如下:

<form id="categoryForm" action="addCategory">
<s:hidden id="id" name="id"/>
<label for="name">Name</label><input dojotype="dijit.form.TextBox" id="name" type="input" name="category.name"/>
<input type="submit" id="button" dojotype="dijit.form.Button" label="Add" />
</form>


dojo.connect(button, "onClick", function(event){
event.preventDefault();
event.stopPropagation();
var xhrArgs = {
form: dojo.byId("categoryForm"),
preventCache:true,
handleAs: "json",
load: function(data){

},
error: function(error){
alert(error.message);
}
}
var deferred = dojo.xhrPost(xhrArgs);


不过,当在<form>标签中加入dojotype="dijit.form.Form"属性以后,就出错了。

<form id="categoryForm" action="addCategory" dojotype="dijit.form.Form">
<s:hidden id="id" name="id"/>
<label for="name">Name</label><input dojotype="dijit.form.TextBox" id="name" type="input" name="category.name"/>
<input type="submit" id="button" dojotype="dijit.form.Button" label="Add" />
</form>


问题是,怎么用Ajax提交一个dijit.form.Form。

谢谢!
...全文
1187 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
da_shuaiguo 2010-01-08
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 fjb5926 的回复:]
我的还是1.2.3哈,刚才实际测试了一哈,确实是可以调的
[/Quote]
我现在是初学,还没有对性能方面做过研究。期待老手指教!
da_shuaiguo 2010-01-08
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 fjb5926 的回复:]
我的还是1.2.3哈,刚才实际测试了一哈,确实是可以调的
[/Quote]
恩,那这有可能是1.4中不能用了,或者是使用方法有所改变,也有可能是1.4的BUG。

我现在的解决方法是,在xhrArgs中不用form属性来指定Form,而是通过content属性来定义参数的Key,然后再通过DOM取得对应的值。
感觉比较麻烦。。。
fjb5926 2010-01-07
  • 打赏
  • 举报
回复
再问个题外话,我在项目中好多地方用了dojo控件,在ff中还可以,在IE中就感觉好慢哦,按照官方的方法压缩了也没很好解决,请问各位是否也是这种情况哦?
fjb5926 2010-01-07
  • 打赏
  • 举报
回复
我的还是1.2.3哈,刚才实际测试了一哈,确实是可以调的
da_shuaiguo 2010-01-07
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 fjb5926 的回复:]
如果不修改代码肯定要出错的,后观你已经转成dojo控件了,代码中应该改为:
....
var xhrArgs = {
        form: dijit.byId("categoryForm").domNode,
        preventCache:true,
.....
[/Quote]
多谢回答!
您说的这种方法我也曾经试过,但也会出错。
我用的是DOJO的1.4.0,请问您用的是什么版本?
另外,以上这个方法,您确实在实际使用中证明过是可行的吗?
请赐教!
fjb5926 2010-01-07
  • 打赏
  • 举报
回复
如果不修改代码肯定要出错的,后观你已经转成dojo控件了,代码中应该改为:
....
var xhrArgs = {
form: dijit.byId("categoryForm").domNode,
preventCache:true,
.....
da_shuaiguo 2010-01-07
  • 打赏
  • 举报
回复
无人回帖???
XPAGE学习笔记 1 Theme 2 2 在Xpage使用Dojo 2 2.1 加载dojo.js 2 2.2 设置应用程序主题引入tundra.css 2 2.3 设置xpage属性引入dojo模块 3 2.4 Xpage的页面html代码 4 2.5 在xpage使用dojo编程 4 2.5.1 按钮(dijit.form.Button) 4 2.5.1.1 通过插入<div>标签生成dojo按钮 5 2.5.1.2 使用xpage按钮控件 7 2.5.1.3 在按钮控件上使用事件处理程序控件 7 2.5.2 Xpage使用 Spinner(dijit.form.NumberSpinner) 9 2.5.3 在xpage使用ProgressBar(dijit.ProgressBar) 10 2.5.4 在Xpage使用树(dijit.Tree) 10 2.5.4.1 JSON与XML数据源 11 2.5.4.2 Box树与Order树 12 2.5.4.3 对树进行添加、删除及重命名操作 13 2.5.4.4 将树的操作记录到后台数据库 14 2.5.4.5 树的拖放 15 3 在Xpage如何查找控件 16 3.1 理解document.getElementById 16 3.2 理解dojo.byId 17 3.3 理解dijit.byId 17 3.4 理解XSP.getElementById 17 3.5 理解getComponent 17 4 Xpage VS 表单 18 5 使用oneui主题 18 6 参考 18 6.1 JSON与String转换 18 6.2 XPage调试代码 18 1 Theme 主题在Domino的路径:D:\IBM\Lotus\Domino\xsp\nsf\themes 2 在Xpage使用Dojo  Xpage自动加载dojo.js  通过设置应用程序主题将tundra.css引用到xpage  设置xpage属性,引用dojo模块  在xpage使用dojo编程 2.1 加载dojo.js Xpage会自动加载dojo.js,默认情况下xpage自动查找data\domino\js下的最新版本。也可以通过设置xsp.properties文件来修改dojo版本,重命名xsp.properties.sample 文件(D:\IBM\Lotus\Domino\data\properties\ xsp.properties.sample) 2.2 设置应用程序主题引入tundra.css 通过设置应用程序主题将tundra.css引用到xpage 2.3 设置xpage属性引入dojo模块 2.4 Xpage的页面html代码 2.5 在xpage使用dojo编程 2.5.1 按钮(dijit.form.Button)  通过插入<div>标签生成dojo按钮  使用xpage按钮控件  在按钮控件上使用事件处理程序控件 2.5.1.1 通过插入<div>标签生成dojo按钮 第一步:在xpage插入<div dojoType=”dijit.form.Button” id=”dojoBtn”>div> 第二步:在xpage插入 第三步:编写客户端javascript <div dojoType="dijit.form.Button" id="dojoBtn">div> Dia(){ var dia = new dijit.Dialog({title:"dojo按钮演示",style:"width:150px"}); var pane = document.createElement("div"); pane.innerHTML = "Hello Dojo!"; dia.setContent(pane); dia.show(); } function btnDemo(){ var dojoBtn = dijit.byId("dojoBtn"); var dojoBtnNode = dojo.byId("dojoBtn"); dojoBtn.setLabel("Dojo Button"); // dojo.connect(dojoBtn.domNode,"onclick","showDia"); dojo.connect(dojoBtnNode,"onclick","showDia"); } dojo.addOnLoad(btnDemo);]]> 2.5.1.2 使用xpage按钮控件 dia = new dijit.Dialog({title:"提示:",style:"width:150px;"}); var pane = document.createElement("div"); pane.innerHTML = "dojo按钮演示!"; dia.setContent(pane); dia.show(); ]]> 2.5.1.3 在按钮控件上使用事件处理程序控件 将事件处理程序控件拖放到按钮控件上 2.5.2 Xpage使用 Spinner(dijit.form.NumberSpinner) dojo.addOnLoad(function(){ new dijit.form.NumberSpinner({ name:"#{id:numSales}", value:50, smallDelta:1, min:0, places:0},XSP.getElementById("#{id:numSales}")); }); ]]> var myvalue = "#{javascript: var value; if(getComponent("numSales").getValue() != null){ value = getComponent("numSales").getValue().intValue(); }else{ value = 50; } return value.toFixed(0);}"; new dijit.form.NumberSpinner({name:"#{id:numSales}", value:myvalue, smallDelta:1, constraints:{min:0,places:0}}, XSP.getElementById("#{id:numSales}")); 2.5.3 在xpage使用ProgressBar(dijit.ProgressBar) <div dojoType="dijit.ProgressBar" style="width:300px" jsId="jsProgress" id="div1"> div> 2.5.4 在Xpage使用树(dijit.Tree)  JSON与XML数据源  Box树与Order树  对树进行添加、删除及重命名操作  将树的操作记录到后台数据库  树的拖放 2.5.4.1 JSON与XML数据源 box.json文件 { identifier:'id', label:'name', items:[ {id:1,name:"盒子1",type:"box",weight:0} ] } order.xml文件 001 订单001 航运 001-1 1 11761 精通DOJO 001-2 3 11789 项目管理那些事儿 002 订单002 快递 002-1 10 11763 精通J2EE 002-2 30 11799 超越对手 2.5.4.2 Box树与Order树 <div dojoType="dojo.data.ItemFileWriteStore" jsId="boxStore" url="/tree/box.json"> div> <div dojoType="dojox.data.XmlStore" jsId="orderStore" label="description" keyAttribute="orderNumber" url="/tree/order.xml"> div> <div dojoType="dijit.tree.ForestStoreModel" jsId="boxModel" store="boxStore" rootLabel="退货物品" childrenAttrs="orders,items"> div> <div dojoType="dijit.tree.ForestStoreModel" jsId="orderModel" store="orderStore" rootLabel="订单" childrenAttrs="line,order"> div> <div dojoType="dijit.Tree" id="boxTree" model="boxModel"> <script type="dojo/method" event="onClick" args="item"> lastBoxSelected = item; div> <div dojoType="dijit.Tree" id="orderTree" model="orderModel"> div> 2.5.4.3 对树进行添加、删除及重命名操作 <div dojoType="dijit.form.Button" id="addBtn"> 添加 <script type="dojo/method" event="onClick"> boxStore.newItem({id:2,name:"盒子2",type:"box",weight:0,orders:[]}); div> <div dojoType="dijit.form.Button" id="delBtn"> 删除 <script type="dojo/method" event="onClick"> if(boxStore.isItem(lastBoxSelected)){ boxStore.deleteItem(lastBoxSelected); } div> <div dojoType="dijit.form.Button" id="reBtn">重命名 <script type="dojo/method" event="onClick"> if(boxStore.isItem(lastBoxSelected)){ boxStore.setValue(lastBoxSelected,"name","新盒子"); } div> 2.5.4.4 将树的操作记录到后台数据库 <div dojoType="dojo.data.ItemFileWriteStore" jsId="boxStore" url="/tree/box.json"> <script type="dojo/connect" event="onNew" args="newItem"> var itemId = this.getValue(newItem,"id"); var itemName = this.getValue(newItem,"name"); dojo.xhrPost({ url:"agCreateNewBox?OpenAgent", content:{id:itemId,name:itemName}, timeout:10000, error:function(){alert("对不起,出错啦!");}, load:function(){alert("数据保存成功!");console.debug("数据保存成功!");} }); dojo/connect” event=”onDelete” args=”delItem”> div> 2.5.4.5 树的拖放 要使树具有拖放功能,仅仅需要设置dndController属性(dijit._tree.dndSource已废弃): 要限制拖放的行为,仅仅需要实现checkAcceptance或checkItemAcceptance处理函数即可: 以上已经实现了树的拖放功能了! 但是,如果要将拖放的结果保存起来,也就是说要改变树的模型并将模型数据保存,那么应该编写onDndDrop的处理函数(通过增加jsId获得dndController会出现this.avaria is null 错误,所以下面通过小部件初始化时将dndController传递给变量controller): 在boxDrop与checkAcceptance一样可以得到target与source,另外,onDndDrop的source与nodes有些相似source.selection[something]=nodes[somethin] 结合ItemFileWriteStore 可以实现对模型数据的保存 3 在Xpage如何查找控件 3.1 理解document.getElementById 得到node,创建node可以用document.createElement 这样访问或设置节点的所有属性 node.innerHTML = “” node.value=”” var id = node.id var style = node.style 3.2 理解dojo.byId 得到node,也可以通过dijit.byId().domNode得到节点 dojo.byId(“myid”).value dojo.byid(“myid”).id dojo.attr(node,attribute) 如读取dojo.attr(node,”id”) dojo.attr(node,attribute,value) 如设置dojo.attr(node,”id”,”myid”) dojo.hasAttr(node,attribute) 如判断 dojo.hasAttr(node,”id”) dojo.connect(node,”onclick”,handler) dojo.removeClass(node,”myclass”) 3.3 理解dijit.byId 得到dojo控件对象,也可以通过dijit.byNode(dojo.byId())得到对象 不同的控件的getValue()返回值类型不一样 在xpage对于<div>标签可能使用期dijit.byId(“myid”),对于标签是不可以的 dijit.byId().getValue() dijit.byId().setValue() 3.4 理解XSP.getElementById 这是XSPClientDojo定义的,XSP全局变量相当于document对象,为客户端访问xpage控件提供方法 XSP.getElementById(“#{id:myid}”)使用JSF表达式查询控件 var xid = XSP.getElementById(“#{id:myid}”) xid.value = “myvalue” xid.name = “myname” xid.disabled = false 3.5 理解getComponent javascript服务器端访问控件 getComponet(“myid”).getValue(); getComponet(“myid”).getSubmittedValue(); getComponent(“myid”).setValue(); getComponent(“myid”).setSubmittedValue(); 4 Xpage VS 表单 5 使用oneui主题 6 参考 6.1 JSON与String转换 dojo.fromJson(string) 返回json对象 dojo.toJson(object) 返回string对象 eval(‘(‘+string+’)’) 返回json对象 6.2 XPage调试代码 window.alert 函数不可用于服务器脚本。 使用以下函数写入服务器上的 console.log(例如 C:\Notes\Data\IBM_TECHNICAL_SUPPORT\console.log): print(string) 写入一个字符串。 _dump(object) 写入表示对象的字符串。

87,883

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧