We Keep Coding

How to clear a featherlight modal

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?

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.

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');
}
}
});

Angular mobile - accordion open/close

Hi guys i'm using angular mobile framework and i had implemented the accordion. The thing is that by default when you click on it, it opens and if i click the same component again it doesn't close.
Here is the online example.
http://mobileangularui.com/demo/#/accordion.
What i need is to be able to open it and close it like most of the accordions component. I tried
is.open=""
but it did't work.

It is design to only open, because of this line of code:
ui-set="{'myAccordion': i}"
So when you click on it again, it just restates that this tab should be open.
What you need to do is check if the item clicked on is already the opened one, and if true, then just set it to some outside value.
ui-set="{ 'myAccordion': Ui.get('myAccordion') == item ? -1 : item }"

Select the second tab in a section of a page

index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!

As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);

EmberJS: Jquery datepicker stays active when changing routes

I have an emberjs web app where one of my views is a search page to query a database of records. I have the ability to filter by date and am using JQuery's datepicker.
The problem I am having is that if a user opens the datepicker and then hits either the browser back or forward button it stays active on the screen until a user clicks away. To clarify the process is as below:
Navigate to search page
Click select date
Datepicker appears
User clicks the browsers back button
Previous page loads BUT with datepicker still lingering around
Does anyone have any suggestions of how to hide or destroy the datepicker when a browsers back button is pressed?
Thanks!!
EDIT----------------------------
Current code:
Formal.Route.Search = Ember.Route.extend({
deactivate: function () {
console.log("hi");
$("ui-datepicker-div").datepicker("destroy");
},

Put the removal logic at View instead Route. Lets assume your template name is "search", then
App.SearchView=Ember.View.extend({
didInsertElement:function(){
$("#ui-datepicker-div").datepicker();
},
willDestroyElement:function()){
$("#ui-datepicker-div").datepicker("destroy");
}
});
Note: I assumed your selector is ID, if it is css class then use $(".ui-datepicker-div")
If you would like to write datepicker as component which can be used across the application then do watch the Screencast here http://eviltrout.com/2014/06/03/jquery-component.html
P.S. If you still could not figure out, please show your code in http://jsbin.com/

Thank you all very much for your help!
I resolved the issue with the following:
Formal.View.Datepicker = Ember.TextField.extend({
destroyDatepicker: function () {
this.$().datepicker("hide");
},
});
For some reason "destroy" was not doing the trick but "hide" does. If anyone has any insight into why this is I'd love to hear.

Don't destroy an Angular Bootstrap modal on close

I am using Angular Bootstrap to display a Modal (the one presented here), which works perfectly. However, default behavior of this Angular extension is that the modal is reconstructed (and a new instance of its controller will be creatred) whenever it is closed and then opened again.
Since I have some pretty advanced stuff going on inside the Modal, I would like the modal to just be hidden when it is closed, so that its state remains. I have searched around a bit, but unfortunately could not find a simple and effective answer.
Just hiding it would be an option, but this then has to happen whenever the modal is closed, so also when it closes because the backdrop is clicked. And I want the same animation as when the modal is opened in the normal way.

Why don't you abstract the modal state into its own service? That way, whenever the modal controller is created, it uses the service to setup the view state on initialisation.
Eg. create a service
.factory('ModalStateService', function(){
var state = {
someValue: 'something'
};
return {
getState: function() { return state; }
};
});
Then in your controller:
.controller('ModalCtrl', function($scope, ModalStateService){
$scope.viewState = ModalStateService.getState();
});
Then in your modal content view for example:
<span>{{viewState.someValue}}</span>
If you were then to set someValue inside your modal, say through an input, the service state would be updated. Then when you create and destroy your modal, the state will persist.

As you might already know Angular initializes a controller when the associated view is added to the DOM. So the plugin author might have decided to add and remove the view element so that he does not have to worry about clearing the 'scope'each time user opens and closes the modal.
For example, we have a login box in the modal and if the scope is not cleared, it will keep the filled in details even the next time we show it.
An easy hack to solve your problem will be to wrap the originl modal in a custom directive, reneder it. And just change the display property of your custom modal to show and hide the modal ;)