jquery - Bootstrap使用Jquery和ajax切换切换功能

Question

我在应用程序中使用 Bootstrap 开关，如下所示:

<div id="switch_toggle">
    <input id="switch-state" type="checkbox">
</div>

我使用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: <#if val?? && val>1<#else>0</#if>,
                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.我无法将正确的 bool 值传递给我的方法。我正在尝试发送 switch 的状态，但我只能在 Controller 类中获取 false 值。

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

Answer 1

Bootstrap 开关 - v3.3.2

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

HTML:

<input class="form-control btn_changepermission" type="checkbox" data-auid="<?php echo $au['id']; ?>" <?php if( $au['active']==1 ) { echo 'checked="checked"'; } ?>/>

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