【弹窗提示】在使用JSF的页面进行提交时显示确认弹窗

文章目录

• • 1. 先看一下最终效果图：
  • 2. 问题描述
  • 3. 问题解决

1. 先看一下最终效果图：

当点击按钮提交时：

当点击取消时：

2. 问题描述

JSF的页面提交表单有两种方式
- 使用
- 使用

现在想在点击按钮或者链接时，先弹出一个提示弹窗，只有当点击确认后才进行提交表单的操作

之前在用servlet或者ssm 、spring boot时，可以在一个自定义的函数中完成表单的提交，比如

// 其他业务逻辑
f.action = "后端url";
f.submt();

但是现在不能使用这种方式，因为JSF向后端发请求的方式不太一样（我目前是这么理解的）
JSF会把DOM组件的属性进行一些修改，加上一些自己的东西，比如这个input的name属性

<input type="submit" name="j_idt6:j_idt7:0:j_idt37" value="选课"/>

除此以外他的请求url规则不太懂，因为他的form的action是这样子的：

<form id="j_idt4" name="j_idt4" method="post" action="/student_select_course_war_exploded/pages/login.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt4" value="j_idt4">学号：<input type="text" name="j_idt4:j_idt6" value="12019">密码<input type="password" name="j_idt4:j_idt8" value=""><input type="submit" name="j_idt4:j_idt9" value="登录"><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="5828257949642758969:1121197389987952612" autocomplete="off">
form>

也就是说：他指向的是当前页面

3. 问题解决

进过一波分析感觉不能对下手，应该另辟蹊径

于是乎，我在这个按钮旁边又添加了一个普通按钮，当我点击这个按钮的时候，他会出发一个自定义的js函数，在这个函数里进行弹窗提示，并进行表单提交

<h:commandButton action="#{cour.selectCourse(cour.id, student.id)}" style="display: none"/>
<button type="button" class="btn btn-primary btn-sm demo3" onclick="selectCourse(this)">选课button>

弹窗函数如下：

function selectCourse(btn) {swal({title: "选课确认",text: "是否确认选择当前课程？\n如想修改选课信息，请前往查看已选课程页面",type: "warning",showCancelButton: true,confirmButtonColor: "#1ab394",confirmButtonText: "确认选课",cancelButtonText: "取消选课",closeOnCancel: false,closeOnConfirm: true}, function (isConfirm) {if (isConfirm) {$(btn).prev().click()} else {swal("已取消", "您取消了删除操作！", "error");}});
}

代码说明：
$(btn).prev().click()表示获取当前元素的前一个兄弟元素

需要添加的js和css库文件

    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet"/><link href="css/animate.css" rel="stylesheet"/><link href="css/style.css?v=4.1.0" rel="stylesheet"/><script type="text/javascript" src="js/jquery.min.js">script><script type="text/javascript" src="js/bootstrap.min.js">script><script type="text/javascript" src="js/exist-other-course.js">script><script type="text/javascript" src="js/plugins/sweetalert/sweetalert.min.js">script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！