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');
}
}
});
Related
I have a component Escrituracao to keep tab of a client's bills. It has this mat-table to show all the proper data. To create a new bill a modal, CadastrarLancamentoComponent, is opened:
openModalLancamento(data) {
const modalOptions: NgbModalOptions = {};
modalOptions.backdrop = 'static';
const modalRef = this.modalService.open(CadastrarLancamentoComponent, modalOptions);
modalRef.result.then((result) => {
if (result) {
this.getLancamentosByPeriod();
}
}, (result) => {
if (result) {
//escape result enters here
this.getLancamentosByPeriod();
}
});
}
When a new bill is added the modal is kept open to add more bills (that's intended). However, when closed with the close or cancel button, if a bill was added, the modal returns a specific result value enabling the page to refresh (thus calling this.getLancamentosByPeriod();). When using cancel or close button with no bill added, it only closes the modal without reloading.
My main struggle is when using the Escape key. When used, both when added or not a bill, it only closes the modal. The result is the same for both situations. I've tried using some Output data transfer to the Financeiro component to say a bill was added; and tried accessing the modal's data to fetch a boolean that would give me that information. All with no solution.
Is there a way to force a value on this modal result when closed with the escape key? Or to send this information proper (like used on the other close buttons) to the main page? What I need is the page to behave the same as the other closing buttons, to reload on close when a bill was added.
I'm using Angular/Typescript for this project.
Are you using material for your dialog, custom, or something else?
If it's material, then I believe there's and option to disable escape being used to close it.
Yeah, looked it up, disableClose is the option. That removes escape and clicking outside of the dialog as ways to close it.
Once disabled, put your own escape key listener in there - something like this I guess - and when escape is detected, directly call your desired, custom close method.
I have a page a hyperlink (created using anchor tag) in Angular JS. When I click on the link I want to show a spinner until the content is loaded.
In list.html, I have declared the DIV tag as below:
<div id="loadScreen" class="load-screen" ng-show="displayLoader">
<div class="loading-spinner"></div>
</div>
<div ng-if="isAccessible">
Click here
</div>
In the controller, I have the following code:
$scope.displayLoader = false;
$scope.showLoader = function() {
console.log("Inside showLoader....");
$scope.displayLoader = true;
};
The control never enters showLoader function.
My initial goal is to at least hit this function and print the console log statement but I haven't been lucky so far.
I'm new to Angular JS and my project is already using v1.3
So I cannot change the version.
Please let me know how can I achieve this?
Thanks.
I changed my approach. Instead of adding the spinner to the hyperlink, I trigger it when loading the destination page. That works and seems to be the right way to do it.
I have a few different modals on a page, and it all works as it should, but if a user makes some input on form fields in a modal and then accidentally clicks outside of the modal (which closes it), they loose their changes, since if the user clicks the same button they pressed to open the modal, the data they entered will be overwritten with data pulled from the database.
So I'd like to have a function for "reopen last closed modal" that simply shows the modal again in it's last used state - with whatever data was in it.
Essentially like a Ctrl-Z for accidentally closing a modal.
It's really simple if you know the ID of the modal. Such as:
$('#myModal1').modal('show'); });
But because I have several different modals available on a page, and I don't want to have a bunch of "restore" buttons, I need to be able to detect the ID of the last closed modal.
If there's not a simpler way, I could capture the ID each time a modal is closed, and then use that ID if the modal needs to be reopened without changing its data. Something like this:
$('#myModal1').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal1';
})
$('#myModal2').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal2';
})
function reOpen() {
$(LastModal).modal('show');
}
But I'm guessing there's a way that's simpler and doesn't require me to state all my modals ID's in JS/jQuery. Any ideas?
I've made a few tweaks, and this is working well for me now, with essentially no other hassle than a few short lines of code in my script file.
var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}
Just use the style class "modal" for your modals, and to call the "reOpen", just have something like:
<span onclick='reOpen();'>Reopen</span>
Thanks #marekful for your suggestion!
Also, if you want to access this (or any other function) by pressing Ctrl+Z, you can add this:
// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
if (evt.keyCode==90 && (evt.ctrlKey)){
evt.preventDefault();
reOpen();
}
});
I have the standard tabs setup using Bootstrap 3. Each tab is a form into which the user inputs information. Now there is a save button at the bottom of each form which will save the information in the current tab, but what I'm looking to do is enable the user to click a different tab at the top of the page, and be given a warning of
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
with an OK or Cancel button. If they click OK then they go to the tab they clicked, and if they hit cancel, they stay on the current tab. Anybody any idea how I can do this? I've been trying to get this all day, but with no luck. Should I even be using Bootstrap tabs or would it be easier to build my own tabs functionality instead of over-riding bootstrap's tabs?
Per the Bootstrap 3 docs, you can set up something like this. In your tab button listener, show a confirm box, then add logic to handle that response:
$('#myTabs a').click(function (e) {
e.preventDefault()
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
if (areYouSure === true) {
$(this).tab('show')
} else {
// do other stuff
return false;
}
})
You could add a class to your tabs and then use an on click function where you'd fire a modal or bootbox confirm asking the user if they want to continue to the new tab. If they select no, you prevent the new tab from loading, if they select yes, you continue.
https://api.jquery.com/click/
http://bootboxjs.com/examples.html
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 ;)