MEAN Stack – Save data with an AngularJS Modal – Day 22
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we’ll continue setting up our Update Customer Modal instance using Angular UI. We’ll focus on the buttons within the Modal to trigger the update function, save the data and close the Modal window, or cancel out of the Modal window.
We look at:
– A recap of our Angular UI Customer Update Modal
– Locating the ‘ok’ and ‘cancel’ functions from the Angular UI documentation
– Adding the ‘ok’ and ‘cancel’ functions to the Update Modal instance
– Aligning our button details to our wireframes
– Adding the update function to the Customers Update Controller
– Adding a reference to the update function from the Update Modal
– Testing out our Model by updating customer details
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.
Hi Shristi, Thank you for this Videos! Its Really Awesome!!
I did all the steps mentioned on your videos for updating customer details, also I have checked the function is calling or not for updating the customer. But when I updated few values and clicked update & close button. The new values comes for 1-2 sec in list view and again the old values comes back. I checked if the Put request is triggering or not, but I found in command prompt while grunt is running and Put has triggered. But the vales are not changing.
Please help me, what will be the issue.
Hi Shristi! First of all, you are AWESOME!! I honestly didn’t know the MEAN Stack was this cool and exciting until I happened to find your videos and luckily chose to check them out as my first intro to it. I am currently only having one issue at the moment. I am actually on the deployment part of the challenge but wanted to address this small bug that I’ve looked for a couple of times but still haven’t figured it out.
Whenever I pull up the update modal and update the customer record, the modal never closes when I click on the “Update & Close” button. The data is sent and everything is updated correctly, but the modal will not close unless I actually click the “Close” button or click outside of the modal.
I’ve looked at my code and it looks to be identical to yours each time but for some reason the modal won’t close. I dont get any errors or anything in the console and the update function is for sure being called. Any suggestions or ideas? Thanks again and you’ve gained a lifelong follower!
Hey Shristi!
I wrote the exact code that you did and I’m logged in to the app. But my information is not updating, could it be a problem with my MongoDB? I’m pretty lost on what the issue could be.
Thank you!
Hey Richie – can you explain what you’re trying to do? Are you seeing any errors in your browser’s console?
“I want to change Mary’s name to Jane”
😛
My updates are not saved when I refresh it. I have same code as yours and I am using PhpStorm. The internet console give this:
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
Update & CloseCancel
customersApp.controller('CustomersUpdateController', ['$scope', 'Customers',
function($scope, Customers) {
// Update existing Customer
this.update = function(updatedCustomer) {
var customer = updatedCustomer;
customer.$update(function() {
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
Can you show me another way to update customer?
HTML1300: Navigation occurred. Does it have to do anything with it?
Hey Sangeetha – It’s hard to tell with that code snippet, here are a few questions for you:
I’m assuming based on your error messages that you may be using IE? Have you tried testing your code on another browser?
Also, is your update function actually being called? And can you see a PUT request in your console?
I tried google chrome and mozilla. And I get the same result. But the problem is I don’t see PUT request. How do I check, if update function is called? Also, is there any other way to update the data?
It seems like your function may not being called, to quickly check, add a console.log message inside the function like this:
customersApp.controller(‘CustomersUpdateController’, [‘$scope’, ‘Customers’,function($scope, Customers) {
// Update existing Customer
this.update = function(updatedCustomer) {
console.log('Now calling the Update Method');
Can you also let me know:
1. the name of the controller that you are using in your ‘update customer modal view’, and
2. the contents of your button/ng-click that you are using to call the update method
1) I checked if update method is calling, and I get this. Looks like some problem with PUT.
Now calling the Update Method
angular.js:8632 PUT http://localhost:3000/customers/54ff4dba93271b0805b9a325 500 (Internal Server Error)angular.js:8632 (anonymous function)angular.js:8426 sendReqangular.js:8146 $get.serverRequestangular.js:11682 deferred.promise.then.wrappedCallbackangular.js:11682 deferred.promise.then.wrappedCallbackangular.js:11768 (anonymous function)angular.js:12811 $get.Scope.$evalangular.js:12623 $get.Scope.$digestangular.js:12915 $get.Scope.$applyangular.js:19264 (anonymous function)angular.js:2853 (anonymous function)angular.js:325 forEachangular.js:2852 eventHandler.
2) I am calling this controller for update customer
3)
Update & Close
Cancel
3) Here is the button part
Update & Close
Cancel
How can I verify that my customer.client.service.js is being called? I am not seeing a PUT in my server output and my updates are not being saved.
If you’re using webstorm, check out spy-js. http://blog.jetbrains.com/webstorm/2014/08/tracing-debugging-and-profiling-node-js-with-spy-js/
Set this up in your ‘Edit Capture Exclusions’:
Condition Type = ‘File Name’, Value/Pattern = *\\node_modules\\*
Hi,
First of all (like everyone else) I love your challenge. I think you are a very good teacher and I enjoy the videos. I am new to MEAN and the way you explain what to do in the videos is a good approach to the newbie!
The problem I’m having currently is the update modal.
When I click the update button on the modal the value changes on the list. When I refresh the page the value defaults. After experimenting, I found that if I close the browser and log in again the change shows, but I have to close the browser. I’m using MongoVue to look at the database (I have it running on a Ubuntu server) and when I press the update button on the modal the change takes place on the database, but it doesn’t seem to update on the list view until I close the browser…..
As I was typing this, I had a weird thought that I should try it in other browsers. I tried it in Chrome and it worked! But when I re-try it in IE 11 the problem mentioned earlier persists…..are there certain settings I need to add for IE?
Thank you in advance ….
Hey Adam, thanks for checking out the challenge, and thanks for your kind words 🙂
For your update issue, it could be that Angular may have scoping or binding issues in IE11. Is it failing to load any files, or showing any errors?
I just tested out my hosted version of the 30 day challenge using IE 11, but both new and updated records appear correctly as long as updates are made by the user who created the record: https://cryptic-shelf-8818.herokuapp.com/#!/
In the hosted version the code is slightly different, for example, the ‘Update Modal’ changes are only represented in the list when the modal changes are saved (not when cancelled).
OK, now it seems to be working……could be I had some other settings not right…..
Thanks for the response and the 30 day challenge, I’m learning a lot!!!
Hi,
Thanks for this 30 challenge. It was what I was looking for. I’ve been able to get everything to work, even beyond this video, but for some reason I cannot get the update function to work. I have set up my modal and update controller exactly like you, but when I try to save and close, the data is not saved to compose.io. When I check the console it says ” PUT http://localhost:3000/bins/54ab90449e8391b434dcde99 400 (Bad Request)”. I used bins instead of customers. I can’t for the life of me figure out what is different from your sample code. This is my first time working with a database, so I don’t even know what to trouble shoot from that end. But the database works for creating a new bin (or customer) and also retrieving information to populate webpages on different computers. It is just the update function that is not working.
The only thing I can think of that might be causing it is that I added another variable to my bin model after I created some of the bins, but I thought mongodb would add the variable with a PUT if there was no variable to update. And I tried creating a new bin with the new model schema and then updated it, and it still didn’t work. I’m missing something.
Do you have any suggestions on how to trouble shoot?
Thanks,
Jerry
Hey Jerry, thanks for checking out the videos, and thanks for your question.
Adding additional variables shouldn’t have an impact on updating your data, as long as you restart the app. The 400 (Bad Request) usually implies that there may be something wrong with the data that you’re sending from your client, and it’s refusing to save it! What I suspect is that you may have a required field identified in your model for which data isn’t being passed through, and therefore it can’t be saved. Try removing any required fields to begin with.
In general terms, to debug, just follow the evidence (so to speak):
1. Are the data fields on your angular views mapping to the correct ng-model attributes?
2. Are your ng-model attributes being passed to the correct angular controller?
3. Is your angular controller working with your angular service?
4. Is your angular service passing through the correct resources?
5. Is your angular service passing data which can be consumed by your express routes?
6. Are your express routes supporting and supplying data to the correct express controllers?
7. Are your express controllers receiving the data that they need to perform their functions, and are the functions working as desired?
8. Are your express controllers and models supporting each other?
9. Are your models (schemas) receiving data and validations in the form which they would require it?
10. Are your processes providing an async (successful or unsuccessful) response back to close the loop?
I just made these 10 steps up, and they are a bit wishy washy, but they might help 🙂 Let me know how you go.
Thank you for your response. I was really hoping it was as simple as I added required variables to my models after I created some instances of the model. But after removing all the required fields I still get a PUT 400 Bad Request error.
However, I think I did find the culprit, but I don’t understand why yet. For my case, I added a few reference documents to my bin model from a couple other models I created (just like the user model is referenced). When I commented them out of my bin model (but, leaving the default “user” model reference) then my update function worked. (Yah…sort of)
Now I have to figure out why the update (PUT) function does not like my referenced documents in my schema, but likes the user reference. I used the same reference as the user reference and researched mongodb pretty extensively. I was able to set up the references so that I could create bins with my referenced documents included, but for some reason the update function doesn’t like them. It took me a while to figure out that I needed to add my referenced variables in the server list populate function so that I could display other properties besides just the ids.
There must be a fundamental difference in the two calls that I am misunderstanding, or the user model has been prepped differently that I am unaware of.
Thank you for helping me get over this first hurdle.
Hey Jerry, nice work on narrowing down the issue.
A couple of thoughts:
Have you checked if your request is making it through to the server with the fields populated?
One problem that can sometimes occur with schemas is the order in which they are defined, is your referring schema defined after the schema it is referencing?
Like this:
var childSchema = new Schema({ name: ‘string’ });
var parentSchema = new Schema({
children: [childSchema]
})
To answer your first question, as far as I understand, yes (when I remove the referenced models). I can see in compose.io that my name field is being updated (which is the only field I have currently displayed in the update modal). But when I add back in the reference models, I can see in the Network tab that my information that I tend to send to the server is correct (nothing changes but the name), but I get the PUT 400 Bad Response error.
As for your second question, I copied your day 9 video, and made multiple CRUD modules using the Yeoman Generator. For example, I have one for my main object Bin, then I have one for location, one for manufacturer, and one for model types. My thought was I wanted to use drop down menus to populate lists when creating new Bins, and be able to search by these objects. The separate modules was an easy way to accomplish that (probably not necessary, and maybe not proper, but this was my first time doing this), but then I had to reference the selection back to the Bin model. So to answer your question, I don’t know what order the schemas are established, they are in separate files…in their separate yeoman generated modules (if that is the right wording).
Hello,
thanks for this great tutorial, there are some stuff that i have to tweak in order for me to have same results, but it’s all good. The only real problem I’m having is with the modal buttons and the customerController when defining the use of the updateCustomerForm, I get a warning saying function not defiend, also when trying the ng-disabled =”updateCustomer.Form.!invalid” I get this weird message saying ng-dislabled cannot be used here.