jQuery技术:使用Jquery和ajax的Bootstrap开关切换function

我在我的应用程序中使用bootstrap开关如下:

每次点击开关时,我都会使用jquery代码来获取交换机的当前状态。 我使用的代码是:

 $(document).on('click', '#switch_toggle', function(event) { val = $('#switch-state').bootstrapSwitch('state'); console.log('current state : ' + val); $.ajax({ url: "${rc.getContextPath()}/module/site-settings/update-title-display", type: "POST", data: { showTitle: 10, siteId : 1, }, dataType: "html", success: function(htmlData) { aler("Success")) }, error: function(xhr, status, errorThrown) { console.log("Error: " + errorThrown); console.log("Status: " + status); console.dir(xhr); }, complete: function(xhr, status) {}, }); }); 

现在我面临两个问题

1.我想要的是一个只有在单击按钮并且其状态被切换时才被调用的函数。 但是每次单击封闭div时,我使用的当前函数都会被触发。

2.我无法将正确的布尔值传递给我的方法。 我试图发送交换机的状态,但我只能在我的控制器类中获取false值。

有什么办法可以解决这些问题吗?

    bootstrap-switch – v3.3.2

    这个答案包括如何捕获switchChange事件,并根据AJAX响应调用AJAX和管理开关状态。

    HTML:

     /> 

    jQuery的:

     $(document).ready(function() { $('.btn_changepermission').bootstrapSwitch({size : 'small'}); var stopchange = false; $('.btn_changepermission').on('switchChange.bootstrapSwitch', function (e, state) { var obj = $(this); if(stopchange === false){ $.ajax({ url: "/admin/ajax/permission/activate", dataType: 'json', type: "POST", quietMillis: 100, data: { auid: $(this).data('auid'), }, success: function(result) { if(result['done'] == true) { alert('Permission changed successfully.'); } else { alert('Error:'+result['message']); if(stopchange === false){ stopchange = true; obj.bootstrapSwitch('toggleState'); stopchange = false; } } }, error: function(result) { alert('Error! Unable to find this agentuser.'); if(stopchange === false){ stopchange = true; obj.bootstrapSwitch('toggleState'); stopchange = false; } } }); } }); }); 

    使用外部变量(stopChange)来停止循环switchChange

    需要了解更多jQuery教程分享使用Jquery和ajax的Bootstrap开关切换function,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

      以上就是jQuery教程分享使用Jquery和ajax的Bootstrap开关切换function相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/982281.html

      (0)
      上一篇 2021年12月13日
      下一篇 2021年12月13日

      精彩推荐