2

I am using the bootstrap switch in my application as follows:

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

I use a jquery code to get the current state of the switch every time the switch is clicked. The code I use is:

$(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) {},
    });
});

Now I face two issues

1.What I want exactly is a function that gets called only if the the button is clicked and its state is toggled. But the current function I use gets triggered every time the enclosing div is clicked.

2.I am not able to pass the correct Boolean value to my method. I am trying to send the state of the switch , but I am only able to get the value as false in my controller class.

Is there any way I can fix these issues??

1 Answer 1

1

bootstrap-switch - v3.3.2

This answer includes how catch switchChange event, and also call AJAX and manage switch state according to the AJAX response.

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;
                    }
                }
            });
        }
    }); 
});

Use external variable (stopChange) to stop looping switchChange

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.