A couple of Button Issues - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: button group, disable, disabled, jqxbuttongroup, jqxToggleButton, toggle, toggle button, toggled

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

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

Author

A couple of Button Issues Posts
July 31, 2013 at 3:27 pm A couple of Button Issues #26020

dbs222
Participant

Hi All- Have been having some unwanted issues when setting properties on buttons. The first is with the jqxButtonGroup. When I disable the button group, it will change to the disabled state, however it remains clickable. I am disabling and enabling the group depending on conditions with the program. I am using:

$(document).ready(function () {

$(“#tpViewButtGrp”).jqxButtonGroup({ theme: myTheme, mode: ‘radio’, disabled: true });

});

Condition 1:
$(“#tpViewButtGrp”).jqxButtonGroup({disabled: true });

Condition 2:
$(“#tpViewButtGrp”).jqxButtonGroup({disabled: false });

I have used:
$(“XButtGrp”).jqxButtonGroup(‘disable’/’enable’); successfully on other buttongroups, but for some reason it’s not working on this group.

The second Button issue is with the .jqxToggleButton. I am toggling this button on and off both with button clicks and programmatically. If the button is toggled off, and I turn it on programmatically, the button requires a rollover in order for the state color to change, even though the button behaves as it is toggled on.

Again:
$(document).ready(function () {

$(“#tp_toolButt”).jqxToggleButton({ toggled: false, theme: myTheme });

});

I click on the button to turn it on, and then off.
Then I change a tab elsewhere, where I need the toggle button to be toggled on:

function tabSwitch_4(active, number, tab_prefix, content_prefix) {
if(active == 1){
whichTab = 1;
$(“#tp_toolButt”).jqxToggleButton({ toggled: true});
}

This is where I need to rollover the button for the color to change, even though the button is toggled on.

Thanks for any help.

-david

August 1, 2013 at 5:23 am A couple of Button Issues #26048

Dimitar
Participant

Hello david,

We tested for the reported issues but everything works as expected. We recommend you to update to the latest version of jQWidgets (2.9.3).

Best Regards,
Dimitar

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

August 5, 2013 at 4:50 pm A couple of Button Issues #26271

dbs222
Participant

Hi Dimitar- Still trying to figure out whats going on with this issue. I did try to update to 2.9.3, but this did not help- plus it blew up other jqwidgets, in the process. I did notice on an earlier post (http://www.jqwidgets.com/community/topic/button-wrapped-in-a-div-can-be-clicked-even-if-disabled/#post-12752) that someone else was having a similar issue with buttons still be clickable even though they were disabled. The recommendation was not to wrap the button in a div, but to use either button or input instead. My issue is with a buttongroup, which looks to me to be created from a div, which contains the buttons of the group. Wondering if you could point be in the correct direction to troubleshoot this to resolution. Thanks! -david

Here is the HTML:

Offending widget is: tpViewButtGrp

input type=”button” value=”RESET” id=’resetButton’ />

Here is the JQ:

$(“#tpViewButtGrp”).jqxButtonGroup({ theme: myTheme, mode: ‘radio’});

$(‘#tpViewButtGrp’).jqxButtonGroup(‘setSelection’, 0);
$(“#tpViewButtGrp”).jqxButtonGroup({ disabled: true });

August 6, 2013 at 4:55 am A couple of Button Issues #26292
Dimitar
Participant
Hi david,

Here is a working example:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create jqxButton widgets.
                $("#jqxWidget").jqxButtonGroup({ theme: theme, mode: 'default', mode: 'radio' });
                $("#enable").click(function () {
                    $("#jqxWidget").jqxButtonGroup({ disabled: false });
                });
                $("#disable").click(function () {
                    $("#jqxWidget").jqxButtonGroup({ disabled: true });
                });
            });
        </script>
        <div id='jqxWidget'>
            <button style="padding: 4px 16px;" id="Left">
                Left</button>
            <button style="padding: 4px 16px;" id="Center">
                Center</button>
            <button style="padding: 4px 16px;" id="Right">
                Right</button>
        </div>
        <button id="enable">
            Enable</button>
        <button id="disable">
            Disable</button>
    </div>
</body>
</html>
```
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.