layer.js 弹出层提交form表单,action重定向
来源:互联网 发布:淘宝宝贝突然被删除 编辑:程序博客网 时间:2024/06/06 02:05
layer.js,一个jquery的插件,可以用它来做信息提示,弹出层等。
官方demo地址:http://layer.layui.com/
官方api地址:http://layer.layui.com/api.html
使用layer.js做弹出层时,在弹出层里直接提交form表单,返回的画面仍然停留在弹出层里。 我们想在弹出层里提交form表单后关闭弹出层,并跳转到另一个画面。
0.引入layer.js
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";pageContext.setAttribute("basePath", basePath);%>
<script type="text/javascript" src="${basePath}js/layer/layer.js"></script>
1.在父画面里定义一个隐藏的div
<div id="popupFormDiv" style="display:none;"></div>
2.在父画面打开弹出层,并定义弹出层关闭时要回调的函数
layer.open({type: 2,title: ['导入信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],shadeClose: true,shade: false,maxmin: true,area: ['893px', '600px'],content: 'abc/xxx.action?id='+id,end: function(){// 如果是通过单击关闭按钮关闭弹出层,父画面没有此表单if($("#popupForm").length === 1){$("#popupForm").submit();}}});
3.弹出层里提交form表单的时候将form表单复制到父画面里,然后关闭弹出层。
$(function(){$("#saveBtn").click(function(){// 将表单复制到父画面,在父页面的回调函数里提交表单var popupForm= $(parent.document.body).children("div[id='popupFormDiv']").append($("#popupForm"));var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index); });});
此处也可以不关闭弹出层。 直接popupForm.children("form[id='adduserForm']").submit() ;
但是这样提交的话,弹出层会在页面上会停留一段时间,后台响应时间越长,弹出层在页面上停留的时间也越长。 不建议这样做。
这里说一个注意点。动态构造一个form表单一定要append到body元素里,不然提交不了。
$('<form action="form2.html"></form>').appendTo('body').submit();
我们这里当然是要把form表单插入到父画面的body元素里,而不是弹出层页面的body元素里。
弹出层右上角有一个关闭按钮,如果点击这个按钮,我们就没有机会将表单复制到父画面里的div里。 所以要在回调函数end里判断一下是否有popupForm这个表单。 然后提交这个表单即可。
$("#popupForm").length === 1
注意,这里不能这样判断:
if($("#popupForm")){ // to do}
因为jquery对象总是会返回一个jquery集合,所以$("xxx")不可能为null,undefined等。
如果只是给父画面传一个值,官方有提到,只需这样:
parent.$('#parentIframe').text('我被改变了');
这个表示,给父画面 id为 parentIframe元素的text赋值。
可以debug看看,这里的parent就是window对象。
关于parent这个东西,可参考这篇文章:
http://hubin19860118-163-com.iteye.com/blog/961413
弹出层的form表单:
<form id="popupForm" action="${basePath}aa/bb.action" method="post"><table><tr><td class="align-R"><span><font color="red">*</font>昵称:</span></td><td><input type="text" name="searchForm.name" /></td></tr><tr><td class="align-R"><span><font color="red">*</font>数量:</span></td><td><input type="text" name="searchForm.amount" /></td></tr><tr><td class="align-R"><span>备注:</span></td><td><textarea name="searchForm.remark" rows="3"></textarea></td></tr><tr><td style="padding-left:200px;" colspan="2"><input type="button" class="buildBtn" id="saveBtn" value="导入" /></td></tr></table><input type="hidden" name="searchForm.id" value="${searchForm.id}" /></form>
最后啰嗦一下:
如果你的action要重定向到另一个命名空间下的action,并且传递参数给那个action:<action name="bb" class="bbAction" method="bb"><result name="success" type="redirectAction"><param name="namespace">/cc</param><param name="actionName">cc</param><param name="searchForm.someId">${someId}</param><param name="resultMsg">${resultMsg}</param></result></action>
注意
bb所在的action里 至少有someId和resultMsg的getter
cc所在的action里至少有searchForm和resultMsg的setter。
searchForm类里要有someId的 setter和getter。
- layer.js 弹出层提交form表单,action重定向
- 当layer层遇到form表单提交
- form表单action提交
- js 提交form表单时,action的动态修改方法
- js动态更改Form表单action,进行提交
- 关于layer.js 弹出框表单提交关闭父窗口出现表单提交失效的问题
- JS 提交form表单
- js form表单提交
- JS 提交form表单
- JS 提交form表单
- js提交form表单
- JS 提交form表单
- JS 提交form表单
- JS 提交form表单
- JS 提交form表单
- form表单提交js
- js提交form表单
- jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭弹出层
- Pods written in Swift can only be integrated as frameworks; add `use_frameworks!` to your Podfile or
- 使用Spring中的jdbcTemplate
- linux shell判断程序是否运行,没有运行则运行程序
- C++实现读取特定路径下文件夹及文件名的方法
- HDU 3652B-number 数位dp
- layer.js 弹出层提交form表单,action重定向
- 关于程序运行时的数据结构
- LeetCode代码分析——6. ZigZag Conversion
- NYOJ 喷水装置(二)(区间覆盖)
- HTML5标签二
- Linux下使Shell 命令脱离终端在后台运行
- C语言宏定义函数与函数的区别
- 重用字体字号对照
- myclipse的使用及其数据库的连接