layer.js 弹出层提交form表单,action重定向


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。

  • 26
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在的模块,也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使用模块首先要做的必然是加载模块,layui.use(['laypage', 'layedit'], function(){}); 接下来使用layui风格控件  其实感觉layui帮我们定义好了CSS和许多JS文本,我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。  layu官方文档的命名规范为: CSS命名规范 class命名前缀:layui,连接符:-,如:class="layui-form" 命名格式一般分为两种: 一:layui-模块名-状态或类型 二:layui-状态或类型 因为有些类并非是某个模块所特有,他们通常会是一些公共类。如: 一(定义按钮的原始风格):class="layui-btnlayui-btn-primary" 二(定义内联块状元素):class="layui-inline" 1 2 3 4 5 6 7 8 9 当然还有前面提到的使用模块的js代码: layui.use(['form', 'layedit', 'laydate'], function(){   var form = layui.form   ,layer = layui.layer   ,layedit = layui.layedit   ,laydate = layui.laydate;   //日期   laydate.render({     elem: '#date'   });   laydate.render({     elem: '#date1'   });   //创建一个编辑器   var editIndex = layedit.build('LAY_demo_editor');   //自定义验证规则   form.verify({     title: function(value){       if(value.length < 5){         return '标题至少得5个字符啊';       }     }     ,pass: [/(.+){6,12}$/, '密码必须6到12位']     ,content: function(value){       layedit.sync(editIndex);     }   });   //监听指定开关   form.on('switch(switchTest)', function(data){     layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {       offset: '6px'     });     layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)   });   //监听提交   form.on('submit(demo1)', function(data){     layer.alert(JSON.stringify(data.field), {       title: '最终的提交信息'     })     return false;   }); }); 下面我们按照官方文档的开发规范使用一下form表单的例       表单集合演示           单行输入框                       验证必填项                             验证手机                                   验证邮箱                                       多规则验证                                   验证日期                                   验证链接                                 验证身份证                       自定义验证                   请填写6到12位密码               范围                           -                                 单行选择框                   </opt

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值