jqxButton({disabled: false }) is not visually displayed - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, jQuery Button

This topic contains 10 replies, has 2 voices, and was last updated by Tyl 10 years, 11 months ago.

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

Author

jqxButton({disabled: false }) is not visually displayed Posts
January 5, 2014 at 3:04 pm jqxButton({disabled: false }) is not visually displayed #47259
Tyl
Participant
Hi,

I would like to update a button ‘disable status’ depending on an input content.
But the “jqxButton({disabled: false })” or “jqxButton({disabled: true })” does nothing until the focus goes on the button.
I expected that the disable status would be immediately visible.
Is it a normal behaviour ?
```
  $("#mail_input").on('change', function () {
    var mail = $('#mail_input').val();
    var pass = $('#password_input').val();
    if ((mail != "") && (pass != "")) {
      $('#connectButton').jqxButton({disabled: false });
    }
    else {
      $('#connectButton').jqxButton({disabled: true });
    }
  });
```
January 5, 2014 at 5:38 pm jqxButton({disabled: false }) is not visually displayed #47263
Peter Stoev
Keymaster
Hi Tyl,

disabled: true, disables the button i.e the INPUT or BUTTON tag’s “disabled” attribute would be enabled and a “disabled” style would be applied. If the Button is on focus when you disable it, it will not remove the focus automatically.

Example:
```
<!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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxButton widgets.
                $("#jqxButton").jqxButton({ width: '150' });
                $("#jqxButton").jqxButton({ disabled: true });
            });
        </script>
        <input type="button" value="Button" id='jqxButton' />
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
January 6, 2014 at 9:14 am jqxButton({disabled: false }) is not visually displayed #47293

Tyl
Participant

Hi Peter,
Thank you for this quick answer.
My question was perhaps not very clear.

I have one jqxInput that have the focus while the user is typing some text inside it.
Just under it I have a jqxButton that is disabled by default.
I would like that as soon as the user types the first letter in the jqxInput, then the jqxButton becomes enabled.
So I set its ‘disabled’ property to false (on the jqxInput ‘change’ event), but nothing changes on the screen : the button remains visually disabled.

Sorry if I misunderstood your answer.

January 6, 2014 at 9:28 am jqxButton({disabled: false }) is not visually displayed #47295
Peter Stoev
Keymaster
Hi Tyl,

I think that disabled:false is never set in the provided code, so I would suggest you to debug it on your side.

Here’s another sample which shows that a Button can be disabled, then enabled again and it works correctly.
```
<!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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxButton widgets.
                $("#jqxButton").jqxButton({ width: '150' });
                $("#jqxButton").jqxButton({ disabled: true });
                $("#jqxButton").jqxButton({ disabled: false });
            });
        </script>
        <input type="button" value="Button" id='jqxButton' />
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
January 6, 2014 at 10:06 am jqxButton({disabled: false }) is not visually displayed #47296

Tyl
Participant

Thanks Peter, I will make sure that my code is correct before posting again.

January 6, 2014 at 12:11 pm jqxButton({disabled: false }) is not visually displayed #47308
Tyl
Participant
I have made a little sample and I found that the “change” event of the jqxInput widget is not triggered.
Actually it is not triggered when the user modifies the text, but it is triggered when he clicks outside the jqxInput (which is not what we usually want).
Do you reproduce this behavior ?
```
<!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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
              $('#jqxInput').jqxInput({ width: 200 });
              $('#jqxInput').on('change', function () {
                alert("Change event triggered");
              });
            });
        </script>
      <input type="input" value="Modify text" id='jqxInput' />
    </div>
</body>
</html>
```
January 8, 2014 at 2:35 pm jqxButton({disabled: false }) is not visually displayed #47545

Tyl
Participant

Were you able to reproduce the problem ?

January 8, 2014 at 3:12 pm jqxButton({disabled: false }) is not visually displayed #47551

Peter Stoev
Keymaster

Hi Tyl,

That is how the “change” event is supposed to work. It is raised when the Input is no longer on focus and the text was changed while it was on focus.

Best Regards,
Peter Stoev

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

January 9, 2014 at 3:09 pm jqxButton({disabled: false }) is not visually displayed #47632

Tyl
Participant

Hi Peter,

I understand.
But actually my goal is very simple.
I just would like that a jqxButton originally disabled becomes enabled as soon as the user types some text inside a jqxinput.
But it must be done immediately without having to put the focus out of the jqxinput.
It would probably be the purpose of a “changing” event I suppose.
Is that possible by another mean ?
If yes would you have a sample ?
If not, may be you should add this feature because (up to me) this is a very common feature for a text input.

Thank you

January 9, 2014 at 4:38 pm jqxButton({disabled: false }) is not visually displayed #47637

Peter Stoev
Keymaster

Hi Tyl,

You can bind to the “keydown” event of the jqxInput. That will be raised on each key down.

Best Regards,
Peter Stoev

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

January 10, 2014 at 7:52 am jqxButton({disabled: false }) is not visually displayed #47669

Tyl
Participant

Thank you Peter, it works perfectly (in my case it works better with keyup).
Author

Posts

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

You must be logged in to reply to this topic.