PagerJS refreshing navigates back to first page - javascript

I'm creating a single page application with KnockoutJS. It has 2 sections, home and history.
At the homepage there is an button and with the onclick you navigate to the historical section.
function initialize() {
model = new MonitoringViewModel();
pager.extendWithPage(model);
ko.applyBindings(model);
pager.start('home');
}
When the button is clicked i'm calling a method in wich pager.start('history'); is called. It works correct, but at the historical section when i refresh the page i'm navigating back to the home-page..
How can i make sure that when the page refreshes, the page doesn't goes back to the homepage?

I have faced this kind of situation before.My recomendation for this kind of app, use Angularjs for this. It can easily handle page routing and this kid of historical problems.
If you can not change the technology now, you need to handle this by using cookies.

Related

Skip jump link in browser's history using Angular 2

I use Angular 2 (v2.4.4) and by using routerLink I navigate between the components.
This works fine, but if I load the very save component with the very same snapshot parameter (active.snapshot.params) the page won't get loaded again. So, for example if I am on /page/56 and I click on a link here which points to /page/56, the very same link (from a menu or something), the component won't reload. (And things might change in the database since the last load, so the page needs to be reloaded.)
I bypassed it by pointing to /jump/page/56 and the Page 404 controller redirects to /page/56.
This also works fine, but if I navigate back in the browser from /page/56, it will get to /jump/page/56 which directs to /page/56 by the Page 404 controller. So basically I cannot navigate back.
As much as I know, I cannot delete browser history by the HTML5 history API, but how could I go back to the page, which was right before /page/56, just by simply clicking on the back button of the browser?
The solution might be a simple JavaScript trick independent from Angular 2, as it does not actually load a new page just loads a different component and changes the URL. (Also because of this I should not use location.reload() because it will reload Angular 2 and all the depending JS, etc.)
Thank you for your solutions in advance!
you can use skipLocationChange Like :
this.router.navigate(['/jump/page/12'],{skipLocationChange:true});
Seems the only way is to create your own dicrective inherited from [routerLink] to control click handler or just add click handler to current element with managing refresh by yourself.
<a (click)="navigate(['/jump/page/56'])">Navigate</a>
where
navigate(route) {
this.router.navigate(route, {replaceUrl: true});
}

Go back button in single-page webapp

I'm bulding my first WebApp. I've got a small navigation bar in the head where a back button should be placed. The Pages of the app are all placed in one document so the div's are set to
<div id="page_1" class="page" style="display:none">
and will be shown by clicking on a link
onclick="show('Page_dash');
Now i want to have a back button which goes back to the last shown page. I've tried this
onclick="history.go(-1);
but it's not working because there is only one page which contains all pages so the history.go(-1) goes to the last visited homepage. So i'm looking for a good, fast and simple solution!
thanks
In order to create an effective single page application (SPA), you will need to implement a method to track history that appears traditional to your end users. There are a few different techniques for this, but as a developer of enterprise-level single page applications, I highly recommend using the url hash method.
This technique allows your end users to bookmark specific "pages" in your single page app, along with using their browser's back button to return to the previous page. End users can become extremely frustrated with a single page app if they try to return to the previous page using their browser's back button, and find that they are returned to Google, or whatever site they visited before yours.
Here is some additional reading on the subject: URL Hash Techniques

How do I refresh the sharing URL for the AddThis Facebook button?

I'm using AddThis to render group of social media icons in the header of each page of my web app.
This is a Single Page Application (SPA), built on Angular.
So whenever the user navigates to another page, there's not a full page reload, but the components on the page are reloaded.
The trouble is, all the AddThis configuration stays the same. So even when the social media buttons get refreshed, the same sharing URL is shown when the user clicks the Facebook sharing button.
How can I clear this and replace it with the current page URL on each page reload?
From mucking around in the Chrome Console, I discovered a global property, addthis_share, which seems to allow me to update the sharing URL.
So I used code like this to updated it on each page reload:
window['addthis_share'].url = window.location.href;
window['addthis_share'].title = window.document.title;
I've encapsulated all the reloading code into a function, addthis_reload.
I had the same problem, but I found out that you could simply call addthis.toolbox() when you want the links to update.

how to navigate to previous page without refreshing it.in HTML

HI i have a ExtJS code on the front end. the drop downs on this page are loaded dynamically thru web-service call to 3rd party service. i have navigated from this page to the results page.
Now in results page i have a button which allows the user to go back to previous page. but all the data in the drop down should be retained.
i tried window.history.go(-1) and history.back()
Guys please help me.
If the navigation page is under different url than result page then it's not possible. You probably should save state of that menu for example in cookies, or in session on server so you could restore that state for each client. Also HTML5 client-side storage is an option.
Another possibility is to change the way result page loads, so you won't need reload page to go back (for example use AJAX).
I am using now extjs4 mvc design. We have a single html page, multiple views, a model and a controller.
On navigating to a new view, you need to hide the previous panels and when going back show the previous panel. This solved my problem of navigating and retaining view.
As above this is not suitable for mvc if you use it for multiple apps and older design where we use onReady().

What to do when browser back button doesn't have the intended effect

I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">

Categories