jqxSwitchButton Checked-Unchecked - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, change, checked, event, jqxSwitchButton, switch, switch button, unchecked

This topic contains 6 replies, has 4 voices, and was last updated by eshlepper 9 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

jqxSwitchButton Checked-Unchecked Posts
November 12, 2013 at 11:19 am jqxSwitchButton Checked-Unchecked #32483

shardik
Participant

Hallo,
i use the jqxSwitchButton like this sample

$(‘#jqxSwitchButton’).jqxSwitchButton({ height: 27, width: 81, theme: theme, checked: false});

$(‘#jqxSwitchButton’).on(‘checked’, function (event) {
myFuntion();
});
$(‘#jqxSwitchButton’).on(‘unchecked’, function (event) {
myFuntion();
});
function myFuntion(){
var checked = $(‘#jqxSwitchButton’).jqxSwitchButton(‘checked’);
console.log(checked);
}

A) When i check the jqxSwitchButton > true the variable is false, jqxSwitchButton > false the variable is true
B) after this action, when I call myFuntion() the var is correctly set.

My problem is on first sample 🙁

can you help me?

Shardik

November 13, 2013 at 7:46 am jqxSwitchButton Checked-Unchecked #32546
Dimitar
Participant
Hello Shardik,

The reason for this issue is because you call myFuntion before the animation has completed.

Please check out this solution, which uses the change event:
```
<!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.10.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>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxSwitchButton').jqxSwitchButton({ height: 27, width: 81, checked: true });
            $('#jqxSwitchButton').on('change', function (event) {
                console.log(event.args.check);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxSwitchButton">
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
January 23, 2014 at 11:22 am jqxSwitchButton Checked-Unchecked #48269

Luigino
Participant

Good morning,

sorry to pick this thread back…but I’d like to ask to jqWidgets developers about jqxSwitchButton which latest release 3.1.0 looks like having event ‘change’ not working anymore even with bind() or on() as you can see in this JSFiddle example…

http://jsfiddle.net/6VbfW/14/

I tried also to change jQuery/JQuery UI versions on jsfiddle but no changes…

What I could do to fix it? Is there an alternative? Or even a patch to fix ‘change’ event?

Thanks a lot in advance!

Cheers,
Luigino

January 23, 2014 at 11:46 am jqxSwitchButton Checked-Unchecked #48276
Dimitar
Participant
Hello Luigino,

Thank you for your feedback. We confirm the reported issue and will fix it as soon as possible. Meanwhile, you may bind to the checked and unchecked events, which are working fine. E.g.:
```
$('#jqxSwitchButton').bind('checked unchecked', function (event) {
    alert("You changed the state of the button");
});
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
May 27, 2014 at 6:48 am jqxSwitchButton Checked-Unchecked #54935

eshlepper
Participant

I’m having this problem, too, of the values not being synchronized with the button itself. But I don’t understand either of the solutions above.

It seems like the jqxWidgets that require a <div> rather than an <input> element are far more difficult to manipulate. They work great for straight user input, but if you try to dynamically set them to initial values, it makes the job difficult.

I’m trying to incorporate the widgets into essentially the same configuration as the demo version of the jqxGrid popup editor, so I need the field values set dynamically from the database values, rather than have new values provided by the user.

Seems like it really doesn’t want it done this way.

May 27, 2014 at 9:13 am jqxSwitchButton Checked-Unchecked #54952

Dimitar
Participant

Hello eshlepper,

Could you, please, clarify your issue. How can we reproduce the behaviour you are experiencing? Meanwhile, here is a JSFiddle example, which shows how to dynamically change the state of a switch button: http://jsfiddle.net/Dimitar_jQWidgets/95urb/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 29, 2014 at 3:22 am jqxSwitchButton Checked-Unchecked #55053

eshlepper
Participant

After much experimentation with your fiddle, and reading and re-reading the above, and see two issues that I may have had.:

1. First, using any variation of the ‘click’ event causes reverse operation. I must have been doing something like THIS Now I understand the ‘function is called before animation completes’ issue.

.on(‘click’,…
.click(….
.bind(‘click’,…
all retrieve the value before the change is effective, and so the state ends up the opposite of the . I get it now. I had to play with all the event variations to see how it worked. Thanks for the fiddle.

2. I think I may have been running into issues as well with the above-mentioned version that doesn’t process the ‘change’ event properly.

3. I worked around 10 hours straight to reach a solution that worked, and so it would be hard to back-track to find the original issue. But, I’ll watch out for it in the future and try to post any issues I find here.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.