jQuery UI Widgets Forums Angular jqxSlider problem

Tagged: ,

This topic contains 10 replies, has 7 voices, and was last updated by  admin 10 months, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • jqxSlider problem #92576

    andrea
    Participant

    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
    
    
    jqxSlider problem #92616

    Ivo Zhulev
    Participant

    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/

    jqxSlider problem #92947

    Ankit Shah
    Participant

    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

    jqxSlider problem #92960

    Peter Stoev
    Keymaster

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

    jqxSlider problem #92966

    Ankit Shah
    Participant

    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.

    jqxSlider problem #92967

    Peter Stoev
    Keymaster

    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

    jqxSlider problem #92969

    Ankit Shah
    Participant

    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.

    jqxSlider problem #92973

    Peter Stoev
    Keymaster

    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

    jqxSlider problem #102092

    Ganapathi004
    Participant

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

    jqxSlider problem #121602

    pk
    Participant

    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.

    jqxSlider problem #121608

    admin
    Keymaster

    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/

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

You must be logged in to reply to this topic.