I have the following server-side URL mappings defined:
/main/item1
/main/item2
I've added SammyJS routing support so that I am able to do the following:
/main/item1#/ /* main view */
/main/item1#/topups /* topup view */
I've set up SammyJS like so:
s.app = Sammy(function() {
this.get('#/topups', function() {
console.log('Initializing topups view.');
});
this.get('#/', function() {
console.log('Initializing main view.');
});
});
The problem is, I have a summary section in my page that redirects to the topup view of a different "item". E.g., I am at the url /main/item1#/
, and in this page, there exists a tag <a href="/main/item2#/topups">item 2's topups</a>
.
I expect to be redirected (page refresh) to the new URL, however, it seems like SammyJS is intercepting the /main/item2#/topups
call and simply running the this.get('#/topups')
route I've defined.
I expect that since the URL paths before the hash, /main/item1
and /main/item2
are different, the SammyJS routing won't be triggered.
Is there a way to prevent this behavior from happening in SammyJS?
I'm pretty sure using the full URL redirect you.
<a href="http://www.example.com/main/item2#/topups">Item 2 top ups for the lazy coder</a>
However, that will cause the page to reload. If you modify Labib's answer you can have an even better solution:
this.get('#/topups/:item', function () {
console.log('Doing some post processing on current item');
console.log('Now redirecting you to ' + this.params.item);
window.location.href = 'http://example.com/menu/# + this.params.item +#/topups';
});
Again this will cause the page to reload, but if you do not mind that, then just either method.
NOTE: Sammy will also check form submission for you. This trips me up EVERY time I use it. This post has the solution.