将值从链接传递到弹出窗口
Passing value to pop up window from link
我有一个带有表的jsp页面。表中有两个链接,用于编辑和删除。当我单击删除链接时,会出现一个弹出窗口,当我确认删除时,我需要将页面转移到其操作类。以下是代码的各个部分。jsp页面:
<%--
Document : newjsp1
Created on : 4 Dec, 2015, 9:49:07 AM
Author : najee
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%-- other codes here --%>
<table class="table">
<thead>
<tr>
<th> Employee ID </th>
<th> First Name </th>
<th> Second Name </th>
<th> Date of Birth </th>
<th> Emirates Id </th>
<th> Type Of Employee </th>
<th style="width: 3.5em;"></th>
</tr>
</thead>
<s:iterator value="empco">
<tr>
<td><s:property value="e_id"/></td>
<td><s:property value="fname"/></td>
<td><s:property value="sname"/></td>
<td><s:property value="birthdate"/></td>
<td><s:property value="emiratesid"/></td>
<td><s:property value="typeofemployee"/></td>
<td>
<s:url var="IdValue" action="EditStaffDetails"><s:param name="IdValue"><s:property value="e_id"/></s:param></s:url><a href="${IdValue}"><i class="fa fa-pencil"></i></a>
<a href="#myModal" role="button" data-toggle="modal"><i class="fa fa-trash-o" ></i></a> <%-- delete link --%>
</td>
</tr>
</s:iterator>
</table>
<%-- other codes here --%>
<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the user?<br>This cannot be undone.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
<form action="deleteEmployee" method="post">
<input type="hidden" name="employeeId" value="<s:property value="e_id"/>" />
<input type="submit" value="Delete" name="Submit" />
</form>
</div>
</div>
</div>
</div>
<%-- other codes here --%>
</body>
当我单击一行中的删除链接时,我想将对应列employeeId中的值传递到弹出窗口中的输入框employeeId。
谢谢你的帮助!
将属性data-id
放在用id值触发模态的链接中,将点击事件绑定到该链接,并将数据传递给模态隐藏输入
<table class="table">
<thead>
<tr>
<th> Employee ID </th>
<th> First Name </th>
<th> Second Name </th>
<th> Date of Birth </th>
<th> Emirates Id </th>
<th> Type Of Employee </th>
<th style="width: 3.5em;"></th>
</tr>
</thead>
<s:iterator value="empco">
<tr>
<td><s:property value="e_id"/></td>
<td><s:property value="fname"/></td>
<td><s:property value="sname"/></td>
<td><s:property value="birthdate"/></td>
<td><s:property value="emiratesid"/></td>
<td><s:property value="typeofemployee"/></td>
<td>
<s:url var="IdValue" action="EditStaffDetails"><s:param name="IdValue"><s:property value="e_id"/></s:param></s:url><a href="${IdValue}"><i class="fa fa-pencil"></i></a>
<a href="#myModal" data-id="${IdValue}" role="button" data-toggle="modal"><i class="fa fa-trash-o" ></i></a> <%-- delete link --%>
</td>
</tr>
</s:iterator>
</table>
<%-- other codes here --%>
<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the user?<br>This cannot be undone.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
<form action="deleteEmployee" method="post">
<input type="hidden" name="employeeId" value="null" />
<input type="submit" value="Delete" name="Submit" />
</form>
</div>
</div>
</div>
</div>
js:
$('a[href="#myModal"]').on('click',function(){
var id = $(this).attr('data-id');
$('input[name="employeeId"]').val(id);
});
http://jsfiddle.net/ttdswa2e/
或:
$('#myModal').on('show.bs.modal',function(e){
var id = $(e.relatedTarget).attr('data-id');
$('input[name="employeeId"]').val(id);
});
http://jsfiddle.net/z9eqxhey/
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 重定向到父窗口中的链接
- 函数打开链接时不使用弹出窗口阻止程序
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 链接中有php变量的Javascript打开窗口
- 为在新窗口中打开外部链接创建异常
- 打开'选择文件'窗口单击锚链接(跳过单击'选择文件'按钮)
- 浏览器窗口中的应用内FB页面插件链接
- 传单:如何在弹出窗口中创建链接选择器
- SVG编辑链接获胜't在新窗口中打开
- 如何在网格视图中每次单击按钮或链接时打开不同的新弹出窗口
- 在聊天窗口中检测链接单击事件
- 具有双重功能的按钮:在_blank窗口中打开一个链接,再加上_self中的另一个链接
- 提交表单的可能性(左-/中-/在新选项卡或窗口中打开-)单击html链接
- 一个链接打开两个窗口
- 如何在指定的打开窗口中打开链接
- Sencha触摸,在新的浏览器窗口中打开网络链接
- 通过程序在窗口中打开一个外部URL,链接会附加到网站上
- Iframe contact form dosen't send父窗口链接
- 我可以跟踪一个新的窗口链接的推荐人