jQWidgets Forums

Tagged: angularjs dialog, angularjs window

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

JqxWindow Posts
December 24, 2014 at 9:26 am JqxWindow #64636

rani
Participant

I have placed two jqx-buttons and two jqx-windows in one ng-controller. When we click on button respective window should open.

<div ng-controller=’jqdatapickcomboController’>

<jqx-button jqx-settings=”settings” jqx-on-click=”showWindow()”> Add</span></jqx-button>
<jqx-button jqx-settings=”settings” jqx-on-click=”deleteRow()”>Delete</span></jqx-button>

<jqx-window jqx-settings=”jqxAddSettings”>
<div>
Modal Window
</div>
<div>
<div>
Please click “OK”, “Cancel” or the close button to close the modal window. The dialog result will be displayed in the events log.
</div>
<div>
<div style=”float: right; margin-top: 15px;”>
<jqx-button jqx-on-click=”Ok()””>Ok</jqx-button>
<jqx-button jqx-on-click=”Cancel()”>Cancel</jqx-button>
</div>
</div>
</div>
</jqx-window>

<jqx-window jqx-settings=”jqxDeleteSettings”>
<div>
Modal Window
</div>
<div>
<div>
Delete Record
</div>
<div>
<div>
<jqx-button jqx-on-click=”Ok()”>Ok</jqx-button>
</div>
</div>
</div>
</jqx-window>

</div>

In controller, I have initialized respective windows settings and called the respective windows under the respective button clicks.
<script>
demoApp.controller(“jqdatapickcomboController”, function ($scope, $http) {

$scope. jqxAddSettings = {
maxHeight: 160, maxWidth: 500, minHeight: 30, minWidth: 250, height: 160, width: 500, theme: ‘arctic’,
resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
};
$scope. jqxDeleteSettings = {
maxHeight: 200, maxWidth: 800, minHeight: 30, minWidth: 250, height: 200, width: 800, theme: ‘arctic’,
resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
};

$scope.showWindow = function () {
$scope. jqxAddSettings.apply(‘open’);
}

$scope.deleteRow = function () {
$scope. jqxDeleteSettings.apply(‘open’);

}
}
</script>

Issue: The issue is the window which is mentioned last in the body (i.e., jqxDeleteSettings)is displaying on both button click’s. Actually it should display ‘jqxAddSettings’ window for add button and ‘jqxDeleteSettings‘ window for delete button.

December 24, 2014 at 9:37 am JqxWindow #64645

Peter Stoev
Keymaster

Hello rani,

Provide a full sample prepared with jQWidgets 3.6, in order to test your scenario. The information is insufficient for testing here.

Best Regards,
Peter Stoev

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

December 24, 2014 at 12:35 pm JqxWindow #64658

rani
Participant

Hi Peter,

I have created a sample application with two jqx-button’s and two jqx-window’s .When we click on first button, first window should open and when we click on second button,second window should open.But,in our case second window is opening for both button clicks.

please find the sample application(“jqxWindowPopup/demos/WinowPopup/Index.html”) from the below url.

http://182.72.253.86\Downloads/jqxWindowPopupSample.zip

Best Regards,
Rani.

December 24, 2014 at 1:31 pm JqxWindow #64664
Peter Stoev
Keymaster
Hello Rani,

Updated and working code below:
```
<html ng-app="dataLists">
<head>
    <link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet" />
 	<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
   
    <script src="../../jqwidgets/jqxdata.js"></script>
    <script src="../../jqwidgets/jqxbuttons.js"></script>
    <script src="../../jqwidgets/jqxcheckbox.js"></script>
    <script src="../../jqwidgets/jqxscrollbar.js"></script>
    <script src="../../jqwidgets/jqxpanel.js"></script>
    <script src="../../jqwidgets/jqxtabs.js"></script>
    <script src="../../jqwidgets/jqxwindow.js"></script>
    <script src="../../jqwidgets/jqxangular.js"></script>
</head>

<body>
    <div ng-controller='jqdatapickcomboController'>
        
        <jqx-button jqx-on-click="OpenFirstWindow()">Open Window1</jqx-button>
        <jqx-button jqx-on-click="OpenSecondWindow()">Open Window2</jqx-button>
      
        <jqx-window jqx-settings="jqxFirstWindowSettings" hidden>
			<div>
			Title 1
			</div>
			<div>
			 This is Window 1
			</div>
        </jqx-window>
        <jqx-window jqx-settings="jqxSecondWindowSettings" hidden>
			<div>
			Title 2
			</div>
			<div>
			 This is Window 2
			</div>
        </jqx-window>
    </div>

</body>
</html>
<script>
    var value;
    var demoApp = angular.module("dataLists", ["jqwidgets"]);
    demoApp.controller("jqdatapickcomboController", function ($scope, $http) {
        var w1, w2;
		$scope.jqxFirstWindowSettings = {
			created: function(args)
			{
				w1 = args.instance;
			},            maxHeight: 160, maxWidth: 300, minHeight: 30, minWidth: 250, height: 160, width: 300, theme: 'arctic',
            resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
        };
        $scope.jqxSecondWindowSettings = {
			created: function(args)
			{
				w2 = args.instance;
			},
            maxHeight: 160, maxWidth: 800, minHeight: 30, minWidth: 250, height: 160, width: 800, theme: 'arctic',
            resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
        };
        $scope.OpenFirstWindow = function () {
            w1.open();
        }
        
        $scope.OpenSecondWindow = function () {
            w2.open();
        }     
    });

</script>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
December 26, 2014 at 5:58 am JqxWindow #64708

rani
Participant

Hello Peter,

I am getting the following error in my application while using JQWidgets v3.6.

“TypeError: G is undefined” in jqxangular JS file.

Its working fine using JQWidgets v3.5.

Best Regards,
Rani.

December 26, 2014 at 3:26 pm JqxWindow #64710

Peter Stoev
Keymaster

Hello Rani,

Try the sample I posted you. It does not give any errors.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.