The save and cancel button are experiencing technical difficulties and are currently non-functional

Question

The save and cancel button are experiencing technical difficulties and are currently non-functional

After creating an application in AngularJS to add and remove popup modals, I encountered an issue where the saved data was returning as undefined, and the cancel functionality was not working properly.

Check out the JSFIDDLE here

If anyone has any solutions or suggestions for this problem, please do let me know.


        // AngularJS code goes here
        // More code....

javascript angularjs

Answer 1

Answer №1

Here

View the Working Demo for $rootScope

Check out the Working Demo for Factory Version

The issue arises when controller scopes like mainController and ModalInstanceCtrl have their own unique scope instances, not sharing the same scope across the app. Utilizing $rootScope as a global object can lead to poor design practices.

In the first working demo, the $rootScope variable is being used. However, dependence on a global object is not advisable.

To facilitate communication between controllers, it's recommended to create a factory service such as userFactory and pass it between your controllers. Within the factory service, manage your modals.

Insert revised code with modifications here...

Answer 2

Here

View the Working Demo for $rootScope

Check out the Working Demo for Factory Version

The issue arises when controller scopes like mainController and ModalInstanceCtrl have their own unique scope instances, not sharing the same scope across the app. Utilizing $rootScope as a global object can lead to poor design practices.

In the first working demo, the $rootScope variable is being used. However, dependence on a global object is not advisable.

To facilitate communication between controllers, it's recommended to create a factory service such as userFactory and pass it between your controllers. Within the factory service, manage your modals.

Insert revised code with modifications here...

Answer 3

Answer №2

It is crucial to reference the modalInstanceController when creating a modal, rather than the mainController.

$scope.open = function (users, dept) {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                usersInModalScope: function () {
                    return users;
                },
                deptInModalScope: function () {
                    return dept;
                }
            }
        });
    };

Remember to pass the resolutions into the controller parameters as well, and utilize the methods like close and dismiss from the $modalInstance service...

commonApp.controller('ModalInstanceCtrl', function ($scope, $rootScope, $modalInstance, usersInModalScope, deptInModalScope) {
    $scope.cancel = function () {
        $modalInstance.close();
    }

    $scope.save = function () {
        alert(JSON.stringify($scope.selectedUsers));
    }
});

While your implementation may not work as expected, consider using this version for ui.bootstrap and modals.

ProductsCtrl

angular.module('app', ['ui.bootstrap'])

.controller('AppController', function($scope, $modal, $templateCache) {

  $scope.product = { product: 'I am the product' };

  $scope.openEditProductModal = function () {

    var editProductModal = $modal.open({
        templateUrl: 'edit-product.html',
        controller: 'EditProductModalController',
        resolve: {
            product: function () {
                return $scope.product;
            }
        }
    });

    editProductModal.result.then(function (product) {
        $scope.product = product;
    });
  };


})

Modal Controller

.controller('EditProductModalController', function ($scope, $modalInstance, product) {

   $scope.product = product;

   $scope.ok = function () {
            /**
             * Set the edited description and close the modal resolving the promise
             */
            $scope.product = product
            $modalInstance.close($scope.product);
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

    })

HTML

  <body ng-controller="AppController">
      <h1 ng-bind="product.product"></h1>
      <br>
      <button ng-click="openEditProductModal(product.product)">Open Modal</button>
      <br>
      <span ng-bind="product.product"></span>
  </body>

Edit-Product.html

<div class="modal-header">
  <h3><span class="glyphicon glyphicon-edit"></span> Edit Product</h3>
  <span class="subtitle" ng-bind="product.name"></span>
</div>
<div class="modal-body edit-description-modal">
  <div class="row">
    <input ng-model="product.product"/>
  </div>

</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">Save</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Visit Plunkr for more details.

Answer 4

It is crucial to reference the modalInstanceController when creating a modal, rather than the mainController.

$scope.open = function (users, dept) {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                usersInModalScope: function () {
                    return users;
                },
                deptInModalScope: function () {
                    return dept;
                }
            }
        });
    };

Remember to pass the resolutions into the controller parameters as well, and utilize the methods like close and dismiss from the $modalInstance service...

commonApp.controller('ModalInstanceCtrl', function ($scope, $rootScope, $modalInstance, usersInModalScope, deptInModalScope) {
    $scope.cancel = function () {
        $modalInstance.close();
    }

    $scope.save = function () {
        alert(JSON.stringify($scope.selectedUsers));
    }
});

While your implementation may not work as expected, consider using this version for ui.bootstrap and modals.

ProductsCtrl

angular.module('app', ['ui.bootstrap'])

.controller('AppController', function($scope, $modal, $templateCache) {

  $scope.product = { product: 'I am the product' };

  $scope.openEditProductModal = function () {

    var editProductModal = $modal.open({
        templateUrl: 'edit-product.html',
        controller: 'EditProductModalController',
        resolve: {
            product: function () {
                return $scope.product;
            }
        }
    });

    editProductModal.result.then(function (product) {
        $scope.product = product;
    });
  };


})

Modal Controller

.controller('EditProductModalController', function ($scope, $modalInstance, product) {

   $scope.product = product;

   $scope.ok = function () {
            /**
             * Set the edited description and close the modal resolving the promise
             */
            $scope.product = product
            $modalInstance.close($scope.product);
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

    })

HTML

  <body ng-controller="AppController">
      <h1 ng-bind="product.product"></h1>
      <br>
      <button ng-click="openEditProductModal(product.product)">Open Modal</button>
      <br>
      <span ng-bind="product.product"></span>
  </body>

Edit-Product.html

<div class="modal-header">
  <h3><span class="glyphicon glyphicon-edit"></span> Edit Product</h3>
  <span class="subtitle" ng-bind="product.name"></span>
</div>
<div class="modal-body edit-description-modal">
  <div class="row">
    <input ng-model="product.product"/>
  </div>

</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">Save</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Visit Plunkr for more details.

The save and cancel button are experiencing technical difficulties and are currently non-functional

Answer №1

Answer №2

Similar questions

The website is plagued by the presence of unwanted hyperlinks

Run an anonymous function when the page is loaded

building responsive servers within Gulp using connect

Rails confirmation feature malfunctioning

Tips for implementing two functions to run within the onClick event handler in React

The exportAs attribute is not specified as "ngForm" for any directive

I am seeking assistance with generating a printed list from the database

No results found: AngularJS typeahead feature does not display search results when there is no match for the inputted text

Issue with PHP's ng-click not functioning properly with Angular JS's dynamic HTML generation

Initializing JavaScript prior to registering the Polymer element

Tips for enabling a keypad to restrict input field character limit

Utilizing Node.js (Express) to import a JSON file from StackExchange and display the data

Utilizing regex patterns within Jqgrid

Struggling to display a chart using angular-chart

How to implement the ECharts animated bar chart in Angular version 16?

Choose a jQuery Add-on

Yii: Error: The method 'typeahead' is not defined for the object [object Object]

Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Tips for sending a message to multiple servers

Validate if cookie has been established in Javascript