jqxInput change event with strange behavior

[cblinParticipant]

Hello,

Given the following code

$(‘<input type=”text” />’).jqxInput({
displayMember: ‘name’,
valueMember: ‘id’,
source: function (query, response) {
var url = ‘http://localhost:90/test’;
var data = { name: query};
$.getJSON(url, data, function (res) {
response(res);
});
}
}).on(‘change’, function (event) {
var jqxVal = this.options.field.jqxInput(‘val’);
console.log(jqxVal);
});

In the input, I type something like ‘Al’ => the server answers [{id:1,name:’Al’}, …] => the automcplete is displayed and I select the value => every thing is finely displayed in the console

Now, I replace the selected label by ‘YYY’ => the server answers [] => the value displayed in the console remains the old value

Last strange thing, if now I replace with ” => the value displayed in the console is ” (which is correct)

I investigate this further with http://jsfiddle.net/jqwidgets/eDLAw/
=> the problem is not reproductible here, neither with other samples where the source is fully loaded in memory

Does someone have any idea about the problem I am facing ?

[HristoParticipant]

Hello cblin,

If I understand correct.
I would like to recommend to use that way

var value = $("#input").jqxInput('val');
 console.log(value);

in ‘change’ event or var value = $('#input').val();

Because ‘this.options.field.jqxInput(‘val’);’ is not defined above.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[cblinParticipant]

Hi Hristo,

sorry, this is a bad copy-paste from my code.

I still have the described problem with $(‘#input’).

The problem is that if the last query did not match anything, the value of the field is the previous one (instead of the currently typed value).

The problem seems to occur only if the source is not an array of primitive, but an array of object.

[HristoParticipant]

Hi cblin,

Please take a look this example: http://jsfiddle.net/jqwidgets/nC7GR/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[cblinParticipant]

Hi Hristo,

this is the perfect sample to demonstrate my problem !

here is my sample demonstrating the bug : http://jsfiddle.net/L4kt9uz5/

1. Type Ana, press enter
=> the value displayed is Ana, which is fine
2. Type Y, press enter
=> the value displayed is still Ana, which is NOT fine at all !

[HristoParticipant]

Hi cblin,

Please take a look this example: http://jsfiddle.net/g4bes4t4/
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[cblinParticipant]

Hi Hristo,

thanks for your efforts but this does not help me.

The problem is not really the change event but the fact that the val method returns a plain wrong value.
The problem is that visually the field displays “Y” (so as far as the user is concerned, this is what the field value is) but when you ask the field value it says {value: “xxx”, label: “xxx”}.

For example, the problem becomes really a problem when you submit a form with this field.
The user thinks that “Y” will be submitted (or eventually I could display an error message saying that he has selected nothing).
The problem is that the code thinks that a value has been selected and send it to the backend.
Thus the user sees a bad value in the field and does not understand what has happened !

In other words, the code has no way to detect that the field value does not match what the user sees !

[HristoParticipant]

Hello cblin,

Thanks for your question.
val return only displayMember and valueMember as an object.
That do not matter with value that return the server.
val returns an object only when displayMember and valueMember are set.
However, only the value is submitted to the server, not the object.
One way to handle with this issue is through code as mentioned above.
Another way by backend and expect a concrete result (or default) that will be visualizated.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[cblinParticipant]

Hello hristo,

I am going to rephrase my problem differently to explain that the backend is not involved in the problem

The scenario is the following :
1. backend sends fieldValue = {value:1, label:”Ana”}
2. the code fills the value of the field => OK
2. the user types Y in the field
3. the user clicks submit
4. the code takes the value of the field and send it to the backend => the code will wrongly send {value:1, label:”Ana”} but this is not what the user sees in the field …

How to detect that was is currently visible in the field is not the same as the val of the field so that the code is not sending an “absurd” value ?

Maybe this is with the on change event, the on select event, the val function or anythning else, but I am not able to see it right now …

[Peter StoevKeymaster]

Hi cblin,

Let me explain 1 simple thing – jqxInput cannot send to the backend an Object, it always sends the Value displayed in the Input field.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cblinParticipant]

I perfectly understand that jqxInput does not send anything to the backend.

I also perfectly understand that if I use an input inside a HTML form it will work since HTML will only send the value of the input as you said.

What I mean (from the beginning) is that if you do $(“#field”).val() that will NOT tell the you the value of the input.

I tried to demonstrate the problem inside a fiddle but here is another attempt, not involving the backend or jquery or anyting but jqxinput.

Take a look at http://jsfiddle.net/pw446xt9/1/

1. Type Ana, press enter
2. click on the button : the value displayed is {value:”xxx”, label:”xxx”}, which is fine
3. Type Y, press enter
4. click on the button : the value displayed is still a complex object, which is IMHO NOT fine at all (event the underlying input contains Y but the val function does not seem to care about this) !

Hope this helps to clarify the situation

[Peter StoevKeymaster]

Hi cblin,

val is a method implemented by us an it contains the selected value which could be Object or Text depending on whether displayMember and valueMember are set or not. That does not affect what you send to your backend at all. May be you have an issue with getting the text from jqxInput. If that is the issue, then you can use $(“#input”)[0].value because each HTML Input has Value member.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cblinParticipant]

Hi peter,

I understand what the val function does, I just do not understand why calling it can return something that is inconsitent with the underlying input value.

In my code, I extensively use the val function for all fields and this is the first time I notice such a problem.

Here, my problem is that I do not manage to “invalidate” the jqxInput when the user has typed something that is not a “real” value.

From what you siad, and after many tres, I must do something like this to make it work

var el = $(“#input”)
var val = el.val();
if (val && val.label) {
//according to jqxInput, the user has selected something (since an object with a value and a label is returned)
//problem is that sometimes this not really true, let’s check the underlying DOM …
var underlyingInputVal = el[0].value;
if (val.label != underlyingInputVal) {
//seems that jqxInput.val is inconsistent with underlying input
//let’s pretend that the user selected nothing
val = ”;
}
} else if (val && ! val.label) {
//jqxInput says that there si a value but this is not a value selected in the dropdown since this is not an object
//so we discard it
val = ”;
}

Is not this awkward to you ? To me, it is since the documentation of the val function clearly states that it returns the value of the field which is not really true…

see http://jsfiddle.net/pw446xt9/3/

[Peter StoevKeymaster]

Hi cblin,

You can very easily get the Value displayed in the input using $(“#input”)[0].value and you can very easily get the Object using the val() method $(“#input”).val().

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts