layer.js，一個jquery的外掛，可以用它來做資訊提示，彈出層等。 

使用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這個東西，可參考這篇文章：

<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。