jqxSwitchButton

[LuiginoParticipant]

Hello everyone,

I’m trying to use jqxSwitchButtons….

I have a piece of code where I have:


if (realtime_status) {
$('#rt_status_' + t).jqxSwitchButton({ height: 18, width: 61, theme: 'custom', checked: true });
} else {
$('#rt_status_' + t).jqxSwitchButton({ height: 18, width: 61, theme: 'custom', checked: false });
}


then


$('#rt_status_0').click(function (event) {
if ( $('#rt_status_0').jqxSwitchButton({checked:true}) ) {
if ( !fn_Deactivate(...) )
$('#rt_status_0').jqxSwitchButton('toggle');
} else {
if ( !fn_Activate(...) )
$('#rt_status_0').jqxSwitchButton('toggle');
}
});


And I loaded correctly libraries…. the matter is if I execute it with IE8 and FF it works fine but if I use Chrome it doesn’t always work… sometimes those “OFF” labels inside switch doesn’t appear and in this example even if I am FALSE it shows switchbutton checked…

To verify that wouldn’t change anything I tried to put an alert inside first IF and it works right just it doesn’t draw the right switch….

Any idea? Thanks a lot!

Ciao,
Luigi

[Peter StoevKeymaster]

Hi Luigi,

In the code from your post, it seems that you set a new value of the ‘checked’ property when the ‘checked’ property is currently changing i.e when the Switch Button is clicked. Is that correct?

What is the purpose of the code below?

 'if ( $('#rt_status_0').jqxSwitchButton({checked:true}) ) {'

If it is checking the value of the Switch Button, then the code should be:

 'if ( $('#rt_status_0').jqxSwitchButton({'checked'}) )

Otherwise, you are setting a new value.

In addition, the jqxSwitchButton has events like ‘checked’, ‘unchecked’ and ‘change’ which are raised when its ‘checked’ property is changed. Checking the value of the jqxSwitchButton’s checked property in a ‘click’ event handler will not return correct results because the value just starts to change and is changed when the switch animation effect is completed. Then the ‘checked’, ‘unchecked’ or ‘change’ events are raised.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LuiginoParticipant]

Hello Peter,

first, thanks for replying….and fixed that ‘checked’ thing which it’s (‘checked’) and not ({‘checked’}) becuase otherwise it woudnt work…

what about the issue on Chrome which doesn’t put the correct button as unchecked since that IF says FALSE?….

Thanks
Luigi

[Peter StoevKeymaster]

Hi Luigi,

I am unable to reproduce the Chrome’s issue. Could you send me a small sample which demonstrates it? That’ll help me a lot as I will be able to debug the specific application scenario.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LuiginoParticipant]

Hi again Peter,

I am trying to reproduce with a test.php file and weirdly the:


if (realtime_status) {
alert('I am true');
$('#rt_status').jqxSwitchButton({ height: 18, width: 61, theme: 'custom', checked: true });
} else {
alert('I am false');
$('#rt_status').jqxSwitchButton({ height: 18, width: 61, theme: 'custom', checked: false });
}


is executed correctly and it draws an OFF button…
I checked with Chrome Debugger Tools and looks like all .js scripts are correctly loaded…but still the $(‘#rt_status’).jqxSwitchButton({ height: 18, width: 61, theme: ‘custom’, checked: false }); draws an ON button…

I cleared also totally the cache but nothing… any suggest at least about debugging the function if it would return some messages?…

Thanks
ciao,
Luigi

[Peter StoevKeymaster]

Hi Luigi,

I would like to ask you again for a small sample which reproduces the issue. The provided code and information about the issue is not enough for replicating the reported issue locally.

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LuiginoParticipant]

Hello Peter,

I solved anyway that strange behavior.. it wasn’t really jqxSwitchButton’s fault even if it seemed to, but just if I put the jqxSwitchButton inside a two-rowspan’s cell table it would behave different, so I put just another table inside the cell with no rowspan and it worked.

Now I have just a little question… I see the “change” event can be used to manage the change of the property but how I can do something like:


$('#jqxSwitchButton').bind('change', function (event) {
if ( !$('#jqxSwitchButton').jqxSwitchButton('checked') && !confirm("Really want to activate?") )
$('#jqxSwitchButton').jqxSwitchButton({checked: false});
elseif ( $('#jqxSwitchButton').jqxSwitchButton('checked') && !confirm("Really want to deactivate?") )
$('#jqxSwitchButton').jqxSwitchButton({checked: true});
});


since I implemented something like that but it doesn’t work… like I wrong clicked it so I don’t really want to activate…

Thanks
ciao
Luigi

[LuiginoParticipant]

Here the piece of test code:

.jqx-switchbutton-label-on-custom
{
background: #56aa1c !important; /* Old browsers */
filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#56aa1c, EndColorStr=#00ce1a,GradientType=0 ) !important; /* IE6-9 */
background: linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* W3C */
background: -o-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(40,206,26) 62%) !important; /* Opera 11.10+ */
background: -moz-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* FF3.6+ */
background: -webkit-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* IE10+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgb(106,255,125)), color-stop(62%, rgb(0,206,26))) !important; /* Chrome,Safari4+ */
/*text-shadow: 0px -1px 1px #000; */
font-size: 12px !important;
color: black !important;
}

.jqx-switchbutton-label-off-custom
{
color: black !important;
background: #cfcfcf !important; /* Old browsers */
filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#cfcfcf, EndColorStr=#fefefe, GradientType=0 ) !important; /* IE6-9 */
background: linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* W3C */
background: -moz-linear-gradient(top, #cfcfcf 0%, #fefefe 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(207,207,207)), color-stop(100%, rgb(254,254,254))) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(207,207,207) 0%, rgb(254,254,254) 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* IE10+ */
font-size: 12px !important; /*!important;*/
/*color: #808080 !important; */
}

.jqx-switchbutton-thumb-custom, .jqx-fill-state-normal-custom
{
background: #969696 !important; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #dbdbdb 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#dbdbdb)) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* IE10+ */
background: linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#969696, EndColorStr=#dbdbdb,GradientType=0 ) !important; /* IE6-9 */
border: 1px solid black !important; /* !important */
-webkit-box-shadow: -6px 0px 17px 1px #275292 !important;
-moz-box-shadow: -6px 0px 17px 1px #275292 !important;
box-shadow: -6px 0px 17px 1px #275292 !important;
color: black !important;
}

.jqx-switchbutton-custom
{
border: 1px solid black !important; /* !important */
/* background: #d9d9d9 !important; */
}
.settings-setter
{
float: left !important;
margin-left: 10px !important;
margin-top: 2px !important;
width: 90px !important;
/*border: 0.1em dotted green;*/
}
.events-container
{
margin-left: 20px !important;
}
.settings-label
{
font-weight: bold !important;
font-family: Sans-Serif !important;
font-size: 13px !important;
margin-left: 14px !important;
margin-top: 15px !important;
float: left !important;
color: #d9d9d9 !important;
}

var realtime_status = false;

function load() {
if (realtime_status) {
$('#rt_status').jqxSwitchButton({ height: 18, width: 65, theme: 'custom', checked: true });
} else {
$('#rt_status').jqxSwitchButton({ height: 18, width: 65, theme: 'custom', checked: false });
}
}

$(document).ready(function () {
$('#rt_status').bind('change', function (event) {
if ( $('#rt_status').jqxSwitchButton('checked') ) {
if (!confirm("Really want to deactivate?") ) {
alert('ok, gotta ckeck it back then...');
//$('#rt_status .jqxSwitchButton').jqxSwitchButton('check');
$('#rt_status.jqx-switchbutton').jqxSwitchButton('check');
}
} else {
if (!confirm("Really want to activate?") ) {
alert('ok, gotta unckeck it back then...');
//$('#rt_status .jqxSwitchButton').jqxSwitchButton('uncheck');
$('#rt_status.jqx-switchbutton').jqxSwitchButton('uncheck');
}
}
});
});

As you can see, I try to click and when I click “Cancel” it should back to the previous state but it doesn’t… why?….

Thanks
Ciao
Luigi

[Peter StoevKeymaster]

Hi Luigi,

I tested the provided code and found out that there’s an issue regarding the ‘check’, ‘uncheck’ behavior which is regarding the button’t toggling with animation. We’ll do our best to fix it for the upcoming release. I have also prepared a small workaround which includes calling an additional method after the call of the ‘check’ or ‘uncheck’ methods.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxswitchbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <style type="text/css">
        .jqx-switchbutton-label-on-custom
        {
            background: #56aa1c !important; /* Old browsers */
            filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#56aa1c, EndColorStr=#00ce1a,GradientType=0 ) !important; /* IE6-9 */
            background: linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* W3C */
            background: -o-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(40,206,26) 62%) !important; /* Opera 11.10+ */
            background: -moz-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* FF3.6+ */
            background: -webkit-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* Chrome10+,Safari5.1+ */
            background: -ms-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* IE10+ */
            background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgb(106,255,125)), color-stop(62%, rgb(0,206,26))) !important; /* Chrome,Safari4+ */ /*text-shadow: 0px -1px 1px #000; */
            font-size: 12px !important;
            color: black !important;
        }
        
        .jqx-switchbutton-label-off-custom
        {
            color: black !important;
            background: #cfcfcf !important; /* Old browsers */
            filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#cfcfcf, EndColorStr=#fefefe, GradientType=0 ) !important; /* IE6-9 */
            background: linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* W3C */
            background: -moz-linear-gradient(top, #cfcfcf 0%, #fefefe 100%) !important; /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(207,207,207)), color-stop(100%, rgb(254,254,254))) !important; /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgb(207,207,207) 0%, rgb(254,254,254) 100%) !important; /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* IE10+ */
            font-size: 12px !important; /*!important;*/ /*color: #808080 !important; */
        }
        
        .jqx-switchbutton-thumb-custom, .jqx-fill-state-normal-custom
        {
            background: #969696 !important; /* Old browsers */
            background: -moz-linear-gradient(top, #969696 0%, #dbdbdb 100%) !important; /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#dbdbdb)) !important; /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* IE10+ */
            background: linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#969696, EndColorStr=#dbdbdb,GradientType=0 ) !important; /* IE6-9 */
            border: 1px solid black !important; /* !important */
            -webkit-box-shadow: -6px 0px 17px 1px #275292 !important;
            -moz-box-shadow: -6px 0px 17px 1px #275292 !important;
            box-shadow: -6px 0px 17px 1px #275292 !important;
            color: black !important;
        }
        
        .jqx-switchbutton-custom
        {
            border: 1px solid black !important; /* !important */ /* background: #d9d9d9 !important; */
        }
        .settings-setter
        {
            float: left !important;
            margin-left: 10px !important;
            margin-top: 2px !important;
            width: 90px !important; /*border: 0.1em dotted green;*/
        }
        .events-container
        {
            margin-left: 20px !important;
        }
        .settings-label
        {
            font-weight: bold !important;
            font-family: Sans-Serif !important;
            font-size: 13px !important;
            margin-left: 14px !important;
            margin-top: 15px !important;
            float: left !important;
            color: #d9d9d9 !important;
        }
    </style>
    <script type="text/javascript">       
     var realtime_status = false;
        function load() {
            if (realtime_status) {
                $('#rt_status').jqxSwitchButton({ height: 18, width: 65, theme: 'custom', checked: true });
            } else {
                $('#rt_status').jqxSwitchButton({ height: 18, width: 65, theme: 'custom', checked: false });
            }
        }
        $(document).ready(function () {
            load();
            $('#rt_status').bind('change', function (event) {
                if ($('#rt_status').jqxSwitchButton('checked')) {
                    if (!confirm("Really want to deactivate?")) {
                        alert('ok, gotta ckeck it back then...');
                        $('#rt_status.jqx-switchbutton').jqxSwitchButton('checked', true);
                        $('#rt_status.jqx-switchbutton').jqxSwitchButton('_switchButton', true);
                    }
                } else {
                    if (!confirm("Really want to activate?")) {
                        alert('ok, gotta unckeck it back then...');
                        $('#rt_status.jqx-switchbutton').jqxSwitchButton('checked', false);
                        $('#rt_status.jqx-switchbutton').jqxSwitchButton('_switchButton', false);
                    }
                }
            });
        });
    </script>
    <div id="rt_status"></div>
</body>
</html>

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LuiginoParticipant]

Hello again Peter,

it works… but not really because I think the _switchButton will fire the bind again, indeed it shouldn’t fire it… just only change css state button back to previous state…

Thanks
Ciao
Luigi

[Peter StoevKeymaster]

Hi Luigi,

It is a correct behavior the Switch Button to trigger the ‘change’ events when the checked state is changed. It depends on your logic whether the event would be handled or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LuiginoParticipant]

Hi again,

ah ok, as workaround in fact I am using a true/false’s global variable so I won’t just fire again…

Thanks
Luigi

[LuiginoParticipant]

Hello Peter,

I saw there’s a 2.2 version online… does that version release have the ‘check’/’uncheck’ fixed? Would those properties just change state without fire the toggle/change?

Thanks again!
Cheers,
Luigi

[Peter StoevKeymaster]

Hi Luigi,

Firing the Events when the Button’s State is changed either via mouse click or through the API is a correct behavior. That’s the purpose of the events – they occur when there’s some event like a change in a state. Regarding the new version, I suggest you to try it as it includes many new features and improvements in all widgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LuiginoParticipant]

hello Peter,

after two years I am picking this thread back because I recently updated library to 3.1.0 and I noticed the piece of code

     $('#rt_status.jqx-switchbutton').jqxSwitchButton('checked', true);
      $('#rt_status.jqx-switchbutton').jqxSwitchButton('_switchButton', true);

doesn’t work anymore, even it says _switchButton is invalid. Isn’t there yet the possibility to set current state without firing the bind ‘checked unchecked’ event?

Thanks in advance
Cheers,
Luigi

[Author]

Posts