Using pushState to create "links" on an AJAX website produces 404s - javascript

I currently have my website set up with a single html file that uses on-click javascript functions to display various sections of the site differently as the user navigates around. The main page contains an audio player that I want to keep playing as the user navigates, which is why I've chosen the AJAX route.
I've implemented pushState across the site to produce URLs for each section that the user navigates to. These links don't work.
I have a couple questions regarding this: should I be using pushState to generate these URLs, or am I going about producing links the wrong way? And is there a way I can have a user reload a deeply-embedded page in the site, and then have the page constructed from the javascript somehow server-side?
EDIT: I feel like maybe if I could have all these links routed to a javascript file that then built the appropriate page, maybe that would work? Not sure if that's the way to go about it.
$('#menu a').click(function() {
var page = $(this).attr('href');
history.pushState({}, '', page);
$('#news').load('content/' + page + '.php');
return false;
});
Here's an example of how the menu is running this jQuery function on click, and then using pushState to make a new URL. Then, it loads in content into the #news div from the appropriate php file.
Is there any way I can link to this "state" of the page? I've been reading Jose Maria Arranz Santamaria's "Single Page Interface Manifesto", which has a lot of great info, but I'm sort of wondering what I should do next.

Pushstate is not the way you should use if the links don't actually work.
You can use the hashes to implement this easily.
You the event onhashchange.
The hashes are stored in the window.location.hash property. There would be no need to modify the browser history as well.
Refer to onhashchange and Hashes

Related

Load different pages while leaving certains divs behind

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.

Url change with animation

I found on a google website, that they realized a url-change without reloading of the whole page.
Example:
you are on www.googleio.com/first
click a button
url changes to www.googleio.com/first/second
the content "first" disappears with an transition to the left, and the content of "second" appears with another transition. the page isnt reloading.
how is this done?
someone told me, that you use the Javascript function 'Header("Location: ../second")', which is aborted after the browser types the url into the adressbar, but before he reloads. the you just let the new content appear with some other javascript. is this true? i couldnt find anything about this.
or is there another solution?
thx a lot!
This does not seem like an actual page reload, however an use of AJAX with a pushState router.
What is actually happening is that your browser is making an AJAX call to fetch the next page, and then displaying it when it has received it.
It is using the HTML5 pushState feature to update the URL.
pushState (which you can read more about here) is an HTML5 feature which is similar to the hashes (#) that sites used to use.

How do you change the URL in the address bar without reloading the page?

How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.

HTML5 Loading the external content into a div and using pushState()?

I have a main page "index.html". This main page is the enterance to the site which is done in HTML5. There are other pages for the site:
"about.html", "work.html", "portfolio.html", "contact.html"
So all of these pages have a div called "contentDiv" which has the copy/text accordingly. User enters the site via "index.html" and if user clicks on one of following the nav links:
About | Work | Portfolio | Contact
"index.html" page loads the content of clicked page's "contentDiv" using JQuery's load() call and then slides in the loaded div using animation.
Site is backward compatible so if Javascript is disabled then user is taken to the clicked page instead of having the "index.html" to load the content via load() call.
By the way, the nav link(s) are coded like this:
<a href="about.html" title='About'>About</a>
Once the "index.html" loads the requested content, By using pushState(), the URL is updated. So if user clicks on "about" link then pushState() updates the URL to:
"http://www.abc.com/about.html"
The reason I have not inserted any hash into the href tags, because I want the site to have a fallback just in case if the Javascript is disabled. This way, user can be directed to the requested page ('about.html') instead of "index.html".
So far all works well as expected however here is the issue. When user is on "index.html" and clicks on anyone of the sections for example "about.html", content is loaded and URL is updated via pushState(). So now the URL is "http://www.abc.com/about.html". Now if user refreshes the page("index.html"), "about.html" is loaded instead of "index.html" doing the load() calls.
Lets say if I code the nav href tags like this:
About
then the URL ends up having a hash in it. And if I copy and email the link "http://www.abc.com/#about" to a user, and if user tries to open the link via browser with javascript disabled then user will not be able to get to "about.html" because link only has '#about' instead of "about.html".
What I am trying to do is indeed doable I just don't know how to approach it. If anyone can help me on this that would be wonderful.
Forgive me, for such a long description.
Thank you.
I ended up setting all the nav hrefs to "". and then setting the hrefs values on document.ready() function.
$('a[rel=nav]').attr('href', '');
Thanks.
This code will achieve what you need to do and support the users with javascript disabled.
$('a').click(function() {
window.location.hash = $(this).attr('src');
return false;
}
Your urls will look something like http://www.yoursite.com/#about.html if you click on the about link and they work when you refresh.
If you want to learn more about making ajax sites I recommend you visit this blog Css-Tricks.com

Change browser URL and page content without reload and without using fragments

I'm well aware of the technique of using URL fragments to track state on an AJAX powered webpage, but lately I've noticed a lot of sites that are doing something similar but without fragments.
The picture viewer in the latest version of Facebook for example operates this way. The left and right navigation buttons are simple links with no fragments that when clicked change the browsers URL without doing a full page load.
Another example is GitHub's repository browser, each of the files/folders is a simple link that changes the page state and browser URL without reloading or using page fragments.
Can anyone explain, or point me to an explanation of how this works? I've done some searching, but there is so much content on using fragments that I haven't been able to find anything.
I believe this is due to the new History pushState HTML5 feature
They are using new HTML5 History API. I think this is what you want. check the menu items in this page http://tinywall.info/demos/html5-history-api/menu1.php
The tutorial to implement is right here : http://t.co/M4RvnvoQ

Categories