I've ran into a bit of a challenge in my AngularJS app. I have a form that users can fill out. When they submit, a directive that I've downloaded from Bower takes over, does a POST in the background and then returns to my scope function to finish up. I need to disable the button that is clicked and show a loading img when they click the submit button. Normally, setting an 'updating' variable in the scope would take care of this:
<input data-ng-disabled="form.isUpdating" type="submit" value="Submit"/>
<img data-ng-show="form.isUpdating" src="/images/spinner.gif">
$scope.saveForm = function (){
$scope.form.isUpdating = true;
// Do some stuff
$scope.form.isUpdating = false;
}
The problem I have is that I don't have control over what happens initially, because the directive takes over, which has no access to my scope. I could mess with the code, but I would rather not if I don't have to. So when I click the button to submit, nothing happens until the POST in the directive is complete, which is not good for my user.
I can't do an ng-click and set form.isUpdating to true there, because that immediately makes the button disabled so the click doesn't register. You can't use ng-click and ng-disabled together as far as I know.
Can anyone think of a good way to get around this?
Do the stuff you need to get done async. this will put it outside the current
digest cycle.
like this:
$scope.saveForm = function (){
$scope.form.isUpdating = true;
$timeout(function () {
//this will run outside the current
//digest cycle, so the UI has a change of updating
// while I'm working!
// Do some stuff
$scope.form.isUpdating = false;
},0)
}
Hope this helps you!
Related
Basically I have two HTML pages, and both are connected to the same JS file. I want a function triggered by an event handler element in the first HTML to edit an element in the second HTML page, and then open it.
Here's a very basic example:
$("#p1").click(function() {
$("#p2el").text("TEST");
})
<button id="p1">CLICK</button>
In this example, the button p1 is defined in the first HTML, and the p2el element is defined in a second HTML page, both linked to the same JS file.
In the above example, I also used location.href inside the function. The idea being that, the element is edited, and automatically the second HTML page is loaded.
It's not working, and I don't know why. The second HTML page loads, but the element p2el is not edited.
I suspect this is has to do with data not transferring to the second HTML, but I am not sure why and what is happening exactly. I tried using localStorage inside the function, and then use the stored data as a condition that edits the element in the second HTML page...
function second() {
if(localStorage["key"] == "on") {
$("#p2el").text("TEST");
location.href = "secondpage.html"
}
}
$("#p1").click(function() {
localStorage["key"] = "on";
second()
})
... but It didn't work.
I hope somebody can help me out.
Navigating to a new page completely resets the "JavaScript envirionment".
Your JS files are reloaded, everything starts anew. Some things persist through page loads, such as local storage and cookies, but function calls certainly don't.
To do what you want to do, you'll need to:
Listen to the click event, and save the fact it was clicked somewhere.
(You're already doing this)
On page load, check the storage to determine whether or not the button was clicked at some time. If it was, do whatever you want. You will probably want to reset the stored value so this happens only once.
This will probably do the trick for you:
if(localStorage["key"] === true) {
localStorage["key"] = false; // reset the key.
$("#p2el").text("TEST");
}
$("#p1").click(function() {
localStorage["key"] = true;
location.href = "secondpage.html"
});
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');
}
}
});
I have a problem. I have a registry form and many other forms.
Now I want to check whether the form is dirty and then I bring a confirm box if they really want to leave/close this page.
First of all, when I go back with the browser's back button and not with my other button ([button..] just 4 example) the confirmation box shows up two times and after two times confirming I'm still on the same page, just the form is resetted. When I press my own everything works fine.
Secondly, when I close the browser, my confirmation box shows up and afterwards the browsers confirmation box also shows up, but I only want one of them.
$scope.$on('$locationChangeStart', function (event, next, current) {
if ($scope.requestForm.$dirty) {
if (!$window.confirm('Unsaved Changes, leave Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
event.preventDefault();
}
} else {
}
});
$scope.$watch("requestForm.$dirty", function (newval) {
window.myGlobalDirtyFlag = newval;
});
window.onbeforeunload = function (e) {
if (window.myGlobalDirtyFlag === true) {
if (!$window.confirm('Unsaved Changes, close Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
return false;
} else {
}
}
};
$scope.$on("$destroy", function () {
window.myGlobalDirtyFlag = false;
});
May someone also have an idea how I bring this into an AngularJS directive, so I don't have to copy this code for every site where I have a form on it. (Every page only has 1 form, but every form name is different!)
My controllers are in seperate javascript files, (function blablaController() {}) and I pass this per routeProvider in my config file (templateUrl: blabla.html, controller: blabalController)
Regards,
Anthrax
Here is a service and directive that answers your question. Probably the only change you might consider making to it is using $window instead of window inside the service. As the instructions state, you'll just add the attribute unsaved-changes-warning to your form.
https://github.com/facultymatt/angular-unsavedChanges
I have a javascript code that, whenever a checkbox is checked, will reload my current page and then is supposed to grey out some input fields.
However, it is only doing the reload when the page is reloaded the input fields are never greyed out.
$(document).ready(function(){
$("#storePickUp").on("click", function () {
if ($(this).is(":checked")) {
document.getElementById("shippingForm").submit();
document.getElementById("shippingAdress").disabled = true;
document.getElementById("shippingState").disabled = true;
document.getElementById("shippingCity").disabled = true;
document.getElementById("shippingZip").disabled = true;
document.getElementById("shippingZipCode").disabled = true;
document.getElementById("shippingButton").disabled = true;
}
});
});
So in your code on the 4th line where you call .submit()... unless you have some extra magic on the page that you are not showing, this line will proceed to post/get your form to whatever url you have configured in that form.
What this means is that the lines underneath that do not matter at all, since they will not be executed on the forms target page.
To get around this if you truly need the form post in the middle, you would need to post to a specific url and use that url as a trigger on page load to disable those elements. Not directly after the click, but rather on the newly loaded page that is the target of the form... make sense?
I think that's because it's only disabling them when you click on #storePickUp but if your page is reloaded it will reset.
Method submit is executed, page reloads, code after submit is never executed. Even if that code would be executed, page refresh nullifies any changes.
You should probably do submitting with ajax, not with submit method. If you are using jQuery, it will make it easy for you:
http://api.jquery.com/category/ajax/
I created some ajax paginated comments in WordPress. Unfortunately, if the user had clicked on the reply button and then goes about to click on another comment page, the Comment Form vanishes into thin air.
Anyways, simple question: Triggering the "Cancel Reply" function from my code each time the user clicks on a new ajax page would effectively solve the problem by causing the form to jump back to the original position.
How can I trigger cancel.onclick() from my own code easily? I was going to just duplicate commands and create a new function, but thought there might be an easier way to save a few bytes!
Here's the source code:
http://core.trac.wordpress.org/browser/trunk/wp-includes/js/comment-reply.dev.js
Try something like this:
$('#id_of_your_cancel_button').click();
// same thing as $('#id_of_your_cancel_button').trigger('click');
If the "cancel" logic is to be used in multiple contexts, perhaps it would be best if it lives in its own named function declaration, rather than the anonymous function expression as in your example. This would give you the option of doing something like this:
function myCancelCode(){
do_stuff();
}
Then in your addComment object:
cancel.onclick = myCancelCode;
and from anywhere else:
if( somethingHappens ){
myCancelCode();
}