jqxWindow Multiple Windows Issue

[mikemazzParticipant]

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);
    };
});

[DimitarParticipant]

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/

[Author]

Posts