I have two pages included on single page which has new-registration form and listing user form below that. At a time I am showing that two things.
What I want is, once I enter the new entry in database, my listing page should be reloaded. I have used $route.reload for that. On submit button, I am calling one function to save the data in database, and after submitting I am calling $route.reload.
But What is happen like sometimes it is working and sometimes it doesn't.
I am using AngularJS 1.3.
I have tried $window.location.reload(); but it didn't work for me.
Somewhere in blog, I have seen like that reload function is not supported for angular 1.3 or less version, then why is it working sometimes.
Can anyone suggest other things to reload the things at a time only once the new record get insert and can some one suggest like where I am getting wrong while using route.reload?
If I remember correctly,
window.location.reload()
reloads the current page with POST data, while window.location.href=window.location.href does not include the POST data.
window.location.href=window.location.href will not reload the page if there's an anchor (#) in the URL - You must use window.location.reload() in this case.
Also, as noted by #Mic below, window.location.reload() takes an additional argument skip Cache so that with using window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite, and load the page from cache if possible.
$route.reload function is available for angular version 1.3 see docs https://code.angularjs.org/1.3.0/docs/api/ngRoute/service/$route
Are you using two different controllers for that two views?
Actually why you want to reload the page? If you want to reload every time (while inserting,updating,deleting)?
See,
You can just push the $http response object (newly added) to existing array.
or Just call the defaultLoad() function after insert success callback
Related
My application has two views, each of these has two routes. When a user change the route of one view, the other should not be changed. This is achieved using sticky states.
One of the routes uses a resolve to go grab something from the server. In my application this is dependent on a route parameter which is simulated in the plunker I put together by returning a random number.
The issue is that the resolve only fires once which means, regardless of the route parameter, it ends up loading the same content and redirecting to the same URL every time.
Worse yet, adding {reload: true} to the state causes this error: state.params.$$keys is not a function. I've started reading the source but figured I should post here in case anyone had seen this before.
I would prefer not to refactor the app to avoid parallel states, and so would appreciate any other suggestions.
You are running into issue #112
https://github.com/christopherthielen/ui-router-extras/issues/112
I built from source and updated your plunk and it seems to be working correclty now when transitioning back and forth between ViewB RouteA and Route B
http://plnkr.co/edit/zpEXaJqXtJPH1pVKPVxj?p=preview
Stupid stackoverflow requires me to add code to the answer since i linked to a forked plunk. there's no code to add
I have a simple app built with AngularJS routes which is loading the controller and template for each path. I have a register form and login form on separates paths/templates. Say I go to the login form (/#/login) and enter my username/password, if I then hit "Register" (redirects me to /#/register), and then I hit back in my browser, it will return me to /#/login but the form will now be empty; the information I typed in has been removed.
Expected behaviour would be that the form data is still there.
Anyway to make that happen (without manually caching the data in a service)?
I'm guessing when the page changes, Angular is tossing the old template data and reloading the template again. Is there a way to instead cache that page template/DOM and reload it when the user returns to that path (instead of downloading and showing new template file)?
Well, this is a bit tricky. The browser should implement this kind of feature out of the box. Firefox started doing some work around this "issue" but I don't really know the current status of it.
Alternatively you can use a bit of javascript with LocalStorage to make this works. You're using AngularJS you can create a Directive that encapsulates this feature to be used on multiple places.
Basically you need to create a mechanism that translate an field to and unique-identifier and a value. Every time the user type on the field, you update the store. If the user "finish" the interaction on the form, you clean the value from the store.
You can also grab a jQuery plugin and just create a directive that uses the plugin.
https://github.com/kugaevsky/jquery-phoenix (never tested it).
TL:DR
There's nothing you can't do using a DOM property/attribute or something similar.
You'll need to get your hands dirty on some javascript to make this happen.
The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.
I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.
#app.config ($locationProvider) ->
$locationProvider.html5Mode(true)
And then in my angular controller added the $location binding like this
$scope.$watch 'pagination.cur', (newVal) ->
$scope.loadNews newVal
$location.path("/news").search({page:newVal})
(this is ment to change the url in the browser searchbox when the user goes from one page to another).
That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.
I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual.
The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.
My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.
I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.
P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.
UPDATE
Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.
Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.
We have a problem in updating the data lists on dashboard page after creating a new list in create page. It already saved on the database, but not updating in the views. It updates once i click the refresh button on the browser but this is a one page web app. How can I update the lists on my dashboard page after adding a data from the previous page without refreshing the page? I used couchbase for database.
The problem here is that you are loading the content from your persistent storage, and then it's in angular as-is, and to retrieve any updates you will have to re-fetch it from your persistent storage. Unfortunately, it is not as simple to $watch your back-end.
You have some options here: if you are making your change from within the angular component of the site, then you can just call a function when you are creating a new page which re-fires your db-access code, and refreshes the model.
If you are making changes from outside of angular, then you will need to either use polling to refresh your angular model periodically, or go for a fancier web-socket option, as explained here.
After reading this question and your other question, my guess would be, that you get the old view from couchbase.
Per default couchbase sets the stale parameter to update_after, which results in getting the updated view only after the second access, see the couchbase documentation for more information.
To fix this, it should be sufficient to set stale to false.
If you access couchbase via REST call, adding ?stale=false to the call should do the trick, otherwise add the parameter according to your used SDK specification.
I'm learning backbone.js to add some interactivity to an existing web app. On initial page load I'm bootstrapping some initial data into the page, using the reset() method suggested in the docs. This works great. I can also create new model instances, and the view handles them just as I would expect; they show up alongside the initial data, and everything is fine. (The new data also hits the database just fine.)
However, if I click on a link to a different page (not using backbone routes or anything, just a normal link) and then hit my browser's back button, the new models I created previously are gone; only the old initial data shows up. I've done some debugging and found that the reset() method runs each time the page is loaded, so presumably that's what's nuking the additional data I'd added. (However, if I actually refresh the page, the new data will be displayed again, since now it's getting bootstrapped in too.)
I know I could use fetch() to get the newly-added data (along with the older data), but I'm trying to avoid that, both because (a) that's an extra request every time the page is loaded, and (b) because the docs say that's not ideal.
So, what should I do so that using the back button doesn't make stuff (temporarily) vanish?
Page loads models, views, collections and Routers. Page set's up the collection through reset(bootstrapping). User clicks link to navigate to another page, clicks the back button. Something interesting happens now,
Routers match the url before the page is loaded ( when clicking back button). During this match you must verify that the collection contains new data and then do collection.fetch().
This will make you get latest always and hit the server only once (Either your collection is empty or it does not contain fresh data)