I've been facing this issue with Backbone routing and figured I'd spent enough time investigating:
There are two urls at play here: / and /post/:id. The / page has links to various posts via /post/:id. When I click the post link, the post page loads, but backbone immediately changes the url to /. Not only does this look bad, it also triggers route handlers at the wrong time. I'm not doing anything special... here's my code:
PostRouter = Backbone.Router.extend({
routes : {
"" : "doHome"
},
initialize : function() {
},
doHome : function() {
// do some stuff before navigating
window.location = "/";
}
})
...
var router = new PostRouter();
Backbone.history.start({ pushState: Modernizr.history });
Again, the doHome function is called immediately after the post page loads. Clearly this causes the site to navigate back to the home page. I can obviously remove that call to window.location to prevent that, but the url still gets updated to the root url, which isn't acceptable.
Thanks in advance!
UPDATE 1:
If I go directly to "localhost:808/post/:id" the url immediately changes to "localhost:8080/". However, if I do this exact same thing in private browser window, this behavior is not observed.
UPDATE 2:
Given what I found in update 1, I went crazy and started from scratch: I cleared 4 weeks of browsing history (sigh), stopped my local server and cleaned up all persistent sessions and redeployed my app. Alas, it worked! That said, I am not listing this as a solution as it doesn't help explain what exactly is going on and how to solve it. Additionally, it leaves me concerned about this happening to users of my site. I'd have no way to tell that this was happening and, even if I did, I couldn't tell them how to fix it on their end (clearing 4 weeks of browser history is not an option!). Can anyone shed some light on what might have been going on?
why don't you try to add
console.log(Backbone.history.handlers);
at the end to see, how your rout is added to Backbone.history. This might shed some light.
Related
I am working on a site that is transitioning to Angular - it uses Angular for single page application navigation and a new feature I'm currently working on is written entirely in Angular.
The rest of the site takes navigation results and returns them through the SPA model, the feature I'm working on runs entirely in a single page, but in order to make links shareable and bookmarkable it changes the URL in relation to the current state of the page.
So when someone selects a new subsection of the new feature, we have some code like this in the subsection service:
function setLocationForSubsection(subsection) {
var path = subsection.id ? "subsections/" + subsection.id + "/" + subsection.urlSlug : "";
$location.path("/section/" + path).search({}).skipReload();
};
If they follow a link to elsewhere in the site ( which goes through a $stateProvider.state('all', { url: '*urlPath?id', controller... pattern ) it works correctly.
If they then hit the back button, they come back to the correct page and setLocationForSubsection is called. If they click on the same link outside of the subsection again, nothing happens.
So this course of action occurs:
/section/2/subsection-name <- works.
/news <- works
back button ( /section/2/subsection-name ) <- works
/news fails
As far as I can tell, the problem arises because the location path setting fails to push the location into the angular state in this situation, so as far as angular is concerned it is still on /news and so when I try to navigate back there, it doesn't pick it up as a navigation event. I have tried using $window.history.pushState(null, 'any', $location.absUrl()); manually, but it doesn't seem to make any difference. If I drop the skipReload call it works but reloads the contents of the page, which is superfluous in this case. I'm using that approach for now, but I would like to know if there is a better option.
Is there a way to tell angular that a state change has happened in this case?
I'm using angular-ui.github.io/angular-google-maps/
I use the recommended lazy loading technique, I have this in my app.js:
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: '3.20' //defaults to latest 3.X anyhow
//libraries: 'weather,geometry,visualization'
});
})
And at some point in my controller, I execute this:
var uiGmapGoogleMapApiTimer = $timeout(function() {
reject("uiGmapGoogleMapApi didn't respond after 10 seconds.");
}, 5000);
console.log('DUDE.01');
uiGmapGoogleMapApi.then(function(maps) {
console.log('DUDE.02');
$timeout.cancel(uiGmapGoogleMapApiTimer);
geocoder = new google.maps.Geocoder();
resolve(geocoder);
}, function(err) {
console.log('DUDE.03');
});
So, when I'm offline, the timer will kick in, and I send the user back to the login page. (Originally I simply exit the app. It works in android, but in iOS it doesnt work, it's in fact forbidden by Apple).
So... that's why now I'm sending it back to login page.
Now, in the login page, I reactivate my wifi.... and once I'm back in the page that (is supposed to) show the map.... it breaks. The success handler of uiGmapGoogleMapApi.then never gets called. (Dude.01 gets printed, but Dude.02 nor Dude.03 get printed).
So... that page (wrongly) thinks that the device is still disconnected.
I suppose it's because the loading of google map javascripts is only done once (during load -- that´s why if I close my app, and return back, things will run just fine).
So... it's not really lazy loading (?). Or... if it's lazy loading, it doesn't seem to support scenarios like... try loading it the second time (if the first time failed because of connectivity).
Is anyone familiar enough with the source code of angular-ui.github.io/angular-google-maps/ to suggest what's the solution for this problem?
I looked at the logs I put in the library's code... I came to the conclusion: I need way to get line 183 to be re-executed on the second time I call uiGmapGoogleMapApi.then ... Currently it doesn't. It only gets called the first, when I start my app, and having internet connection since the beginning.
And based on what I understand from this doc on "provider", I need the uiGmapGoogleMapApi to be reinstantiated (right before) the second time I try to use it.
https://docs.angularjs.org/api/auto/service/$provide
Is that right? How?
Looks like I'm battling against provider caching here. Because I use dependency injection in my controller to get reference to uiGmapGoogleMapApi. (I have .controller('myctrl', function(uiGmapGoogleMapApi) {...})
what I might need is:
.controller('myctrl', function() {
var uiGmapGoogleMapApi = $injector.get('uiGmapGoogleMapApi');
//or something along that line maybe
})
I just tried it, still doesn't work.
Please help.
Thanks,
Raka
Well, my "solution" is: instead of going to login page, I simply refresh the app., by setting the current url of the window object to index.html.
I tried to follow this approach
While it does reload, it does not however allow me to stay on my current page. It keeps on going back to the first state of my app.
I am currently using ui-router. Is there another way of reloading the page without going back to the first state? I am currently experiencing an odd flicker when I do this:
$scope.submit = function() {
$state.go($state.current, {}, {
reload: true
});
doDeposit();
}
and then pass parameters on it (within doDeposit()):
var oResponse = data;
$state.transitionTo('deposit.status', {
opts: {
'response': oResponse,
'amount': data.amount
}
});
Current behavior: Page reloads; goes back to the home page for a second, then switches back to the intended page. I just need the data to refresh within its page. I have a 'submit again' button that redo the initial behavior of the first 'submit'. It re-processes the data available without going back to its initial state.
Hope this can help you solve your problem. Good luck to you!
Set URL to SEO Friendly Title with Dashes instead of ID
i'm sorry because first answer i'm copy wrong link. Hope this can help you:
https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/
I'm currently trying to figure out how to change the route parameters without reloading the entire page. For example, if I start at
http://www.example.com/#/page
but update a name to be 'George', to change the route to be:
http://www.example.com/#/page/george
If I already had http://www.example.com/#/page/:name routed.
Without reloading the location. Can one just set $routeParams.name = "George" ?
Edit:
Alternatively, is there a way to update http://www.example.com/#/page?name=George without reloading or resetting the page?
Ok, after a lot of searching. I answered my own question.
I've discovered finding anything on the angular documentation is incredibly impossible, but sometimes, once it's found, it changes how you were thinking about your problem.
I began here: http://docs.angularjs.org/api/ng.$location
Which took me here: http://docs.angularjs.org/guide/dev_guide.services.$location
Which took me to this question: AngularJS Paging with $location.path but no ngView reload
What I ended up doing:
I added $location.search({name: 'George'}); To where I wanted to change the name (A $scope.$watch).
However, this will still reload the page, unless you do what is in that bottom StackOverflow link and add a parameter to the object you pass into $routeProvider.when. In my case, it looked like: $routeProvider.when('/page', {controller: 'MyCtrl', templateUrl:'path/to/template', reloadOnSearch:false}).
I hope this saves someone else a headache.
I actually found a solution that I find a little more elegant for my application.
The $locationChangeSuccess event is a bit of a brute force approach, but I found that checking the path allows us to avoid page reloads when the route path template is unchanged, but reloads the page when switching to a different route template:
var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (event) {
if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) {
$route.current = lastRoute;
}
});
Adding that code to a particular controller makes the reloading more intelligent.
You can change the display of the page using ng-show and ng-hide, these transitions won't reload the page. But I think the problem you're trying to solve is you want to be able to bookmark the page, be able to press refresh and get the page you want.
I'd suggest implementing angular ui-router Which is great for switching between states without reloading the page. The only downfall is you have to change all your routes.
Check it out here theres a great demo.
I have a site that has a user page. On that page, there are several links that let you explore the user's profile. I'd like to make it so that, when one of those links is clicked on, the url changes, but the top third of the page containing the user's banner doesn't reload.
I'm using Backbone.js
I have a feeling that I'm in one of those situation where I have such a poor understanding of the problem I'm dealing with that I'm asking the wrong question, so please let me know if that appears to be the case
My mistake was assuming that there was a special, built-in way of doing this in backbone. There isn't.
Simply running the following line of code
window.history.pushState('object or string', 'Title', '/new-url');
will cause your browser's URL to change without reloading the page. You can open up the javascript console in your browser right now and try it with this page. This article explains how it works in more detail (as noted in this SO post).
Now I've just bound the following event to the document object (I'm running a single page site):
bindEvents: () ->
$(document).on('click', 'a', #pushstateClick)
pushstateClick: (e) ->
href = e.target.href || $(e.target).parents('a')[0].href
if MyApp.isOutsideLink(href) == false
if e.metaKey
#don't do anything if the user is holding down ctrl or cmd;
#let the link open up in a new tab
else
e.preventDefault()
window.history.pushState('', '', href);
Backbone.history.checkUrl()
See this post for more info.
Note that you CAN pass the option pushstate: true to your call to Backbone.history.start(), but this merely makes it so that navigating directly to a certain page (e.g. example.com/exampleuser/followers) will trigger a backbone route rather than simply leading to nowhere.
Routers are your friend in this situation. Basically, create a router that has several different routes. Your routes will call different views. These views will just affect the portions of the page that you define. I'm not sure if this video will help, but it may give you some idea of how routers interact with the page: http://www.youtube.com/watch?v=T4iPnh-qago
Here's a rudimentary example:
myapp.Router = Backbone.Router.extend({
routes: {
'link1': 'dosomething1',
'link2': 'dosomething2',
'link3': 'dosomething3'
},
dosomething1: function() {
new myapp.MyView();
},
dosomething2: function() {
new myapp.MyView2();
},
dosomething3: function() {
new myapp.MyView3();
}
});
Then your url will look like this: www.mydomain.com/#link1.
Also, because <a href=''></a> tags will automatically call a page refresh, make sure you are calling .preventDefault(); on them if you don't want the page to refresh.