Custom Section & Custom Editor - Unsaved Changes Warning after save
Hey all,
I have a custom section with custom views and editor logic. Mostly based around the tutorial found on Nibble.
It works great except for when a user navigates away from the custom node and they're prompted with the "Unsaved Changes" warning notification. I know what's causing the notification appear. It's the "val-form-manager" an Umbraco directive which can be applied at root tag level. In this case for the form tag allow with the ng-controller.
The actual JS logic for triggering the event is here, I'm using umbraco v7.1.6.
I can only imagine it's because the formCtrl.$isDirty should be set to true?
To give a bit more information. They're simple text fields bound by a POCO object. I also get this when implementing the Nibble project locally.
Any thoughts? I'm thinking I need to set some kind of logic to avoid the formCtrl.$isDirty being true.
Normally when editing data and sending it back to the server, you remind it when it gets returned from the server, this resets the dirty state of the editor.
If you don't want these notifications, remove the val-form-manager directive
@Dave formCtrl is not available within the context, would this need to be included in the controller definition?
@Per sorry, mate. I don't quite follow what you mean by "remind it"? I guess you mean include something in the promise after a $http response (eg then or success). How would I go about reminding it?
I certainly can remove the val-form-manager directive, however I was wondering if I could take advantage of the Umbraco notifications.
Cool, you got it sorted, sorry I meant "Rebind it" :) so when you get a success response from $http, you would return the modified object and populate the scope with it, and thereby resetting its dirty state
I have created a new dashboard in Umbraco 7.2.0 and I got the same issue. I don't know if I am missing something or doing something wrong, but your solution doesn't work for me. I have also tried the $setPristine() method.
Hi everyone, I realise that Alain has already mentioned this but I highly recommend using:
$scope.form.$setPristine();
Rather than:
$scope.form.$dirty = false;
If you set the form.$dirty to false, it stops the message from appearing when the user tries to navigate away, but should they make another change to the form, the $dirty status will not get reset.
Hey all. I'd like to use the 'lose changes' functionality - all I need to do is tell Umbraco once I've saved my data. So I tried calling $setPristine() AND $dirty = false.
But Umbraco still asks me if I want to save?
I can check that angular.element($('#myEl')).scope().myFormName.$dirty == false (and $pristine == true) - but I thought that should mean it won't ask me, and it still is? :'-(
Can anyone give me a tip where to investigate further? I've listed all the form elements on the page and they ALL have the classes: .ng-pristine.ng-valid. Which suggests to me I'm doing it right but it isn't working! Please help!
Custom Section & Custom Editor - Unsaved Changes Warning after save
Hey all,
I have a custom section with custom views and editor logic. Mostly based around the tutorial found on Nibble.
It works great except for when a user navigates away from the custom node and they're prompted with the "Unsaved Changes" warning notification. I know what's causing the notification appear. It's the "val-form-manager" an Umbraco directive which can be applied at root tag level. In this case for the form tag allow with the ng-controller.
The actual JS logic for triggering the event is here, I'm using umbraco v7.1.6.
I can only imagine it's because the formCtrl.$isDirty should be set to true?
To give a bit more information. They're simple text fields bound by a POCO object. I also get this when implementing the Nibble project locally.
Any thoughts? I'm thinking I need to set some kind of logic to avoid the formCtrl.$isDirty being true.
Thanks,
Jamie
Hey Jamie,
After you saved your data you can set formCtrl.$isDirty = false
That should solve the problem.
Dave
Normally when editing data and sending it back to the server, you remind it when it gets returned from the server, this resets the dirty state of the editor. If you don't want these notifications, remove the val-form-manager directive
@Dave formCtrl is not available within the context, would this need to be included in the controller definition?
@Per sorry, mate. I don't quite follow what you mean by "remind it"? I guess you mean include something in the promise after a $http response (eg then or success). How would I go about reminding it?
I certainly can remove the val-form-manager directive, however I was wondering if I could take advantage of the Umbraco notifications.
Thank you both for your responses so far. #h5yr!
Hi Jamie,
What you need is $scope.nameofyourform.$isdirty= false;
Dave
Hi Dave,
#h5yr! That almost sorted it. Turns out the property is
$dirty
rather than$isdirty
.Thanks,
Jamie
I was typing the code from memory.
Nice you sorted it out.
Dave
Cool, you got it sorted, sorry I meant "Rebind it" :) so when you get a success response from $http, you would return the modified object and populate the scope with it, and thereby resetting its dirty state
Comment author was deleted
Thanks, example project has also been updated :)
Hi,
I have created a new dashboard in Umbraco 7.2.0 and I got the same issue. I don't know if I am missing something or doing something wrong, but your solution doesn't work for me.
I have also tried the $setPristine() method.
View:
Controller:
Any thoughts?
Thanks,
Alain
I have seen that the Dashboard form contains the val-form-manager directive, which is causing the issue.
Is that really necessary? Wouldn't be better that each form used this directive if they really need it?
You can create a issue for this at : issues.umbraco.org
Dave
Hi Dave,
Someone already created an issue regarding this matter. I have submitted a PR.
http://issues.umbraco.org/issue/U4-5852
Cheers,
Alain
Actually it is not the way to fix it.
There is a noDirtyCheck directive that should be used on input fields instead of removing the valFormManager directive.
Shazwazza, thanks for the clarification.
Perfect Alain, that's exactly what I needed. no-Dirty-Check worked for me.
#HFYR :) no-Dirty-Check is the bomb
Hi everyone, I realise that Alain has already mentioned this but I highly recommend using:
Rather than:
If you set the form.$dirty to false, it stops the message from appearing when the user tries to navigate away, but should they make another change to the form, the $dirty status will not get reset.
However, using $setPristine() will.
Hey all. I'd like to use the 'lose changes' functionality - all I need to do is tell Umbraco once I've saved my data. So I tried calling $setPristine() AND $dirty = false.
But Umbraco still asks me if I want to save?
I can check that
angular.element($('#myEl')).scope().myFormName.$dirty == false
(and $pristine == true) - but I thought that should mean it won't ask me, and it still is? :'-(Can anyone give me a tip where to investigate further? I've listed all the form elements on the page and they ALL have the classes:
.ng-pristine.ng-valid
. Which suggests to me I'm doing it right but it isn't working! Please help!Just use
no-dirty-check
inside your control.like this:
is working on a reply...