How to clear a featherlight modal

Question

I am using feather-light modal in my page. on the modal one form is there with certain input fields. Once I fill in the fields and close the modal and when I open it again , it contains the previously filled data. I want to clear the data once it is closed. I am using angular js in my page. Can anyone tell me how can I clear the feather-light modal using angular js?

Update-

In my code I have to open another modal after closing the first modal. And once second modal closes, if I am opening my first modal, its showing the previously filled data, I want to reset the modal data of first modal. in my html I am using below code-

<button type="submit" ng-click="anotherModal(myForm)"   ng-class="{ 'featherlight-close' : myForm.$valid}">Submit</button>

and in script I am using below code-

 $scope.anotherModal= function (myForm) {

    if ($scope.myForm.$valid) {
    $scope.myForm.$submitted = true;
  $.featherlight("#f12","open");

    }
   }

Can anyone tell me where should I add to reset the first modal?

Updated Plunker-

Please find my plunker here- https://plnkr.co/edit/cDP1eqtUsKkeMaUiCIoM?p=preview

I am using persist ='shared' in my code because if I remove this then form validation won't work on first modal.

My issue is that when I open my second modal next time,it contains previously filled values and from there when I click on submit button my second modal doesn't show up. Can anyone help me in solving my issue?

Marc-André Lafortune · Answer 1 · 2017-02-15T14:46:53.147

1

If you are using the persist option, then yeah, the form is persisted, so you'll have to clear it yourself.

If not, then you'll get a new copied form each time. In that case though, you'll have to be careful about how you bind it and avoid using any IDs, since those are supposed to be unique.

edited Feb 15 '17 at 14:46

answered Feb 14 '17 at 14:21

Marc-André Lafortune

78,216
16
166
166

I have updated my question and mentioned the plunker link. Can you please guide me how can I solve my issue? – Aanchal Feb 15 '17 at 10:12
I am using - form.$setPristine(); and form.$setUntouched(); but it is not clearing my modal and second modal is coming blank when i open it second time, can u suggest what can I do for these two issues? – Aanchal Feb 16 '17 at 07:54

score 0 · Answer 2 · edited May 23 '17 at 12:01

As far as I know featherlight is gallery plugin, used for displaying images in a lightbox. Considering this it is not meant to be used like that (even though you can, but it will not behave as you expect here out of the box), so that's why you'll have to cleanup behind you (or more specific your users), and on popup close action, clear all form fields. There are several ways to do that, eg. form reset button (input type="reset"), js callback on close popup or submit event (or in your case using angular js events), etc..

Since you didn't provide any code that's all I can tell you for now..

Also possible duplicate of Resetting form after submit in Angularjs

UPDATE

Not sure what exactly are you trying to achive here, but if you remove (or move inside showAnotherModal function) $.featherlight.defaults.persist=true; line, it works as you described, first popup is cleared when you open it for second time. Here is your snippet updated:

var app = angular.module('myApp', ['ngMessages']);

app.controller('myCtrl', function($scope) {
//  $.featherlight.defaults.persist="shared";
  $scope.showAnotherModal = function () {
  $.featherlight.defaults.persist="shared";
  if ($scope.myForm.$valid) {
    $scope.myForm.$submitted = true;
    $scope.myForm.dirty = false;

    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();

    $.featherlight("#fl3",'open');
  }
}

});

You can try this _// Set back to pristine._ **form.$setPristine();** _// Since Angular 1.3, set back to untouched state._ **form.$setUntouched();** — junglarr, Feb 14 '17 at 14:09
@ junglarr Its not working, I have updated my question, can u check my plunker and suggest how can I resolve my issues. — Aanchal, Feb 15 '17 at 10:18
@ junglarr By doing so,form validations on first modal won't work, and second time when we open second modal by clicking submit button , it will be an empty box , then if third time if we open first modal then values will be there inside the form and second modal would again be a empty box. — Aanchal, Feb 16 '17 at 11:09
according to your code, the form will persist values from third instance as we have moved it inside submit function, — Aanchal, Feb 16 '17 at 11:15

How to clear a featherlight modal

2 Answers2