This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to create a static (non-refreshing) menu bar like Facebook?
How Facebook ajax work technologies? Can you tell me how change URL without refreshing page and static header in rails
Use history.pushState() to change the browser URL without reloading the page.
http://diveintohtml5.info/history.html
You can then add an event listener to the popstate event and react accordingly when the back button is used.
Read my answer
PJAX loads html from your server into the current page without a full page load. It's ajax with real permalinks, page titles, and a working back button that fully degrades.
Related
IOS 8.0+
My app use UIWebview to visit a forum site.
The forum front page contains two tag: default one is 'Recommend', another one is 'Newest'. Using ajax to load post data When user switch to 'Newest' tag, at the same time the page runs the follow codes to save state:
window.history.pushState(null, title, url);
After that if user is interesting with some post, he/she would click link and jump to a new page to view detail of the post. In this page, I use follow code to let user have a way to go back to 'Newest':
history.back(-1);
Now interesting thing happened, go back to 'Newest' tag but post data is old.
After some tests, I found the data is always be the first time loaded after installed the app. This bug will not happen in Safari or Android app.
I believe it should have some relationship with webView cache.But why UIWebview does't use new cache? And how to
solve this problem?
Oh no...nobody meet this problem?
My current solution is:
use js code to auto refresh the page when go back.
I am building an app using Backbone.js and jQuery Mobile. On some pages in my app I have external href links and I'm running into an issue.
When a user clicks and external href link, get taken to the external site and then hits the back button. My app does not load from the proper page where the user originally left the app from.
In fact my entire DOM is reset so it looks like my site gets a complete refresh and doesn't keep any of its former state.
I have been trying to search for a solution but this issue is kind of hard to word out. I hope it makes sense.
Does anyone have any suggestions?
UPDATE
Stupid error on my part.. I had a bad id set on the page and it didn't load the data I had saved in the session for it when a user returns to the page.. Changed the id and all is well. Thanks!
Link
Make you external links open up new tabs.
If you have used one html with multiple pages solution then there's an explanation for this.
rel="external" will cause a full page refresh so last page location will not be remebered. When you return to the last location it will trigger new refresh and the first page will be shown again.
This can be prevented with a multiple html page solution.
I have a question that
Point> I don't want to know generally function of modal, but like Pinterest
Question core > 1. Can i change the URL when i use ajax without "reloading"
Work flow >
1) On Pinterest, i click on a image
2) A modal window opens up, but the URL of the page also changes without "reloading"
even though it use ajax
I've known that when i using a modal function, it dosen't change the URL on the page,
but not on Pinterest
URL change e.x) rootURL -> otherURL
3) I click the background of the modal, the URL of the page also changes without "reloading"
and modal windows closed
URL change e.x) otherURL -> rootURL
So, If you have some solution or information, please let me know that.
Also I have red related question answers, but it's not enough. and don't want to get information obout HTML5 API cause i'm not going to provide HTML5 service
How can I duplicate Pinterest website's modal effect?
Pinterest like ajax loading
Changing the Url without a HTML call
Manage in the same url the Full HTML document and a JSON object (or a partial HTML response)
you can do like this http://mazzimo-in-london-eng.blogspot.com/2013/01/the-pinterest-url-sorcery-how-pinterest.html
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
I see twitter's url is this type:
twitter/#!/username
I known that twitter's front page uses ruby on rails framework, but "#!" is not the suggest type in RoR restful routes. So why twitter uses this strange url type? Is there any special reason?
It's a hashbang URL. In the days before HTML5 JavaScript URL rewriting, there was no way to rewrite stuff in the address bar, except for the hash symbol. Natively, the hash symbol in a link points to the id of some element on the webpage. This is overridden in JavaScript to perform other actions.
It's really weird that Twitter is using it, especially since there are libraries that failover to using hashbang but use the new history.pushState function when it's available.
Twitter uses AJAX a lot on their pages. You almost never see a reloa of the whole page. By using those anchor links they avoid reloading the page but still give you a chance to store the current state of the page as a favorite or use the back button of your browser
I am using JQuery mobile in asp.net web form website. I have the following code at the page "pageA.aspx".
View Saved Orders
When I am clicking on this link I am successfully redirected to the PageB, but the URL I am getting is
http://localhost:3244/MyFirstJQueryApp/PageA.aspx#PageB.aspx
But I want URL like this further processing, please help
http://localhost:3244/MyFirstJQueryApp/PageB.aspx
I have done it by setting target="_top" property.
Is this a good practice ?
There are a couple of mods out there (can't find the one I wanted) to remove the hash in the URL, but you have to edit the jQM framework.
You could try using the changePage() http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html and set the transition without tracking it in history option to true (I think it's true)
Here is some more documentation on navigation as well: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
mightbe able to think of another way
The idea behind jQuery Mobile is that you don't do it the way you're trying to do it! Check Dynamic pages with jQuery Mobile, which shows you how to let jQm do the work in the background by loading new data into the DOM.