Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 686|回复: 0

bootstrap模态框通过传值解决重复提交问题

[复制链接]
  • TA的每日心情
    奋斗
    4 天前
  • 签到天数: 802 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726006
    发表于 2021-6-6 21:05:25 | 显示全部楼层 |阅读模式

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

    原因:重复的原因是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>

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-11-15 10:10 , Processed in 2.005628 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表