JqxInput event can't get called - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, change, disabled, event, Input, jqxButton, jqxinput, length, val, value

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

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

Author

JqxInput event can't get called Posts

May 8, 2015 at 7:48 am 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);
	        }
	        });

May 8, 2015 at 8:24 am 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/

May 8, 2015 at 8:55 am 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.

May 8, 2015 at 9:32 am 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/

May 8, 2015 at 2:39 pm 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!).

May 11, 2015 at 7:13 am 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/

May 11, 2015 at 9:14 am JqxInput event can't get called #70920

cpuin

Participant

Thank you very much Nadhezda.I appreciate your help!

May 12, 2015 at 10:58 am 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);
	            }
	        }

May 12, 2015 at 11:31 am 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/

May 12, 2015 at 11:54 am 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.

May 12, 2015 at 12:34 pm 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/

May 13, 2015 at 7:54 am 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;
‘

May 13, 2015 at 8:52 am 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

May 13, 2015 at 11:45 am 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 });
	            }    
	        }

May 13, 2015 at 12:10 pm 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

Author

Posts

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

You must be logged in to reply to this topic.