jQWidgets Forums

Tagged: jqx-window ng-include

This topic contains 10 replies, has 2 voices, and was last updated by badera 10 years, 6 months ago.

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

Author

jqx-window and ng-include Posts

January 19, 2015 at 8:50 pm jqx-window and ng-include #65633

badera

Participant

Dear jqWidgets team

It seems, that jqx-window does not work properly, if included with ng-include.

test.html:


<!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/jqx-all.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
        demoApp.controller("demoController", function($scope) {
            $scope.jqxWindowSettings = {
                height : 300,
                width : 300,
                resizable : false,
                isModal : true,
                autoOpen : false,
                modalOpacity : 0.3
            };
            $scope.showWindow = function() {
               // why does this not work? - jqx-instance=jqxWindow  is defined!
                $scope.jqxWindow.open();
                
               //this one work here below... but the above should work too...
               //$scope.jqxWindowSettings.apply('open');
            }
            $scope.Ok = function() {
                $scope.jqxWindowSettings.apply('close');
            }
            $scope.Cancel = function() {
                $scope.jqxWindowSettings.apply('close');
            }
        });
</script>
</head>
<body ng-controller="demoController" class='default'>
   <div>
       <ng-include src="'include.html'"></ng-include>
       <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
   </div>
</body>
</html>

include.html:


<jqx-window jqx-instance=jqxWindow jqx-settings=jqxWindowSettings>
    <div>Title</div>
    <div>
        My Window
    </div>
</jqx-window>

As I commented in the code, $scope.jqxWindow.open(); does not work, even jqx-instance=jqxWindow is defined.
Futhermore, the browser also displayes “Title” and “My Window” just in the page before opening the window:

I use the current version 3.6.0 of jqWidgets and the newest Chrome / Firefox browsers.
Please let me know, if this is a bug in your widgets or if I am making something wrong. Thanks in advance.
– badera

January 20, 2015 at 7:24 am jqx-window and ng-include #65654

Peter Stoev

Keymaster

Hi badera,

Have you tried wrapping it in a DIV?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2015 at 7:49 am jqx-window and ng-include #65659

badera

Participant

Dear Peter

OK, if I have:
include.html:


<div>
    <jqx-window jqx-instance=jqxWindow jqx-settings=jqxWindowSettings>
        <div>Title</div>
        <div>
            My Window
        </div>
    </jqx-window>
</div>

The Browser does no more show wrongly “Title” and “My Window” above the button; however, $scope.jqxWindow.open() does still not work! Why?
– badera

January 20, 2015 at 8:12 am jqx-window and ng-include #65662

Peter Stoev

Keymaster

Hi badera,

I don’t see a scope variable called jqxWindow in your code. Why isn’t it defined? I think that you can’t use things which are not defined.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2015 at 9:41 am jqx-window and ng-include #65669

badera

Participant

But I set <jqx-window jqx-instance=jqxWindow jqx-settings=jqxWindowSettings>

January 20, 2015 at 10:39 am jqx-window and ng-include #65674

Peter Stoev

Keymaster

Hi badera,

There is no scope variable called jqxWindow in your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2015 at 12:04 pm jqx-window and ng-include #65681

badera

Participant

I know that I do not have. But according your doc, the directive with jqx-instance=… does it.
And this is what I also often use and what is working:


<!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/jqx-all.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
        demoApp.controller("demoController", function($scope) {
            $scope.jqxWindowSettings = {
                height : 300,
                width : 300,
                resizable : false,
                isModal : true,
                autoOpen : false,
                modalOpacity : 0.3
            };
            $scope.showWindow = function() {
                $scope.jqxWindow.open();
            }
        });
</script>
</head>
<body ng-controller="demoController" class='default'>
<div>
    <jqx-window jqx-instance=jqxWindow jqx-settings=jqxWindowSettings>
        <div>Title</div>
        <div>
            My Window
        </div>
    </jqx-window>
    <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
</div>
</body>
</html>

Why does the above code work and if we extract the window to a separated file and include it with ng-include it does not?
– badera

January 20, 2015 at 12:11 pm jqx-window and ng-include #65682

Peter Stoev

Keymaster

Sorry, but according to our doc you have to initialize Empty variable: The “jqx-instance” attribute can be used for setting the widget instance in the Controller. You will have to initialize an empty object in the Controller and then set the “jqx-instance” attribute to point to it. The instance will allow you to easily invoke widget methods.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2015 at 12:38 pm jqx-window and ng-include #65683

badera

Participant

OK. I have done this. However, it does not help:

<!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/jqx-all.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
        demoApp.controller("demoController", function($scope) {

            $scope.jqxWindow = {};

            $scope.jqxWindowSettings = {
                height : 300,
                width : 300,
                resizable : false,
                isModal : true,
                autoOpen : false,
                modalOpacity : 0.3
            };
            $scope.showWindow = function() {
               // why does this not work? - jqx-instance=jqxWindow  is defined!
                $scope.jqxWindow.open();
                
               //this one work here below... but the above should work too...
               //$scope.jqxWindowSettings.apply('open');
            }
            $scope.Ok = function() {
                $scope.jqxWindowSettings.apply('close');
            }
            $scope.Cancel = function() {
                $scope.jqxWindowSettings.apply('close');
            }
        });
</script>
</head>
<body ng-controller="demoController" class='default'>
   <div>
       <ng-include src="'inc.html'"></ng-include>
       <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
   </div>
</body>
</html>

inc.html:


<div>
    <jqx-window jqx-instance=jqxWindow jqx-settings=jqxWindowSettings>
        <div>Title</div>
        <div>
            My Window
        </div>
    </jqx-window>
</div>

And by the way: as I pointed out in my previous post: without ng-include it is even not necessary to define an empty scope variable. It DOES work without.

So the basic question still remains after a lot of effort to kindly show you that there is a problem!
– badera

January 20, 2015 at 1:01 pm jqx-window and ng-include #65687

Peter Stoev

Keymaster

Hi badera,

I pointed you out one of the problems and it was related to the usage of jqx-instance in a way it is not supposed to be used, so I suggest you to always use things in the way we document them in order to avoid crashes in your code when you upgrade. About ng-include, I don’t know what the problem is. We’ll investigate it for a future jQWidgets release. If $scope.jqxWindowSettings.apply(‘open’); works for you, then use that syntax.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2015 at 1:08 pm jqx-window and ng-include #65688

badera

Participant

Dear Peter

I fully agree with you. Thanks. I hope to get it fixed in a future version, because the way over jqx-instance is nicer… and I have already a lot of such calls, which needs to be adapted in case of movement into ng-include…
– badera

Author

Posts

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

You must be logged in to reply to this topic.