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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM