how can I prevent the change from the callback

[Javier-AN]

Hi,

First of all thanks for your work, time and attention.

I want to use the callback functions to call an API from AJAX and, depending on the response of the API (success / fail) I may want the switch button to stay the same. In other words, I want to know how can I prevent the button from changing from the callback function.

Thanks in advance!

[eman1986]

is there a reason you don't want the button state to change?

[Javier-AN]

Yes, as I said, I want the button to change a value in my database in real time. If the connection with the database fails for any reason, I would like to prevent the change.

[Javier-AN]

Another posible solution would be to change the button state programatically without triggering the callback. If it is a way to do that, I can work with that too.

[Javier-AN]

Ok, I made this workaround. I know it is bad but it just works for me. I will explain it only for the "light" mode because it is the only one I'm using.

First, I change the event so it gives the callback function the id instead of the value:

        /**
         * @param {object} instance
         * @param {string} id
         * @param {boolean} toggle
         * @param {boolean|string} value
         */
        var lightClickEvent = function (instance, id, toggle, value) {
            if (!toggle) {
                $('#light-' + id).addClass('tgl-sw-light-checked tgl-sw-active');

                instance.data('state', true);

                if ($.isFunction(settings.OnCallback)) {
                    // settings.OnCallback(value);  I comment this one
                    settings.OnCallback(id);  // I add this one
                }
            } else {
                $('#light-' + id).removeClass('tgl-sw-light-checked tgl-sw-active');

                instance.data('state', false);

                if ($.isFunction(settings.OffCallback)) {
                    // settings.OffCallback(value);  I comment this one
                    settings.OffCallback(id);  // I add this one
                }
            }
        };

After that, I prepared this function, wich changes the state of the button without triggering anything, because it only changes classes:

    function toggleSwitch(id, state) {
        instance = $("label[for=light-" + id + "]");
        btn = $("#light-" + id);

        if (state) {
            btn.addClass('tgl-sw-light-checked tgl-sw-active');
            instance.data('state', true);
        } else {
            btn.removeClass('tgl-sw-light-checked tgl-sw-active');
            instance.data('state', false);
        }
    }

Finally, I use the id and the function from the callback:

    $(".btn-switch").btnSwitch({
        Theme: "Light",

        // callbacks
        OnCallback: function(id) {
            toggleSwitch(id, false);
        },
        OffCallback: function(id) {
            toggleSwitch(id, true);
        },
    });

This is working for me right now, but I would appreciate having the posibility to prevent the change from the callback and also to change the button state anytime programatically.

Edit: found a bug, it only worked the first time after loading the page

[eman1986]

I don't think as it's written currently you can revert the state, one solution could be to add a set state method that you use if the server call fails, I'll try to add that tomorrow for you.