JS 模态框实现保存成功提示

深藏阁楼爱情的钟 2022-07-13 02:53 262阅读 0赞

JS 文件函数编辑示例

$(function(){
        var autoFormSubmit = function(e){
            var _this = $(this);
            // closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上
            var _form = _this.closest("form");
            // 设置提交的
            _form.validate({
                    //onclick  : false,
                    // submitHandler 之后的函数是通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
                    // 说明：当表单通过验证，提交表单。回调函数有个默认参数 form
                    submitHandler:function(form,e){
                        // trigger() 方法触发被选元素的指定事件类型
                        // _this 是被选元素 - "before.cs.form.submit" 是事件 - 实际中只需要给这个事件添加不同的处理函数即可
                        // 其中校验是写在事件对应的匿名函数之中
                        _this.trigger("before.cs.form.submit");
                        allModalShow();
                        // 将 action 放于 attr 之上，不要放置在 submit 元素（a 或者 button） 之上
                        // 即 表单的 action 属性值为 url
                        $.post(_form.attr('action'),_form.serialize(),function(data){
                            //after submit call this event.Bind a function on tabContent.
                            // 其中处理的返回值，不同结果对应不同返回值，这也可写在事件对应的匿名函数之中
                            _this.trigger("done.cs.form.submit",data);
                            setTimeout(function(){
                                // layout 大框架的模态框 id 是 myModalAll，其显示时间是 500 ms
                                $('#myModalAll').modal('hide');
                            },500)
                        });
                        return false;
                    },
                    // 当未通过验证的表单提交时，可以在该回调函数中处理一些事情。该回调函数有两个参数：第一个为一个事件对象，第二个为验证器（validator）
                    invalidHandler : function(form){
                        return false;
                    }
             });
            //_form.submit();
        }
    
        $(document).on('click','.autoSubmitForm',autoFormSubmit);
    });
    
    function allModalShow(){
        // layout 大框架的模态框 id 是 myModalAll
        $("#myModalAll").modal('show');
    
    }

JSP 函数使用实例

$(function(){
            $("#newAnswerCaseForm").bind("before.cs.form.submit",function(e){
                alert('表单提交之前');
            });
            $("#newAnswerCaseForm").bind("done.cs.form.submit",function(e,data){
                var parsedJson = jQuery.parseJSON(data);
                //alert(parsedJson.msg);
                alert("表单提交之后");
            });
        });

JSP 页面示例

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
    <div role="main" id="csCustomerDetailInfo">
        <form id="newAnswerCaseForm"  class="autoSubmitForm" action="Case/newChatAnswerCasePostAction">
            <div id="testInfo">
                <div class="panel panel-primary gd-panel">
                    <div  class="panel-heading" align="center">
                        <b>new chat</b>
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon" style="width: 100px;">显示名：</span>
                        <input type="input" class="form-control"  name="chatQuickAnswer.name" a-describedby="basic-addon1" style="width:300px;" required>
                    </div>
                    </br>
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1" style="width:100px;">发送内容：</span>
                        <textarea class="form-control" name="chatQuickAnswer.description" rows="3" cols="42"></textarea>
                    </div>
    
                </div>
            </div>
            <a type="submit"  style="margin-left:380px;width: 100px;height:46px;" class="btn btn-lg btn-success" value="保存" />
        </form>
    </div>
    
    <script type="text/javascript">
    
        $(function(){
            $("#newAnswerCaseForm").bind("before.cs.form.submit",function(e){
                alert('表单提交之前');
            });
            $("#newAnswerCaseForm").bind("done.cs.form.submit",function(e,data){
                var parsedJson = jQuery.parseJSON(data);
                //alert(parsedJson.msg);
                alert("表单提交之后");
            });
        });
    </script>