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

简介: layer.js,一个jquery的插件,可以用它来做信息提示,弹出层等。  官方demo地址:http://layer.layui.com/ 官方api地址:http://layer.layui.com/api.html 使用layer.js做弹出层时,在弹出层里直接提交form表单,返回的画面仍然停留在弹出层里。


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。

目录
相关文章
|
1天前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
14天前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
25 0
|
14天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
27 0
|
14天前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
32 0
|
15天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘!v-model 与自定义验证综合运用,打造高效表单处理体验!
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架,其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定,简化表单元素值与 Vue 实例数据的同步过程;结合自定义验证规则,则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证,Vue.js 均提供了简洁有效的解决方案,有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证,开发者能够实时反馈错误信息并控制表单状态,从而增强应用的交互性与可靠性。
25 0
|
15天前
|
JavaScript 安全 数据安全/隐私保护
深入Node.js与Express:从表单接收到数据验证的完整指南——实战技巧揭秘后端开发中的表单处理流程
【8月更文挑战第31天】在Web开发中,处理表单数据至关重要。本文通过实例详细讲解了如何利用Node.js与Express框架接收和验证表单数据。首先,搭建环境并初始化一个简单的Express应用;接着,演示如何接收用户注册表单中的`username`和`email`字段;最后,引入`joi`模块进行数据验证,确保数据安全准确。掌握这些技能有助于开发者构建更安全、友好的Web应用。随着Node.js和Express的不断进步,未来将有更多高级功能值得期待。
24 0
|
17天前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
1月前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
2月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
若依修改-------控制若依重定向的路径,控制路径重定向的写法路径在,在permission.js文件中控制重定向
若依修改-------控制若依重定向的路径,控制路径重定向的写法路径在,在permission.js文件中控制重定向