I have created a single page app using backbone. What I want to do is - when the user clicks F5 or hits on the browser refresh I want to capture that event and provide a JS alert to the user asking are you sure you want to refresh. Is there a way to do this using backbone
There is no way to tell the difference between the user leaving a page or refreshing, but you can prompt a message to abort the activity.
<script type="text/javascript">
window.onbeforeunload = function() {
return "Are you sure you want to leave or refresh?";
}
</script>
Related
So there's a login page and let's say a dashboard with certain data fields. When I press logout from the dashboard it redirects me to the login page. But when I hit back button, it brings me back tot he dashboard and technically let's me access data I shouldn't be able to access.
It was solved by refreshing after pressing back button, because it seems that is the page cache loading from memory which needs to be refreshed. But I don't want the user to have to manually refresh.
Any workaround to that, or a completely different solution would be great.
In angular, you can use #hostListner(angular decorator). that is used for handling dom events in angular.
in your project, you can help localStorage and #hostListner
store client information on local storage with javascript.
store local storage
and then in the log-in page
add #hostListner event in component.ts file
event handling
Implement session validation in each of your route $routeChangeStart event. Whenever user loggout clear the session data and redirect it default route which should be your login page.
My scenario is that, when user logs out, jump to the login page. In this case, if user clicks the back button of browser, he would go into the app again. But since session is killed, then he would have some problems to fetch data from server.
so my question is, how to clear browser history or how to disable the back button of browser so user cannot go back into the app again if he is at login page?
I have tried
$scope.$on('$viewContentLoaded', () => {
$location.replace();
})
but it does not work
I have a question that suppose, I have an Admin Dashboard page, on which I have given a list of users. clicking upon a particular user the details of corresponding user is shown on a different page (say on userDetails.jsp). Now I have a back button on userDetails page, Clicking of which I need to redirect admin to the last visited page that is Admin Dashboard page, I have one solution that I can "Reload" the previos page on clicking back button, but then I feel that there is the overhead of calling a server side API, retrieving all the data, Again redraw the whole admin dashboard page even when there is no change made in the userDetails[because it is read only page, modification is not allowed there]. Is there anyway that I can make user of cache or anything else so that I will not need to go to the server to fetch all the data again. I am using spring MVC, angularjs, Thank you.
On your button's click event add the following code:
$window.history.back();
make sure to use $window rather than window since you're using AngularJS
I integrated an iframe to my angularjs app and I also can communicate with my Iframe. I used the following way:
<iframe ng-if="reloadIFrame" class="embed-responsive-item" src="/context/iframe_integration.html"
onload="angular.element(document.documentElement).injector().get('$rootScope').$broadcast('iFrameLoadedEvent', event);">
</iframe>
I catch the broadcasted event in a service and save the reference to it:
// ...
var iFrameInterface = false;
$rootScope.$on('iFrameLoadedEvent', function(ev, event) {
if(!iFrameInterface){
iFrameInterface = angular.element(event.target)[0].contentWindow.iFrameInterface;
// ...
The problem is the following: If I navigate to another position in my app and go back to the site where my iframe is integrated the iframe is reloaded and my reference to it is old. I can update the reference to my iframe interface but the question is "Is it possible to integrate the iframe once and never reload again?"
I don't want to reload the content of the iframe everytime if I navigate to another page and reload it if I come to the page again.
Thank you...
I have a backbone view call LogOnView. In my LogOnView A user can login using username and password. There exist all type of server and client side validation. I want to use this view in a bootstrap modal when a user click a button in another view. I can add all the content LogOnView into bootstrap modal-body like this
$('.modal-body').html(new LogOnView().el);
N.B. I am enabling the Bootstrap modal dynamically that means from a view (using javascript).
$('#LogOnPopUp').modal('toggle');
By this content of LogOnView is successfully added to Boostrap modal. And also login and validation is ok as it ok in LogOnView. But I need to find a way to do another work when user Login successfully. That means when an user successfully login the modal popup will close and another task will need to done in this view.
So what can I do in this aspect? Any advice will be appreciable.
N.B: (summary/similar criteria )
It's all the same as facebook like. When anyone like a content of other website using facebook account. A user click in like button then a modal popup is opened and after logged in there his like is confirmed.
I want to do something like this using my LogOnView into bootstrap modal.
I'm not sure I understand your question. But if you want to execute an action once some work has been done (i.e. logging on, in your case), you can handle "doing things after" using jQuery Deferreds and promises: http://api.jquery.com/category/deferred-object/
I've written 2 posts on the subject, if this is the route you want to use:
http://davidsulc.com/blog/2013/04/01/using-jquery-promises-to-render-backbone-views-after-fetching-data/
http://davidsulc.com/blog/2013/04/02/rendering-a-view-after-multiple-async-functions-return-using-promises/