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.我无法将正确的布尔值传递给我的方法。我正在尝试发送交换机的状态，但我只能在控制器类中将值设置为false。

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

Answer 1

bootstrap-switch - 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

使用Jquery和ajax的Bootstrap开关切换功能

1 个答案: