jQuery UI Widgets Forums Plugins AngularJS jqxWindow Multiple Windows Issue

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 5 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxWindow Multiple Windows Issue #65034

    mikemazz
    Participant

    Hi,

    I’ve got two different jqxWindows that exist within the same page. Only one is shown at any given time. They both use jqx-settings which is different for each window. However, which ever one is selected first seems to be the one that continues to open regardless of which one I call the “close” method on using apply(‘open’);

    Here is a code sample from my controller. You can see that the two windows use: $scope.data.addUserSettings and $scope.data.editUserSettings

    abbControllers.controller('UsersController', function ($scope, $http, UserService, RoleService) {
        $scope.data = {};
        //$scope.users = {};
        $scope.data.tabs = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        $scope.data.selectedTab = "A";
        $scope.data.showDisabled = false;
        $scope.data.totalUsers = 0;
        $scope.data.filter = {};
        $scope.data.filter.name = "";
        $scope.data.showUserPanel = false;
        $scope.data.newUser = {};
        $scope.data.editingUser = {};
        $scope.data.newUser.userId = 0;
        $scope.data.newUser.enabled = 0;
        $scope.data.disableNewUserSubmit = false;
        $scope.data.roles = [{id: 2, name: "user"}];
        $scope.data.addUserSettings = { autoOpen: false, isModal: true, resizable: true };
        $scope.data.editUserSettings = { autoOpen: false, isModal: true, resizable: false };
        $scope.data.showEditText = -1;
        
        //I like to have an init() for controllers that need to perform some initialization. 
        init();
    
        function init() {
            console.log("init UsersController");
            $scope.createWidget = false;
            
            // now create the widget.
            var promise = UserService.getUsers();
            promise.then(
                function(payload){
                    console.log("user service returned data...");
                    $scope.data.users = payload.data;
                    console.log("Total users: " + $scope.data.users.length);
                    //console.log("Received user list: " + JSON.stringify(payload.data));
                    for (var i=0; i < $scope.data.users.length; i++ ) {
                        if (!$scope.data.users[i].hasOwnProperty("img")) {
                            $scope.data.users[i].img = "unknown.jpg";
                        }
                    }
                    $scope.createWidget = true;
                },
                function(errorPayload) {
                    $scope.data.users = {};
                    console.log("failed to users", errorPayload);
                    $scope.createWidget = true;
                }
            );
            
        }
       
        $scope.reloadUsers = function() {
            var promise = UserService.getUsers();
            promise.then(
                function(payload){
                    console.log("user service returned data...");
                    $scope.data.users = payload.data;
                    console.log("Total users: " + $scope.data.users.length);
                    for (var i=0; i < $scope.data.users.length; i++ ) {
                        if (!$scope.data.users[i].hasOwnProperty("img")) {
                            $scope.data.users[i].img = "unknown.jpg";
                        }
                    }
                },
                function(errorPayload) {
                    console.log("failed to users", errorPayload);
                }
            );
        };
    
        $scope.addUser = function () {
            $scope.data.disableNewUserSubmit = true;
            var user = $scope.data.newUser;
    
            console.log("addUser called: " + JSON.stringify(user));
            var promise = UserService.addUser(user);
            promise.then(
                function(payload){
                    console.log("user service returned data...");
                    $scope.data.newUser = payload.data;
                    $scope.data.newUser.status = 1;
                    $scope.data.users.push($scope.data.newUser);
                    $scope.data.showUserPanel = false;
                    $scope.data.disableNewUserSubmit = false;
                    $scope.addUserSettings.apply('close');
                    $scope.reloadUsers();
                },
                function(errorPayload) {
                    $scope.data.newUser.userId = -1;
                    console.log("failed to create new user", errorPayload);
                    $scope.data.newUser.status = 2;
                    $scope.data.disableNewUserSubmit = false; // re-enable button to allow resubmit
                }
            );
        };
        
        $scope.saveUser = function() {
            var user = $scope.data.editingUser;
            
            console.log("saveUser called: " + JSON.stringify(user));
            var promise = UserService.updateUser(user);
            promise.then(
                function(payload){
                    console.log("user service returned data...");
                    $scope.data.editingUser = payload.data;
                    //$scope.data.newUser.status = 1;
                    // TODO: Should update record and refresh. NO need to reload all users.
                    //$scope.data.users.push($scope.data.newUser);
                    //$scope.data.showUserPanel = false;
                    $scope.data.editUserSettings.apply('close');
                    //$scope.data.editUserWindow.jqxWindow('close');
                    $scope.reloadUsers();
                },
                function(errorPayload) {
                    //$scope.data.newUser.userId = -1;
                    console.log("failed to update user", errorPayload);
                    //$scope.data.newUser.status = 2;
                    //$scope.data.disableNewUserSubmit = false; // re-enable button to allow resubmit
                }
            );
        }
        
        $scope.data.editUser = function(id) {
            $scope.data.roles = RoleService.getRoles();
            $scope.data.editingUser = {};
            for (var i = 0; i < $scope.data.users.length; i++) {
                if ($scope.data.users[i].userId === id) {
                    $scope.data.editingUser = angular.copy($scope.data.users[i]);
                    i = $scope.data.users.length;
                }
            }
            console.log("Editing user: " + $scope.data.editingUser.login);
            $scope.data.editUserSettings.apply('open');
            //$scope.data.editUserWindow.apply('open');
        };
    
        $scope.deleteUser = function (id) {
            //customersService.deleteCustomer(id);
        };
        
        $scope.onShowUserPanelClick = function (event) {
            $scope.data.roles = RoleService.getRoles();
            console.log("Received role list: " + JSON.stringify($scope.data.roles));
            /*
            var promise = RoleService.getRoles();
            promise.then(
                function(payload){
                    console.log("role service returned data...");
                    $scope.data.roles = payload.data;
                },
                function(errorPayload) {
                    console.log("failed to user roles", errorPayload);
                    
                }
            );
            */
            
            $scope.data.showUserPanel = !$scope.data.showUserPanel;
            if ($scope.data.showUserPanel) { // If true then create new user id in database
                $scope.data.newUser = {};
                var id = UserService.getNewUserId();
                if (id > 0) {
                    $scope.data.newUser.userId = id;
                }
            }
            $scope.data.addUserSettings.apply('open');
            //addUserWindow.open();
        };
        
        $scope.tabSelected = function (event) {
            var aIndex = 'A'.charCodeAt(0);
            var item = event.args.item + aIndex;
            var letter = String.fromCharCode(item);
            $scope.data.selectedTab = letter;
            console.log("Is show user panel: " + $scope.data.showUserPanel);
        };
        
        $scope.data.hoverLeave = function(id) {
            $scope.data.showEditText = id;
            
        };
        
        $scope.data.hoverEnter = function(id) {
            $scope.data.showEditText = id;
            console.log("Entered card id: " + id);
        };
    });
    jqxWindow Multiple Windows Issue #65042

    Dimitar
    Participant

    Hello mikemazz,

    The same issue is discussed in the following topic: http://www.jqwidgets.com/community/topic/jqxwindow-2/, where you can find a working solution.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.