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??

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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