jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton jqxSwitchButton Checked-Unchecked

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • 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

    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/

    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

    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/

    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.

    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/

    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.

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

You must be logged in to reply to this topic.