MEAN Stack – Create Customer AngularJS Modal – Day 25
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we’ll start to set-up our AngularJS Create Customer Modal. We’ll begin by turning our create customer view into a Modal window, and get it to popup using the ‘New Customer’ button.
We look at:
– The current create customer view
– Changing the top and bottom of the create customer view to align it with the update customer modal
– Changing our references to refer to the customer create controller
– Changing the controller alias references on the new Create Modal buttons
– Setting up the Create Customer Controller by reusing the existing create function and changing it up
– Using the code for the update customer modal directive as a template to create a new create customer modal directive.
– Adding a reference to our new Modal from the Customer List ‘Create Customer’ button
– Opening up our new Create Customer Modal
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.
hi, im stumped here, and unsure if ive missed somthing in the code:
‘use strict’;
// Customers controller
var customersApp = angular.module(‘customers’);
customersApp.controller(‘CustomersController’, [‘$scope’, ‘$stateParams’, ‘Authentication’, ‘Customers’,’$modal’, ‘$log’,
function($scope, $stateParams, Authentication, Customers, $modal, $log) {
this.authentication = Authentication;
// Find a list of Customers
this.customers = Customers.query();
//open a model window to create single customer record
this.modalCreate = function (size) {
var modalInstance = $modal.open({
templateUrl: ‘modules/customers/views/create-customer.client.view.html’,
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
if(createCustomerForm.$valid){
$modalInstance.close();
}
};
$scope.cancel = function () {
$modalInstance.dismiss(‘cancel’);
};
},
size: size
});
modalInstance.result.then(function (selectedItem) {
}, function () {
$log.info(‘Modal dismissed at: ‘ + new Date());
});
};
//modal end
//open a model window to update single customer record
this.modalUpdate = function (size, selectedCustomer) {
var modalInstance = $modal.open({
templateUrl: ‘modules/customers/views/edit-customer.client.view.html’,
controller: function ($scope, $modalInstance, customer) {
$scope.customer = customer;
$scope.ok = function () {
if(updateCustomerForm.$valid){
$modalInstance.close($scope.customer);
}
};
$scope.cancel = function () {
$modalInstance.dismiss(‘cancel’);
};
},
size: size
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info(‘Modal dismissed at: ‘ + new Date());
});
};
//modal end
}
]);
customersApp.controller(‘CustomersCreateController’, [‘$scope’, ‘Customers’,
function($scope, Customers) {
// Create new Customer
this.create = function() {
// Create new Customer object
var customer = new Customers ({
firstName: this.firstName,
surname: this.surname,
suburb: this.suburb,
country: this.country,
industry: this.industry,
email: this.email,
phone: this.phone,
referred: this.phone,
channel: this.channel,
});
// Redirect after save
customer.$save(function(response) {
// $location.path(‘customers/’ + response._id);
// Clear form fields
$scope.firstName = ”;
$scope.surname = ”;
$scope.suburb = ”;
$scope.country = ”;
$scope.industry = ”;
$scope.industry = ”;
$scope.email = ”;
$scope.phone = ”;
$scope.referred = ”;
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
customersApp.controller(‘CustomersUpdateController’, [‘$scope’, ‘Customers’,
function($scope, Customers) {
// Update existing Customer
this.update = function(updatedCustomer) {
var customer = updatedCustomer;
customer.$update(function() {
// $location.path(‘customers/’ + customer._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
// created directive for customer listin
customersApp.directive(‘customerList’, [function(){
return {
reestrict : ‘E’,
transclude: true,
templateUrl: ‘modules/customers/views/customer-list-template.html’,
link: function(scope, element, attrs){
}
};
}]);
ever since adding the new directive, im getting a UI error (supposed ot be harmless), but my customers are not listing. (just blank)
Hmm… Have another look through your code, for example, I see a spelling error with ” reestrict : ‘E’, “. Also, just stop and restart the server to make sure it picks up the directive.
hi, first off.amazing tutorials!!!
second, im getting the same error here after adding the modal controllers.
error on my browser log.
Uncaught TypeError: Cannot read property ‘getToggleElement’ of null.
followed the tuts through twice and still getting the error (unable toi get further as its not showing my customers).
Could this be a version issue?
Hi, I have created the create customer modal window and the data is being updated after refresh. However, the modal window does not close when I press “save and close”.
Here is the code I have:
this.modalCreate = function (size) {
var modalInstance = $modal.open({
templateUrl: ‘modules/customers/views/create-customer.client.view.html’,
controller: function($scope, $modalInstance){
//remove customer from function parameters,
// because no context of customer: $scope.customer=customer;
$scope.ok = function () {
if (createCustomerForm.$valid){
$modalInstance.close();
}
};
$scope.cancel = function () {
$modalInstance.dismiss(‘cancel’);
};
},
size: size
});
modalInstance.result.then(function (selectedItem) {
}, function () {
$log.info(‘Modal dismissed at: ‘ + new Date());
});
};
The same problem is happening with update customer modal.
Could the problem be calling both update() and ok() at the same time?
Update & Close
Thanks,
Jimmy Chou
Hey Jimmy – try this instead:
In your view:
In your controller:
$scope.ok = function (isValid) { if (isValid){ $modalInstance.close(); }The same problem. createCustomerForm and updateCustomerForm are undefined in controllers.
Shristi, thanks for your awesome tutorials! Will try your solution with ‘ok’ function.
It worked!
Hi , I have created the modal window for add and update customer ,but after doing this when i add/update customers the modal window is not closing . I have followed the same steps as in the tutorial , how can i fix this ?
Good question, like any good investigation, we’ll need to start with the clues. The first clue would be in any error messages that might be appearing in your console.
Are you seeing any error messages in your browsers console when you click to close the modal windows?
Are both of your modal windows not closing?
Is your view (modal template) calling the right controller function?
Can you please provide the code for your modal button that you’re using to close the modal, the reference to the controller in your view, and your controller function that is being called.
HI ,
I am calling the write function as after saving data is getting added . But whenever i save / update i see this error on my browser log.
Uncaught TypeError: Cannot read property 'getToggleElement' of nullHey Aditya – Are you calling the function to close the modal as well?
The error message that you see
Uncaught TypeError: Cannot read property 'getToggleElement' of nullis actually just a ui-bootstrap warning, it’s related to the menu dropdown.Yes i am calling the close function as well and i am not seeing any error logs on the server. This issue started after creating the modal window for adding customer.
HI , i created customer module successfully ,but i need to display customer list in home page , how can i do?
Hey Karthik,
Just follow the same process for showing your customers list on the customers list page. Make sure your home page controller has a reference to the Customers Service. The easiest way would be to put the controllers and the views side by side, and copy across the code items that you need.
What have you tried so far? Are you getting any specific errors?