jQuery UI Widgets Forums Editors Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader jqxButton({disabled: false }) is not visually displayed

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

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

  • 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 });
        }
      });
    

    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/


    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.


    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/


    Tyl
    Participant

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


    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>

    Tyl
    Participant

    Were you able to reproduce the problem ?


    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/


    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


    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/


    Tyl
    Participant

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

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

You must be logged in to reply to this topic.