jqxSlider problem

[andreaParticipant]

Hello, I’m using jQWidgets with Angular 2 and I have a problem with the jqxSlider when it is inside an element that is not visible initially, for example inside jqxTabs or in a div that has style=’display:none’.
It works instead if the jqxSlider is in the first tab or inside a visible element.
Is there a workaround ?

Here is my setup:

Jquery version: 1.11.1
jQWidgets version: 4.5.0
Angular version: 2.1.1
Typescript version: 2.0.6
OS version: Ubuntu 16.04
Browser: Google Chrome version 55.0.2883.87 (64-bit)

Example:

<jqxTabs #tabsReference
     [width]='"400"' [height]='180' [position]='"top"'
     [animationType]='"none"' [selectionTracker]='false'>
    <ul>
        <li style="margin-left: 30px;">TEST 1</li>
        <li>TEST 2</li>
    </ul>
    <div>
         Test 1 content
    </div>
    <div>
	   <jqxSlider
		[height]='60' [min]='0' [max]='100'
		[value]='25' [mode]='"fixed"' [tooltip]='true'
		[showTickLabels]='true' [ticksFrequency]='25'>
	    </jqxSlider>
    </div>
</jqxTabs>

The browser shows the following errors and the slider does not appear on the page:

core.umd.min.js:28 EXCEPTION: c._helpers.element.sizeChanged is not a function
ErrorHandler.handleError @ core.umd.min.js:28
next @ core.umd.min.js:35
generatorOrNext.object.schedulerFn @ core.umd.min.js:35
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.min.js:35
NgZone.triggerError @ core.umd.min.js:35
onHandleError @ core.umd.min.js:35
e.handleError @ zone.min.js:1
n.runTask @ zone.min.js:1
invoke @ zone.min.js:1
n.args.(anonymous function) @ zone.min.js:1
core.umd.min.js:28 

ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.min.js:28
next @ core.umd.min.js:35
generatorOrNext.object.schedulerFn @ core.umd.min.js:35
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.min.js:35
NgZone.triggerError @ core.umd.min.js:35
onHandleError @ core.umd.min.js:35
e.handleError @ zone.min.js:1
n.runTask @ zone.min.js:1
invoke @ zone.min.js:1
n.args.(anonymous function) @ zone.min.js:1
core.umd.min.js:28 

TypeError: c._helpers.element.sizeChanged is not a function
    at a.(anonymous function).createInstance (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxslider.js:6:6105)
    at Object.a.jqx.applyWidget (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:24335)
    at HTMLDivElement.<anonymous> (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:28555)
    at Function.each (https://127.0.0.1:8443/cncloud-web/scripts/jquery-3.1.1.min.js:2:2815)
    at r.fn.init.each (https://127.0.0.1:8443/cncloud-web/scripts/jquery-3.1.1.min.js:2:1003)
    at r.fn.init.a.fn.(anonymous function) [as jqxSlider] (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:28490)
    at Object.createInstance (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:17964)
    at jqxSliderComponent.createComponent (https://127.0.0.1:8443/cncloud-web/jqwidgets-ts/angular_jqxslider.ts!transpiled:103:51)
    at eval (https://127.0.0.1:8443/cncloud-web/jqwidgets-ts/angular_jqxslider.ts!transpiled:46:35)
    at e.invokeTask (https://127.0.0.1:8443/cncloud-web/node_modules/zone.js/dist/zone.min.js:1:15126)
ErrorHandler.handleError @ core.umd.min.js:28
next @ core.umd.min.js:35
generatorOrNext.object.schedulerFn @ core.umd.min.js:35
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.min.js:35
NgZone.triggerError @ core.umd.min.js:35
onHandleError @ core.umd.min.js:35
e.handleError @ zone.min.js:1
n.runTask @ zone.min.js:1
invoke @ zone.min.js:1
n.args.(anonymous function) @ zone.min.js:1
Subscriber.ts:241 

Uncaught TypeError: c._helpers.element.sizeChanged is not a function
    at a.(anonymous function).createInstance (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxslider.js:6:6105)
    at Object.a.jqx.applyWidget (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:24335)
    at HTMLDivElement.<anonymous> (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:28555)
    at Function.each (https://127.0.0.1:8443/cncloud-web/scripts/jquery-3.1.1.min.js:2:2815)
    at r.fn.init.each (https://127.0.0.1:8443/cncloud-web/scripts/jquery-3.1.1.min.js:2:1003)
    at r.fn.init.a.fn.(anonymous function) [as jqxSlider] (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:28490)
    at Object.createInstance (https://127.0.0.1:8443/cncloud-web/jqwidgets/jqxcore.js:8:17964)
    at jqxSliderComponent.createComponent (https://127.0.0.1:8443/cncloud-web/jqwidgets-ts/angular_jqxslider.ts!transpiled:103:51)
    at eval (https://127.0.0.1:8443/cncloud-web/jqwidgets-ts/angular_jqxslider.ts!transpiled:46:35)
    at e.invokeTask (https://127.0.0.1:8443/cncloud-web/node_modules/zone.js/dist/zone.min.js:1:15126)
createInstance @ jqxslider.js:6
a.jqx.applyWidget @ jqxcore.js:8
(anonymous) @ jqxcore.js:8
each @ jquery-3.1.1.min.js:2
each @ jquery-3.1.1.min.js:2
a.fn.(anonymous function) @ jqxcore.js:8
createInstance @ jqxcore.js:8
jqxSliderComponent.createComponent @ angular_jqxslider.ts:135
(anonymous) @ angular_jqxslider.ts:72
e.invokeTask @ zone.min.js:1
onInvokeTask @ core.umd.min.js:35
e.invokeTask @ zone.min.js:1
n.runTask @ zone.min.js:1
invoke @ zone.min.js:1
n.args.(anonymous function) @ zone.min.js:1

[Ivo ZhulevParticipant]

Hi Andrea,

The appropriate way to create the Widget within the Tabs is to use “initTabContent” callback of the jqxTabs. Please, take a look at this example:

import { Component, ViewChild, AfterViewInit, ElementRef } from ‘@angular/core’;

import { jqxTabsComponent } from ‘../../../../../jqwidgets-ts/angular_jqxtabs’;
import { jqxSliderComponent } from ‘../../../../../jqwidgets-ts/angular_jqxslider’;

@Component({
selector: ‘my-app’,
template: `
<jqxTabs #tabsReference
[initTabContent]=’initWidgets’
[width]='”400″‘ [height]=’height’ [position]='”top”‘
[animationType]='”none”‘ [selectionTracker]=’false’>
<ul>
<li style=”margin-left: 30px;”>TEST 1</li>
<li>TEST 2</li>
</ul>
<div>
Test 1 content
</div>
<div>
<div id=’jqxSlider’></div>
</div>
</jqxTabs>
`
})

export class AppComponent implements AfterViewInit {
@ViewChild(‘tabsReference’) myTabs: jqxTabsComponent;

height: number | string = ‘50%’;

initWidgets(tab) {
switch (tab) {
case 0:
console.log(‘tab0’);
break;
case 1:
console.log(‘tab1’);

var slider = new jqxSlider(‘#jqxSlider’, {
height: 60,
min: 0,
max: 100,
value: 25,
mode: ‘fixed’,
tooltip: true,
showTickLabels: true,
ticksFrequency: 25
});
break;
}
};

ngAfterViewInit(): void {
// Do something
}
}

Best Regards,
Ivo

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

[Ankit ShahParticipant]

Hi JQWidget team,

I am facing the same problem when implementing with Angular 1.6 and JQWidget 4.5.1.

This lead us to correct, change and test every screen where Slider control is used, which was working with previous versions of JQWidgets.

Issue is resolved while creating the sliders after we create its container. However, as a part of diagnosis, I searched for the “sizeChanged” function and I didn’t find it anywhere in all jqx.*.js files. _helpers seems to be part of JQXHelpers defined in jqx.Core.js file, but I cannot find this function in jqxCore file.

Can you please let me know how and why this function exists, I mean usage of this function during creation of control? Also, is there any plan to provide a patch/hotfix to the problem?

Thanks,
–Ankit Shah

[Peter StoevKeymaster]

We are unable to reproduce he mentioned behavior with our Slider.

[Ankit ShahParticipant]

Hi Peter,
Below is the code that reproduce the issue.
HTML

<!DOCTYPE html>
<HTML ng-app="demoApp">
	<HEAD>
	</HEAD>
	<BODY>
	    <div ng-controller="demoController">
	       <jqx-button id="jqxButton" jqx-settings="buttonSettings" >Click </jqx-button>
	        
	    <jqx-window id="expressionVisualizerWindow"  jqx-create="createExpressionVisualizerWindow" 
            jqx-settings="WindowSettings">
	        <div id="WindowHeader"></div>
            <div id="WindowContent">
	            
	            <jqx-slider jqx-settings="widthSliderSettings" ng-model='value' jqx-create='createWidget'></jqx-slider>
	            
	        </div>
	  </jqx-window>
	    
       
    </div>
	</BODY>
</HTML>

JavaScript:

var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) { 
            $scope.value = 20;
            $scope.createWidget = false;
            $scope.createExpressionVisualizerWindow = false;
           
            initializeButtonSettings();
            initializeExpressionVisualizerWindowSettings();
            initializeSliderSettings();
            
            
            function initializeExpressionVisualizerWindowSettings() {
            // Visualizer Expression Window
            $scope.WindowSettings = {
               // maxHeight: '95%',
               // maxWidth: '95%',
                width: '300px',
                height: '200px',
                isModal: false,
                resizable: false,
                autoOpen: false,
                title: 'Expression Parse Tree',
                initContent: function(){
                  
                }
                
            };
            $scope.createExpressionVisualizerWindow = true;
        }
            
        function initializeSliderSettings(){    
            $scope.widthSliderSettings = {
                 tooltip: true,
                mode: 'fixed',
                width: '220px',
                height: '25px',
                min: 10,
                max: 50,
                step: 5,
                ticksPosition: 'bottom',
                ticksFrequency: 5,
                value: $scope.value,
                
            };
              $scope.createWidget = true;
        }
        function initializeButtonSettings(){    
            $scope.buttonSettings = {
                width: '200px',
                click: function(event){
                    $scope.WindowSettings.apply('open');
                    
                }
                
            };
        }
        });

On F12- Developer tools, we will get error as mentioned by Andrea.p in initial post.
If we move “initializeSliderSettings()” inside initContent of window, then issue is resolving.
My question was more towards issue we are getting in Console panel of F12 developers tools. I searched through all the jqWidget js files and not able to find the location where the “sizeChanged” function is defined.

[Peter StoevKeymaster]

You should always create it within initContent and the problem is that it is not. initContent ensures the right moment to create the widget. It’s like document.ready for jQuery.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Ankit ShahParticipant]

Hi Peter,
Yes, I agree on that. But issue I want to point is “sizeChanged()” which appears in the error could not be found anywhere within all jqx*.js files.

[Peter StoevKeymaster]

It’s an issue when it’s not used correctly so it’s like putting a petrol inside a diesel car and asking why it does not work.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Ganapathi004Participant]

I got this issue when the width property is given in percentages. Example: [width]="'5%'" instead of [width]="120"

[pkParticipant]

The bug is still there, and it’s easy to reproduce.
The bug: “When jqxSlider is inside an element that is not visible initially, it fails to be created”.

PS: Ankit and I try to help pinpoint the issue and fix the issue, I am still amazed at replies like “it’s an issue when it’s not used correctly”.
PS2: What Ankit found is true: the _helpers.element.sizeChanged(function(){ branch is a dead code branch, with no “sizeChanged” function in all of jqx.

[adminKeymaster]

Hi,

‘created’ event of the Slider is still not working in the current version. For the upcoming 13.3.0 it will be resolved.
‘sizeChanged’ was part of API for Web Components 1.0 using jQWidgets. It is deprecated.
initContent methods for Window and Tabs are built with the purpose to create the components inside that function. jqxSlider and not only will not be created, when they are in a window or tabs, if initContent is not used. The reason is that Tabs & Window create their content and containers dynamically and after the container is created, then initContent is called and within initContent you can create your components and their logic.

P.S. The topic is quite old, I was younger then and I am a bit ashamed by my response in this thread.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[pkParticipant]

For anyone still interested in this 7 year old bug:
Repro (version 18.0.0): https://jsfiddle.net/38gy6s70/
Fix: https://jsfiddle.net/u78bc5jp/

TL;DR version: search for “SIZECHANGED” in the fixed version. Code is from official download of jq widgets (jqxslider.js), after it ran through JS beautifier.

[tmccarthy12345Participant]

Has this issue been fixed for the jqxSlider angular component? i have tried using several versions (17.0.0 – 20.0.0) with no success. I continually get the ‘c._helpers.element.sizeChanged is not a function’ error.

[tmccarthy12345Participant]

Hello – can we please get a fix for this, or suggestions on how to handle? I know this was supposedly fixed in v14.0, but still in v18.0 I am encountering the same issue.

[adminKeymaster]

Hi,

Not sure how to reproduce this in the current version, but we added an additional check within our code base for this for the next release in order to avoid this situation in any case.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts