I need to know how is it possible using AJAX to navigate between pages like Facebook. When I click a link in Facebook the url in address bar changes and the main content area is reloaded with new content but the navigation list on left, header on top and chat on left side remain intact. It appears that those sections are not reloaded. How this become possible when the address bar changes? please ,if possible give a small example.
You can use libraries such as history.js coupled with ajax calls. This library dynamically modifies the URL as you are clicking around the site. The library is available at https://github.com/browserstate/History.js. And a great demo is available at http://rypit.me/demos/isotory/tutorial/history.js.html
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
Overview
I've set up a site using jQuery Mobile. The problem I'm having is that when I enter the site from an interior page (like the blog pages) and click on the navigation buttons in the header, I can go back to the homepage but then none of the ajax/hash-based navigation links work. In my header navigation I've linked the left-side navigation buttons directly with hrefs, not using data-rel="back". I'm not trying to use the buttons to imitate the browser's back button, but rather for absolute navigation. I've tested this on the desktop in Chrome and Firefox and on an iPhone running iOS 5 in Mobile Safari; the behavior is the same in all browsers.
Edit: (Note specific questions below in bold italic.)
What works and what doesn't
For example, if you go to the interior page http://slawson.org/blog/ and then click the < Kim button in the header to go back to the homepage, then you can only go to absolute links (like Blog) but none of the hash-based links (the other links under the "Portfolio" and "About" headers) work... clicking on the links does not fire a page transition, instead the links just blink and do nothing.
If you enter the site from the homepage — http://slawson.org/ — or one of the subpages of the homepage — like http://slawson.org/#web — this problem does not occur.
index.html — contains most of the other pages that use hash-based navigation (these don't work), e.g.:
Web Sites
iOS Applications
Print Publications
Logos & Branding
...
blog/index.html and blog/.../*.html — regular pages loaded via JQM's ajax loader (these work).
Question
Is there a problem with JQM and ajax navigation when entering sites from interior pages, or is this something that can be fixed by restructuring things or adding some jQuery somewhere? I'd like to avoid breaking every page into a separate html file.
Versions
I'm using jQuery 1.8.2 and jQuery Mobile 1.2.0.
Edit:
I looked at the JQM multi-page template docs and at these related StackOverflow questions:
jQuery mobile page navigation behaviour
Facing an issue in jquerymobile's multi page template stucture
JQuery Mobile - link from external page (SinglePage-template) to an internal page (MultiPage-template)
Things I've tried:
data-url
I tried adding data-url to the multi-pages in index.html, like so:
<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">
but that didn't help.
data-rel="external"
I tried adding data-rel="external" to links to the homepage, like this link on the navigation button on the blog page:
Kim
but that didn't help either.
data-ajax="false"
I tried adding data-ajax="false" to links to the homepage, like this link on the navigation button on the blog page:
Kim
This works (i.e., you can go to the homepage, then all of the multi-pages work) BUT the transition does not fire going to the homepage. Is there a way to add a transition to this link, perhaps by giving it a class and then using some jQuery to bind to that class to fire the transition? or is there a better way? (Of note, the back button works fine after I add data-ajax="false" to the link to the homepage. Clement Ho's answer here implies that adding it breaks the back button, but I'm not seeing that)
The problem is that the hash-based pages don't exist on the page when you're clicking the links to them. (<div data-rolw="page" id="#web">...</div> isn't there)
If you have a back-end framework set up, you could return the the hash-based pages, along with the requested page, whenever a non-ajax (the initial) request is made. Then those pages will be in the DOM no matter what page is loaded first.
The other alternative is, like you said, to break every page into its own file.
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
I use an ajax plugin (smartAjax) for my website and on one of my pages, I have google map. All is working perfect without using ajax but as soon as I use google map in combination with ajax, google map does not load correctly anymore.
You can view here:
http://mark-i-mark.com/lab/eys/public/ajax1.html
All looks great but when clicking on "SCHEDULES & FEES" in the top menu and then clicking on "OUR CONCEPT", which suppose to bring you back to the map, the map does not appear anymore. If you refresh the page, you can see a short flash of it but it does not load correctly.
This is about the address, as shown in the address bar because if you delete the last part (#ajax1.html), the map appears correctly.
Does anybody have any idea what I may do wrong? I am happy about any suggestions.
cheers ;-)
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?