[cblinParticipant]

Well, indeed it does work with jqwidgets 4.5.3 (released today) but it does NOT work with jqwidgets 4.5.2.

And you can even keep using empty() on the parent but you need to upgrade to 4.5.3 !

[cblinParticipant]

Hi peter,

Ok, it is working, thanks for your help, i have updated the jseditor for further reference

This should be noted somewhere in the doc though because it is not obivous that parent.empty() does not behave the same as parent.children().remove() when there is a rangeSelector…

[cblinParticipant]

Quote :

$(‘#chartContainer’).empty() does not remove the Chart from the DOM. It removes only its DIV tag.

Please Peter, tell me then how do I remove the chart from the DOM !
Here chartContainer is the parentDiv of the chart so I do not want to do $(‘#chartContainer’).remove()
Also, I saw no method that could be used in the chart API reference …

I’ve used this code with jqwidgets 4.0.0 and it worked so I thought it was correct (despite that in jqwidgets 4.0.0 I can not unselect the first serie as mentionned in my other post).

[cblinParticipant]

Hi Peter,

“remove it from DOM, add a new div tag and create a chart from it” is already what I am doing I think.

Here are the relevant extract from the code :

$(‘#chartContainer’).empty(); //this removes the chart from the DOM

$(‘<div style=”width:100%;height:100%”></div>’).appendTo(‘#chartContainer’).jqxChart(settings); //this adds a div inside chartContainer and creates a chart from it

Maybe there is anoter way to do it that works with jqx chart ?

Thanks for your help,

Chris

[cblinParticipant]

Hi,

is there anyone having a look at my question ?

I just need to know if this is a jqx bug or not.

I already had a problem with range selector in charts last week (http://www.jqwidgets.com/community/topic/problem-with-rangeselector-in-strange-circumstances/), and I simply start to discourage myself to use jqx charts …

[cblinParticipant]

Here is the javascript error :

Uncaught TypeError: Cannot read property ‘data’ of undefined
at a.(anonymous function)._valueToOffset (/jqwidgets/jqx-all.js:49:8651)
at a.(anonymous function)._createSliderElements (/jqwidgets/jqx-all.js:49:6675)
at a.(anonymous function)._refreshSelector (/jqwidgets/jqx-all.js:49:4164)
at a.(anonymous function)._renderXAxisRangeSelector (/jqwidgets/jqx-all.js:49:1337)
at a.(anonymous function)._render (/jqwidgets/jqx-all.js:39:17006)
at a.(anonymous function)._internalRefresh (/jqwidgets/jqx-all.js:39:4494)
at a.(anonymous function).update (/jqwidgets/jqx-all.js:39:7489)
at a.(anonymous function)._toggleSerie (/jqwidgets/jqx-all.js:39:21113)
at SVGGElement.<anonymous> (/jqwidgets/jqx-all.js:39:21469)
at SVGGElement.dispatch (/jquery-1.9.1.js:3074:9)

[cblinParticipant]

Hi Peter,

I have NOT resolved the issue !

From the moment I include all the javascript files, I have the same problem than including jqx-all.js

In my application, I use other features of jqx so I am REQUIRED to use jqx-all.js !

Please, provide additional information to solve the issue

Regards,

[cblinParticipant]

Screenshot available at https://imagebin.ca/v/3MzSpBTttWZC since it seems there is a problem with the forum to upload images

[cblinParticipant]

For those interested, https://www.jseditor.io/?key=testcandlestickserie2 is now working for a non time serie.

The key is to use ‘basic’ as x-axis type …

[cblinParticipant]

I manage to improve the jseditor a little (now a chart is displayed)

But I still do not manage to work without a time serie : https://www.jseditor.io/?key=testcandlestickserie2

[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/

[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

[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 …

[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 !

[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 !

[Author]

Posts