zoukankan      html  css  js  c++  java
  • bootstrap模态框通过传值解决重复提交问题

    自己通过模态框确认是否提交的功能时,总是重复提价上次的请求。

    原因:重复的原因是jquery通过id绑定了确定按钮的onclick事件,所以每次提交都会增加 一次绑定(没有清除上次的绑定),才造成了重复提交,因此这一次不再绑定,通过传参的方式解决问题(就是把参数和方法一起传过去赋值)。

    通过按钮属性显示不同内容
    当有一堆按钮,都要触发相同的模态框(如:向好友列表中某个人发消息),只是有用户ID不同,那么可以使用data-whatever配合event.relatedtarget来实现:

    //要调用的函数:
    function run_task(id){
            $.post("mrTask/runTask",{id:id},function(res){
                if("success"==res){
                    layer.msg('已加入运行队列', {icon: 1});
                }else{
                    layer.msg('运行失败', {icon: 5});
                }
            });
        
    }
    
    //点击的按钮以及传递的参数
    <li><a href="#" data-whatever="run_task('+row.id+')*run" data-toggle="modal" data-target="#myModal_confirm">手动运行</a></li>
    
    <!-- 统一模态框 --提示-->
    <div class="modal fade" id="myModal_confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_confirm" 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>
    <h4 class="modal-title" id="myModalLabel_confirm">
    信息提示
    </h4>
    </div>
    <div class="modal-body" id="show_div_confirm">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" 
    data-dismiss="modal">关闭
    </button>
    <button type="button" class="btn btn-primary" data-dismiss="modal" id="domodal">确定</button>
    </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div>
    
    //js
    
    <script type="text/javascript">
    $('#myModal_confirm').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // 触发事件的按钮 
    var recipient = button.data('whatever') // 解析出data-whatever内容 
    var modal = $(this) 
    var params =recipient.split("*");
    var msg ="";
    if("del"==params[1]){
    msg="是否删除数据?";
    }else if("run"==params[1]){
    msg="是否手动运行程序?";
    }
    modal.find('#domodal').attr("onclick",params[0]); 
    modal.find('.modal-body').text(msg); 
    })
    
    </script>
  • 相关阅读:
    react引用antd的form表单
    前端学习之--谷歌浏览器使用
    react引用ant的table组件
    git 提交解决冲突
    git将本地仓库推送到远程仓库
    操作DOM
    javaScript基础篇之数据类型
    css之水平居中设置
    css之颜色值、单位
    CSS属性简写
  • 原文地址:https://www.cnblogs.com/hy928302776/p/6913306.html
Copyright © 2011-2022 走看看