jQWidgets Forums

Tagged: Button, class, css, disabled, focus, hover, jqx-fill-state-hover, jqxButton

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 6 months ago.

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

Author

Buttons that disable itself when clicked gets bad focus state Posts
October 28, 2014 at 9:17 am Buttons that disable itself when clicked gets bad focus state #61717

luesak
Participant

Try the HTML and JS below. The scenario is we are making a button that when clicked, disables itself (like a Play button). Upon clicking stop the Play button is reenabled.

Notice that when Stop is clicked and Play is re-enabled, the Play button is focused because it has the -focus class stuck from before it disabled itself. Simply removing the class when Stop is click does not work because it seems some thing internal is tracking the focus.

HTML:
<input type=”button” value=”Play” id=’jqxButton’/> <input type=”button” value=”Stop” id=’jqxButton2’/>

JS:
$(document).ready(function ()
{
$(“#jqxButton”).jqxButton({ width: ‘150’, theme: “metrodark”});
$(“#jqxButton”).on(‘click’, function ()
{
$(“#jqxButton”).jqxButton({ disabled: true});
});
$(“#jqxButton2”).jqxButton({ width: ‘150’, theme: “metrodark”});
$(“#jqxButton2”).on(‘click’, function ()
{
$(“#jqxButton”).jqxButton({ disabled: false});
});
}

October 28, 2014 at 1:05 pm Buttons that disable itself when clicked gets bad focus state #61732
Dimitar
Participant
Hello luesak,

Here is a workaround for this issue:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.metrodark.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxButton").jqxButton({ width: '150', theme: "metrodark" });
            $("#jqxButton").on('click', function () {
                $("#jqxButton").jqxButton({ disabled: true });
                $("#jqxButton").removeClass("jqx-fill-state-hover jqx-fill-state-hover-metrodark");
            });
            $("#jqxButton2").jqxButton({ width: '150', theme: "metrodark" });
            $("#jqxButton2").on('click', function () {
                $("#jqxButton").jqxButton({ disabled: false });
                $("#jqxButton").removeClass("jqx-fill-state-hover jqx-fill-state-hover-metrodark");
                $("#jqxButton").addClass("jqx-fill-state-normal jqx-fill-state-normal-metrodark");
            });
        });
    </script>
</head>
<body class='default'>
    <input type="button" value="Play" id="jqxButton" />
    <input type="button" value="Stop" id="jqxButton2" />
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
November 3, 2014 at 3:43 am Buttons that disable itself when clicked gets bad focus state #62014

luesak
Participant

Dimitar,

I tried the code above before posting. It only appears to work but doesn’t really work because there seems to be some other thing tracking the focused state of the button. What happens is that when you move the mouse back over the button nothing happens… when it supposed to receive focus… because the button already thinks… it is in focus.

Please help!

Kim

November 3, 2014 at 8:43 am Buttons that disable itself when clicked gets bad focus state #62038

Dimitar
Participant

Hi Kim,

Yes, you are correct. Unfortunately, this is all we can offer you on the matter. The scenario of a self-disabling jqxButton is not one that is currently supported.

A suggestion you may try is have the same button for Play and Stop (maybe even use jqxToggleButton).

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.