This topic contains 14 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • JqxInput event can't get called #70834

    cpuin
    Participant

    I want to enable a button when there is some value in the jqxInput field.
    Unfortunately the state of the button remain disabled even when value is in the field.

    
    $("#company").jqxInput({height: 25, width: 300, minLength: 1});
    $("#save").jqxButton({height: 25, width: 80, disabled: true});
    	        $("#company").on("change",
    	        function () {
    	        if ($("#company").jqxInput('val').length == 0) {
    	        	$("#save").prop('disabled', true);
    	        }
    	        else {
    	        	$("#save").prop('disabled', false);
    	        }
    	        });
    
    JqxInput event can't get called #70836

    Nadezhda
    Participant

    Hello cpuin,

    You can find the following example which shows how to set ‘disabled’ property of button based on condition.
    Please, take a look at Getting Started and API Documentation help topics first and then post your question in the Forum.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxinput.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#company").jqxInput({ height: 25, width: 200, minLength: 1 });
                $("#save").jqxButton({ height: 25, width: 80, disabled: true });
                $("#company").on("change", function () {
                    if ($("#company").jqxInput('val').length == 0) {
                        $("#save").jqxButton({ disabled: true });
                    }
                    else {
                        $("#save").jqxButton({ disabled: false });
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='content'>
            <input type="text" id="company" />
            <input type="button" id="save" value="Save" />
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    JqxInput event can't get called #70840

    cpuin
    Participant

    Dear Nadhezda,

    Be sure, that you API documentation is the place where i spend my days ultimately.
    I can’t find difference between the code you posted and the one i posted.Despite of this the code you posted doesn’t work to me either.
    The button stays disabled all the time.

    JqxInput event can't get called #70844

    Nadezhda
    Participant

    Hi cpuin,

    Please, refer to the following jsfiddle.net example which demonstrates that the above example works as expected: http://jsfiddle.net/kk6rvtzp/. I hope it will work on your side.

    Best Regards,
    Nadezhda

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

    JqxInput event can't get called #70861

    cpuin
    Participant

    Dear Nadezda,

    In your documentations is written the following:

    This event is triggered when the value is changed.

    Code examples

    Bind to the change event by type: jqxInput.

    $(‘#jqxInput’).on(‘change’,
    function () { var value = $(‘#jqxInput’).val(); });

    Due to this description i set a new value like this:

    
    $("#company").jqxInput({height: 25, width: 300, minLength: 1});
    $('#company').jqxInput('val', row.Company);
    

    after that i expect when value is set the button to become enabled, like this:

    
    $("#save").jqxButton({height: 25, width: 80, disabled: true});
    	        $("#company").on("change", function () {
    	                        if ($("#company").jqxInput('val').length == 0) {
    	                            $("#save").jqxButton({ disabled: true });
    	                        }
    	                        else {
    	                            $("#save").jqxButton({ disabled: false });
    	                        }
    	                    });
    

    Nothing happens when new value has being set.In meantime i try to change the value manually and it works.
    This means that the event is not triggered when the value changes as is written, but when somebody types in the filed the value.
    Please advice.I’m trying to use this as input validation, in my case i don’t want to use the one of jqwidgets.
    How can i enable the button when new value is set to the jqxInput (it’s read only!).

    JqxInput event can't get called #70907

    Nadezhda
    Participant

    Hi cpuin,

    Here is an extended example which shows how to check the value in jqxInput when you set it dynamically: http://jsfiddle.net/f6kxqpya/. I hope it will be helpful to you.

    Best Regards,
    Nadezhda

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

    JqxInput event can't get called #70920

    cpuin
    Participant

    Thank you very much Nadhezda.I appreciate your help!

    JqxInput event can't get called #70988

    cpuin
    Participant

    Unfortunately with this code when a value is set to the $(‘#company’), the button become active, meaning when click it works, but remains grayed-out as it was disabled.

    
    $("#tableCompany").on('rowDoubleClick', function (event) {
    						         var args = event.args;
    						         var index = args.index;
    						         var row = args.row;
                                     $('#company').jqxInput('val', row.Company);
                                     
                                     var length = $("#company").jqxInput('val').length;
                                     var button = $("#save");
                                     enableDisable(length, button);
                                     
                                     //global variable
                                     companyID = row.ID;
    						         $("#selectCompanyWin").jqxWindow('close');
    						                      
    						                      
    						                 });
    
    $("#save").jqxButton({height: 25, width: 80, disabled: true});
    	        
    	        $("#company").on("change", function () {
    	        	var length = $("#company").jqxInput('val').length;
    	        	var button = $("#save");
    	            enableDisable(length, button);
    	        });
    	        
    	        
    	        function enableDisable(length, button){
    	            if (length == 0) {
    	                button.prop('disabled', true);
    	            }
    	            else {
    	                button.prop('disabled', false);
    	            }
    	        }
    
    JqxInput event can't get called #70990

    Nadezhda
    Participant

    Hi cpuin,

    Please, take a look carefully at the above posts and take out the following code from your page:

    	            if (length == 0) {
    	                button.prop('disabled', true);
    	            }
    	            else {
    	                button.prop('disabled', false);
    	            }

    Best Regards,
    Nadezhda

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

    JqxInput event can't get called #70996

    cpuin
    Participant

    Dear Nadhezda,

    I know your code, but i have 4 jqxInput widgets and i don’t know for each of them to write same code, this is the reason i try to use this function for all of them, unfortunately after reviewing both the documentation of jQuery and your can’t find soliution.

    JqxInput event can't get called #70999

    Nadezhda
    Participant

    Hi cpuin,

    Here is an example which shows how to check values in four jqxInput when you set them dynamically: http://jsfiddle.net/u5qjc7vo/. I hope it will be helpful to you.

    Best Regards,
    Nadezhda

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

    JqxInput event can't get called #71050

    cpuin
    Participant

    Thank you Nadhezda,

    I really have no idea why && doesn’t work:

    
    $("#save").jqxButton({height: 25, width: 80, disabled: true});
    	             
    	        function enableDisable(){
    	            if ($('#company').jqxInput('val').length == 0 && $('#warehouse').jqxInput('val').length == 0) {
    	                $("#save").jqxButton({ disabled: true });
    	            }
    	            else {
    	                $("#save").jqxButton({ disabled: false });
    	            }    
    	        }
    

    i also tried to get the value like this and it’s not get it:

    `
    var companyState = $(‘#company’).jqxInput(‘val’).length;

    JqxInput event can't get called #71056

    Nadezhda
    Participant

    Hi cpuin,

    Please, note that in our latest example the check for values in jqxInput is separated for each input field. With the following line of code
    if ($('#company').jqxInput('val').length == 0 && $('#warehouse').jqxInput('val').length == 0) { you will disable save button only if warehouse and company are empty in the same time.

    If this does not help you, please, provide us with full sample code including all your jqxInput initializations and html code.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com

    JqxInput event can't get called #71067

    cpuin
    Participant

    Dear Nadhezda,

    Thi is exactly what i need.I have 4 fields, and wants when even one of them is empty the button to be disabled.
    Unfortunately with the code provided below when the user set the value on the first fields the button become enabled.

    
    
    $("#tableCompany").on('rowDoubleClick', function (event) {
    						         var args = event.args;
    						         var index = args.index;
    						         var row = args.row;
                                     $('#company').jqxInput('val', row.Company);
                                     enableDisable();
                                     //global variable
                                     companyID = row.ID;
    						         $("#selectCompanyWin").jqxWindow('close');
    						                      
    						                      
    						                 });
    
    $("#tableWarehouse").on('rowDoubleClick', function (event) {
    						      var args = event.args;
    						      var index = args.index;
    						      var row = args.row;
    						      $('#warehouse').jqxInput('val', row.Name);
    						      enableDisable();
    						      //global variable
    						      warehouseID = row.ID;
    						      $("#selectWarehouseWin").jqxWindow('close');
    						                   
    						                   
    						              });
    
    $("#save").jqxButton({height: 25, width: 80, disabled: true});
    	             
    	        function enableDisable(){
    	            if ($('#company').jqxInput('val').length == 0 && $('#warehouse').jqxInput('val').length == 0) {
    	                $("#save").jqxButton({ disabled: true });
    	            }
    	            else {
    	                $("#save").jqxButton({ disabled: false });
    	            }    
    	        }
    
    
    JqxInput event can't get called #71069

    Nadezhda
    Participant

    Hi cpuin,

    Would you be able to reproduce this issue in a small JSFiddle example so that we may run your code and test it?

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.