Right now, when a user clicks on a link on my site, I use ajax to only replace the content in the main frame (the header and a sidebar need to keep state across pages, so I don't want to reload them). I use pushState and popState to alter the url bar.
I explicitly do not cache the ajax content and my site works fine--but it's a bit too slow-feeling, particularly on 'back' commands.
If I do cache the xhr html requests, then the site works well internally. However, if a user enters a new URL and leaves the site, if he/she hits the 'back' command, only the unstyled, header and side-bar-less main view content will be pulled from the cache and the site won't display properly.
Is there any way for me to have caching internally but flush the cache if the user leaves the page?
I think I understand your description now.
When I visit /page1.html on your site then the downloaded HTML has main content + header + sidebar.
When I click a link to visit /page2.html, AJAX loads the page and the downloaded HTML has main content ONLY.
So, at this point the cache contains a full /page1.html and a partial /page2.html
Now, when I leave your site and then return with the back-button, the browser grabs /page2.html from cache. But that is only a partial page, and your site "breaks".
Ideally you want the browser to grab partial content only when requested with XMLHttpRequest.
Also, it would be nice if both the partial and full pages could be cached.
pjax addresses this issue by appending a _pjax=true param to the URL query in the AJAX request. I think this should just work in most scenarios.
NOTE that you don't add this param to the URL that you pass to pushState().
An alternative to this would be to ALWAYS download the full page, and then extract the #main-view when using AJAX.
Of course, you could make this someone else's problem by switching to PJAX (you'll need to use the fragment option).
Another JS lib that handles pushState() for you is my HTMLDecor project. With HTMLDecor, your pages only contain main content + a <link> to another (presumably shared) HTML page that contains the header / footer / sidebar. HTMLDecor adds these to the page from within the browser. When the user clicks on a link to browse to another page, HTMLDecor uses AJAX and pushState - no configuration needed. Of course, if the browser doesn't support pushState then a normal link navigation occurs.
Related
I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.
I want to know how some web pages move between different PHP pages without reloading the entire page. Here some divs stays the same. If I use AJAX i cannot share the link of the page, so I need to do this. Thank you.
You have to use AJAX in order to do that.
BUT if you want to be able to share the link or handle reload ou need to build a navigation system using # and some javascript around it.
There is a lot of example for doing that on the web.
https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=tutorial%20build%20ajax%20navigation
You could just load a new page and include the same divs of the page :
include 'div1.php';
You could use the other answers below and just use ajax but also build a url at the same time so you can navigate back to the same structure of the page.
clicking the link modifies the url, eg:
document.title = document.title + '?div1=true'
Modify the URL without reloading the page
and then just does an ajax call to load a new section. And on first page load, parse the url to check what divs to load.
you could use iframes:
<iframe src="/div1.php" id="div1"></iframe>
And clicking a link loads new stuff to a specific iframe.
I have a signup page that has links to 3 different pages. I want to preload all 3 of those destination pages while the user is still on the signup page. This way, the user does click it, it will load immediately.
Is it possible to do this using AJAX or an iframe and have the contents of the URL cached to by the browser?
Now chrome supports dns prefetching. But it is pretty new and not all browsers supporting it.
You can load all the resources(scripts, styles, images) in the upcoming pages in your signup page dynamically. In this way browsers will cache the resources. And, if you are using partial templates, you can preload that also.
This can be achieved with ajax.
On page load start loading the three pages, as soon as you receive each html file place them in three different hidden divs, when the user clicks a link hide the correct div. Remember to check what happens if the user clicks a link before you get your html back
We have a header on our main website (Site #1) that is then fed to another website (Site #2). The header has a "My Account" link that is supposed to belong to site #2. When you click on from site #1 it loads full page same window correctly. When you go to site #2 and click the button it loads ONLY in the iframe at the top of the page (essentially the same area that is holding the header).
Site #1 is www.saclibrary.org
Site #2 is www.saclibrarycatalog.org
The original link that is supposed to be there for the my account link is https://find.saclibrarycatalog.org/iii/encore/myaccount
To get it to work for now I had to change the link to a redirect page on the first site, then have that page auto-redirect back to the second site's my account page. The urls in the iframe work correctly for any link that is not the same domain (saclibrarycatalog.org). That's why my work around works, but the original link in the same domain does not.
I've found a lot of places online telling you how to make a link load only in the iframe and not in full same page, but not the other way around, and I can't seem to reverse engineer any of those tips. Another web developer I talked to said it was a browser issue, but we have not done any updates to the browsers on the computers here. We are running firefox 25.0.1, and IE 9.
Thanks in advance!
You should really modernize your method. Using php, asp or cgi (depending on your hosting server capability) will allow you to split your header from the rest of your page (as for the footer and any other part). So loading your page and checking the requested URI, you can decide what is shown, when, and even don't load certain parts of your page.
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?