I want to change the state and then trigger the reload/refresh at that particular state using ui-router i had tried location.href previously but it seems that if there is hashbang then it doesn't reload the whole page ,but i want to reload the page
this.$state.go(this.$state.params.returnUrl, {}, {reload: true});
i had tried the above code but not working for me ,where returnurl is the state where i want to take the state to.
$state.go doesn't reload the whole page, even with reload option set to true.
To reload the page you can get result url using $state.href, and reload the page with window.location
// get state's relative url with populated params
// if you want to get absolute url, then you can add {absolute:true} param
window.location.href = $state.href('state.name', {param: 'value'});
// reload the page
window.location.reload();
Please provide some more code to identify the issue. Have you injected $state to your controller? I've used this approach before and it has worked.
Related
In my controller, I use $state.go('home', {"parameters": paramValue, "parameter1": another value, "parameters3": another another value}, {reload:true}); and while this does attempt to go to the home state and passes the parameters to the url, the home state view keeps loading. If I copy the url with the parameters passed, and click enter, everything loads properly.
This is the process of going to the home tab.
-> the url changes to reflect that home state is trying to be reached
-> a second reload occurs when the url gets the parameters passed. The parameters do get passed successfully.
-> It keeps trying to load the home view.
The url is correct and works( parameters and all); as I can copy the link and access it. I've also toggled with reload to false.
Should I try transitionTo?
Hey all for anyone else having a similar kind of problem. The answer to stop the unneccessary reloading is to add the notify:false to state.go('main.home', params, {notify:false});
I am building a React Redux application and I am using <Prompt/> from react-router-dom to prevent a user from navigating away from a page when a specific icon is being rendered on the page.
It works fine except for when the params in the url change and then it fires the <Prompt/> when I don't want it to fire because I haven't actually tried to navigate anywhere. My url looks like:
http://localhost:8080/#/path/im/on?ids=1%2C24&from=1512518400000&searchRequest=e0007&to=1512604799000
When the ids in the url become successful, they are removed from the url but <Prompt/> is still fired.
Is there any way I can prevent <Prompt/> from firing when the url params change and the first part of the url stays the same? i.e. http://localhost:8080/#/path/im/on
Not sure if this is still relevant to you but you can do the following:
'message' prop in the Prompt component can either be a string or a function that returns a string or boolean.
<Prompt
message={(location) => {
return location.pathname.startsWith("your url")
? true
: `Are you sure you want to go to ${location.pathname}?`
}}
/>
if a function is passed to message prop then it will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.
here is the documentation link: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Prompt.md
There are some pages in my application where I'd like to update the URL with the current state so that the URL can be shared, but I don't want to reload the page because I can enter the new state without a full reload.
I've attempted to do this with $state.go(state, params, { notify: false }), which works... That is, until I navigate to some other page. When I navigate to the next page, the query parameters in my URL (for example, page number) are set on that page.
To be more concrete: I have a StateA where I call $state.go(StateA, params, {notify: false}). All is well. Then I navigate to StateB, but StateB now has parameters that I set on the previous $state.go call for StateA.
I defined an onEnter event for "StateB" and it shows that the state is being entered twice, once with the correct parameters and then again with the incorrect parameters from the previous $state.go call. If I comment out the $state.go with notify = false, the URL of course doesn't update but the future page transition works as expected.
Also note that this happens despite setting in the HTML template ui-sref-opts="{reload: true, inherit: false"} and my version of ui-router is 0.2.15.
I can't be sure since I haven't experienced it or tested it but if you look at this github.io page, you'll see a part on the notify option. It says this:
notify - {boolean=true}, If true will broadcast $stateChangeStart and $stateChangeSuccess events.
So setting it to false would not broadcast those events. This would in turn not cause a change in the url when you move from StateA to StateB.
In my view I render collection and I have sort buttons.
When sort button is clicked then collection is fetched with some custom query param (like &sort=id+desc). It works but I would like to also change url querystring to this query param (&sort=id+desc). The problem is that it works but it re-renders whole view as router just redirects to different action (actually the same action but with different query params).
How I can just change url query param without reloading view and also add it to history?
I am using pushState in my app
You should use backbone router for this.
When application stars you need to run:
Backbone.history.start({pushState: true});
To change the URL just use you router:
router.navigate("something?key=value");
If you don't have a router you just create one:
var router = new Backbone.Router();
How should I update the address bar URL with a changing query parameter using AngularJS' ui-router to maintain state when refreshing the page?
Currently, I am using $state.transitionTo('search', {q: 'updated search term'}) whenever input changes, but the problem is that this reloads the controller, redraws the window and loses any text input focus.
Is there a way to update stateParams and sync it to the window URL?
I was having trouble with .transitionTo until I updated to ui-router 0.2.14. 0.2.14 properly changes the location bar (without reloading the controller) using a call like this:
$state.transitionTo('search', {q: 'updated search term'}, { notify: false });
edit: Played around with this some more today, and realized that angular ui-router has a similar option as the native routerProvider: "reloadOnSearch".
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#options-1
It's set to true by default, but if you set it to false on your state, then the state change won't happen when the query parameters are changed. You can then call $location.search(params); or $location.search('param', value); and the URL will change, but ui-router won't re-build the entire controller/view. You'll probably also need to listen for the $locationChangeStart event on the root scope to handle back and forward history actions within your app, as these also won't cause state changes.
I'm also listening for the $stateChangeSuccess event on my controller's scope to capture the initial load of the page/route.
There is some discussion on github for using this feature with path changes (not just URL changes): https://github.com/angular-ui/ui-router/issues/125 but I haven't tested that at all since my use case was specific to query string parameters.
The previous version of my answer mentioned this github issue:
https://github.com/angular-ui/ui-router/issues/562
But that's a slightly separate issue, specifically showing a modal of one state over another state without the non-modal state changing. I tried the patch in that issue, but it's clear that it isn't meant for preventing the entire state from reloading on URL change.
Update May 19, 2015
As of ui-router 0.2.15, the issue of reloading the state on query parameter changes has been resolved. However, the new update broke the history API back and forward capabilities with query parameters. I have not been able to find a workaround for that.
Original
Jay's answer didn't work for me, and neither did a ton of other answers. Trying to listen to $locationChangeStart caused problems when trying to go back and forth in the browser history as it would cause me to run code twice: once when the new state changed and another because $loationChangeStart fired.
I tried using reloadOnSearch=false, but that prevented state changes even when the url path changed. So I finally got it to work by doing the following:
When you change $location.search() to update the query parameters, use a "hack" to temporarily disable reloading on search, set query parameters, then re-enable reloading.
$state.current.reloadOnSearch = false;
$location.search('query', [1,2]);
$timeout(function () {
$state.current.reloadOnSearch = undefined;
});
This will ensure that query parameter changes do not reload the state and that url path changes will reload the state properly.
However, this didn't get the browsers history to change the state (needed for knowing when a query parameter changes to re-read the URL) when a query parameter was part of the url. So I also had to add each query parameter's name to the url property of the state.
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/?param1¶m2¶m3',
templateUrl: 'home.html',
controller: 'homeCtrl as home',
});
Any parameter names on the url are optional when listed this way, but any changes to those parameter names will reload the state when hitting the back and forward buttons on the browser.
Hopefully others find this useful and it doesn't take them multiple days to figure out how to do it (like I did).