jQWidgets Forums

This topic contains 9 replies, has 3 voices, and was last updated by lqbweb 9 years, 4 months ago.

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

Author

jqWidgets inside ngInclude Posts

January 15, 2015 at 5:38 am jqWidgets inside ngInclude #65394

Participant

jqWidget directives (i.e., <jqx-button>My Button Here</jqx-button>) are not initializing when included directly inside of an ngInclude template.

The same jqWidget directives work fine outside the ngInclude
My own custom directives work fine inside the ngInclude
jqWidget directives work fine inside of my custom directives that are inside the ngInclude
BUT when the jqWidgets directives are included directly in the ngInclude file, they do NOT initialize
Preloading the ngInclude template into cache does not help

Can anyone enlighten me on what’s going on?

January 15, 2015 at 6:30 am jqWidgets inside ngInclude #65396

Peter Stoev

Keymaster

Hi Fire613,

Please, share a small sample with the current version which illustrates an issue on our side.
A possible reason is that your template file or the file you’re loading the widgets in is missing references to required javascript files. I suppose that if you put Error Log in your app, you will see something in the browser’s console.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2015 at 6:36 am jqWidgets inside ngInclude #65399

Peter Stoev

Keymaster

Hi Fire613,

working sample with ng-include below:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var DemoApp = angular.module("demoApp", ["jqwidgets"]);

        DemoApp.controller("MainController", function ($scope) {

            $scope.FilterSplit = {
                width: '100%',
                height: 819,
                orientation: 'horizontal',
                showSplitBar: true,
                panels: [{
                    size: '90%',
                    collapsible: false
                }, {
                    size: '10%',
                    collapsible: false
                }]
            };
        });

        DemoApp.controller("SecondController", function ($scope) {
            $scope.pendingQuotegridsettings = {
                width: '98%',
                autoheight: true,
                showheader: true,
                theme: $scope.theme,
                columns: [{
                    text: 'Bank',
                    datafield: 'bank',
                    width: '70'
                }, {
                    text: 'Currency Pair',
                    datafield: 'Currencypair',
                    width: '165'
                }, {
                    text: 'Value Date',
                    datafield: 'ValueDate',
                    width: '130',
                }, {
                    text: 'Buy/Sell',
                    datafield: 'BuySell',
                    width: '105',
                }, {
                    text: 'Amount',
                    datafield: 'Amount',
                    width: '110',
                }, {
                    text: 'Rate',
                    datafield: 'Rate',
                    width: '65',
                }, {
                    text: 'OrderRefNo',
                    datafield: 'OrderRefNo',
                    width: '140',
                }, {
                    text: 'Active Time(in sec)',
                    datafield: 'activetime',
                    width: '245',
                }, {
                    text: 'Status',
                    datafield: 'Status',
                    width: '90',
                }, {
                    text: 'Options',
                    datafield: 'Options',
                    width: '110',
                }]
            };

            $scope.activeOrdergridsettings = {
                width: '98%',
                autoheight: true,
                showheader: true,
                theme: $scope.theme,
                columns: [{
                    text: 'Currency Pair',
                    datafield: 'Currencypair',
                    width: '155'
                }, {
                    text: 'Bank',
                    datafield: 'bank',
                    width: '70'
                }, {
                    text: 'OrderRefNo',
                    datafield: 'OrderRefNo',
                    width: '130',
                }, {
                    text: 'ExcRefNo',
                    datafield: 'ExcRefNo',
                    width: '130',
                }, {
                    text: 'FillType',
                    datafield: 'FillType',
                    width: '75',
                }, {
                    text: 'Product',
                    datafield: 'Product',
                    width: '75',
                }, {
                    text: 'Value Date',
                    datafield: 'ValueDate',
                    width: '120',
                }, {
                    text: 'Buy/Sell',
                    datafield: 'BuySell',
                    width: '105',
                }, {
                    text: 'Amount',
                    datafield: 'Amount',
                    width: '110',
                }, {
                    text: 'Rate',
                    datafield: 'Rate',
                    width: '65',
                }, {
                    text: 'Status',
                    datafield: 'Status',
                    width: '90',
                }, {
                    text: 'Options',
                    datafield: 'Options',
                    width: '110',
                }]
            };
        });
    </script>
</head>
<body>
    <div ng-controller="MainController">
		<jqx-splitter jqx-settings="FilterSplit">
		<div>
			<div ng-include src="'SecondPage.html'"></div>
		</div>
		<div>
		        <div ng-include src="'ThirdPage.html'"></div>
		</div>
		</jqx-splitter>
	</div>
</body>
</html>

SecondPage.html

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
<!-- CSS & JS files -->
</head>
<body ng-controller="SecondController">
	<div>
		<jqx-tabs jqx-width="'100%'" jqx-height="'200px'" jqx-theme="theme">
		<ul>
			<li style="margin-left: 30px;">Pending Quote Confirmation</li>
			<li>Active Order Book</li>
		</ul>
		<div>
			<div style="margin: 15px;">
				<jqx-grid jqx-settings="pendingQuotegridsettings" ></jqx-grid>
			</div>
		</div>

		<div>
			<div style="margin: 15px;">
				<jqx-grid jqx-settings="activeOrdergridsettings" ></jqx-grid>
			</div>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2015 at 2:23 pm jqWidgets inside ngInclude #65435

Fire613

Participant

Your example puts a new ngApp directive inside of the ngInclude’d file. ngInclude is mostly used for partials. You are using it to include a complete page inside of another complete page (ending up with two different html tags??), which is not right. It may work in our browsers but such practice may cause other anomalies. Feel free to enlighten me if I’m wrong.

Use the example files below to re-create a normal usage of ngInclude. Note that my own custom directives are working great, but the regular jqxButton on its own does not work directly inside the included file.

index.html


<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.darkblue.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var DemoApp = angular.module("demoApp", ["jqwidgets"]);

        DemoApp.controller("MainController", function ($scope) {

            $scope.FilterSplit = {
                width: '100%',
                height: 819,
                orientation: 'horizontal',
                showSplitBar: true,
                panels: [{
                    size: '90%',
                    collapsible: false
                }, {
                    size: '10%',
                    collapsible: false
                }]
            };
        });

		DemoApp.directive('myCustomButton', function ()
		{
			return {
				restrict: 'E',
				template: '<button>This is my custom non-jqwidget-button to prove that regular directives work</button>'
			};
		});

		DemoApp.directive('myCustomJqxButton', function ()
		{
			return {
				restrict: 'E',
				template: '<jqx-button jqx-theme="\'darkblue\'" jqx-height="75">This is my custom JQWidgets button to prove that directives with jq work</jqx-button>'
			};
		});

    </script>
</head>
<body ng-controller="MainController">

	<h1>index.html</h1>
	<jqx-button jqx-theme="'darkblue'" jqx-width="150" jqx-height="75">This Button Works</jqx-button>
	<my-custom-button></my-custom-button>
	<my-custom-jqx-button></my-custom-jqx-button>
<br/><br/><br/>
	<hr/>

	<h1>SecondPage.html</h1>
	<ng-include src="'SecondPage.html'"></ng-include>
</body>
</html>

SecondPage.html


<jqx-button jqx-theme="'darkblue'" jqx-width="150" jqx-height="75">This Button BREAKS!!!!!</jqx-button>
<my-custom-button></my-custom-button>
<my-custom-jqx-button></my-custom-jqx-button>

January 15, 2015 at 3:39 pm jqWidgets inside ngInclude #65444

Fire613

Participant

***UPDATE***

I found that if I wrap any of the jqWidget-directives in a <div> or <span> then they work! For example, here is a fixed “SecondPage.html”:


<span><jqx-button jqx-theme="'darkblue'" jqx-width="150" jqx-height="75">This Button BREAKS!!!!!</jqx-button></span>
<my-custom-button></my-custom-button>
<my-custom-jqx-button></my-custom-jqx-button>

This seems to be an issue with the jqxAngular directives, but at least this is an easy workaround. Am I missing something?

January 15, 2015 at 3:52 pm jqWidgets inside ngInclude #65446

Peter Stoev

Keymaster

Hi Fire613,

If it is an issue on our side, we’ll fix it in a future version. At present, we cannot verify such thing.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2015 at 9:17 pm jqWidgets inside ngInclude #65468

Fire613

Participant

?! How can you not verify? I guess you did not try my sample code. It proves it black and white. Here’s a screenshot:
jqxAngular bug

Please investigate for a future version… we are relying on jqxAngular more and more and I’m getting concerned about its reliability. Thank you.

January 15, 2015 at 11:08 pm jqWidgets inside ngInclude #65470

Fire613

Participant

Never mind this issue. In our tests it seems that simply wrapping everything in a DIV is working good enough. It just clutters the code a little.

January 16, 2015 at 8:28 am jqWidgets inside ngInclude #65480

Peter Stoev

Keymaster

Hi Fire613,

As I wrote, if it’s an issue on our side, we’ll fix it in a future version. We cannot verify that this is a problem with jQWidgets Framework.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 17, 2016 at 5:31 pm jqWidgets inside ngInclude #81526

lqbweb

Participant

Hello,

There seems to be an issue when I am wrapping, for example, jqxInput into my own directive.

My user case:

renderFormModule.directive('customDirective', function($compile) {
	return {
		restrict: 'E',
		replace:false,
		scope: {
			name: '='
		},

		template: '<jqx-input ng-model="name"></jqx-input>',
		
		compile: function compile(element, attrs) {
		    var child = angular.element(element[0].firstChild);
		    element.replaceWith(child);
		    
			child.removeAttr("name"); //the properties from the directive scope, we need to remove
			
			return {
			  pre: function preLink(scope, iElement, iAttrs, controller) { },
			  post: function postLink(scope, iElement, iAttrs, controller) {
				iElement.attr('name', iAttrs.name);
				iElement.attr('id', iAttrs.name + '_id');
				$compile(iElement)(scope);
			  }
			};
		}
	}
});

This seems to be exactly the same problem as in the op case.

which, can be worked around by wrapping the jqx-input in the template between a div, as:

template: '<div><jqx-input ng-model="name"></jqx-input></div>',

Does anyone knows why?

Author

Posts

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

You must be logged in to reply to this topic.