I´m building a webpage that has a sort of catalog in it, which shows the current item and its description, and thumbnails for other items below it, if I click on a thumbnail of a different item, I have some script to change the description and the big image to the desired item. The problem is that I want this to reflect in the URL so the user could send the URL as a link to other to show the desired item. But I havent found a way to change the URL without having to reload the page, and for aesthethics, I dont want to reload the page.
Any ideas how to do this?
The solution is to use location.hash. Also, to implement it correctly, you might want to read this article from Google: Making AJAX Applications Crawlable
There is no reliable (cross browser) way to change the URL in the address bar without reloading the page - the very act of changing window.location.href (which I imagine is what your trying to do) tells the browser to reload the page (even window.location.href = window.location.href; will do it in some browsers).
I think you would have to put a [link to this page] element on the page and change that instead - you can easily populate it with the current URL either at the server side or using a window.onload function and manipulate it in the same way as you have been doing using element.value or element.innerHTML (depending on what type of element you choose to contain the link).
You can do it with hashes (see the window.location.hash property) but this can be messy programmatically.
The usual, currently-broadly-compatible way is to use a hash, e.g.:
http://myniftystore.com/catalog#11321R-red-shirt
then
http://myniftystore.com/catalog#11321B-blue-shirt
then
http://myniftystore.com/catalog#95748B-blue-slacks
...as you navigate items. You can change the hash on the page by assigning to the location.hash property, without reloading. This requires that you use some client-side script in the first place to figure out what to show when the user first goes to the URL (by examining the location.hash).
Google has a proposal out for how to make these things crawlable. Personally, I think they've really messed it up by requiring that weird hashtag (#!xyz rather than just #xyz), but if it's me or Google, I think I know who'll win. :-)
Coming down the pike there's the whole history API, but support isn't very thick on the ground yet (particularly not — cough — from certain vendors).
Related
As many of you have noticed, when you hit a link to switch from page to page in Google+ or facebook, the URL changes, the body changes but some parts of the page don't, like the chatbox. I believe AJAX can change a specific content of the page by requesting a PHP page from the server and get some results, but that won't change the URL.
Actually, I didn't know exactly how to search that in Google, so, any keywords/names/linkes will be strongly appreciated.
I'm using JQuery library for Javascript and Symfony2 framework for PHP, if this helps.
Look at the JQUERY load method.
http://api.jquery.com/load/
All you need to do is use a selector:
$('mydiv').load('newcontent');
Very powerful function. Look it up!
edit:
Sorry missed that url change. The trick alot of times with the URL is around the Hashtag. If you look closely at the URL there will be a "#" pound symbol in there somewhere. This allows the site to store current state without a reload.
Currently there is no way to change the URL in the browser save for the bit after the hashtag with out fully reloading the site.
you can either use iframe or ajax to keep some part of your page static.To change url either you can use hash hack.
window.location.hash = "pageidentifier"
or you can use the html 5 trick described in the url provided by arxanas
As some of you may know, Google is now crawling AJAX. The implementation is by far something elegant, but at least it still applies to Yahoo and Bing AFAIK.
Context: My site is driven by Wordpress & HTML5. An Custom Post Type has tree types of content, and the contents of these are driven by AJAX. The solution I came for not using hashbangs (#!) until fully understand how to implement them is rather "risqué". Every link as HREF linking to *site.com/article-one/?tab=first_tab*, that shows only the contents of the selected tab (<div>Content...</div>). Like this:
This First Tab
As you may note, data-tab is the value that JavaScript sends with AJAX Get, that gets the related content and renders inside a container. At the other side, the server gets the variable and does a <?php get_template_part('tab-first-tab'); ?> to deliver the content.
About the risqué, well, I can see that Google and other search engines will fetch *http://site.com/article-one/?tab=first_tab* instead of http://site.com/article-one/, making users come to that URL instead of showing the home page with the tab content selected automatically.
The problem now is the implementation to avoid that.
Hashbang: From what I learned, I should do this.
HREF should become site.com/article-one/#!first-tab
JS should extract the "first-tab" of the href and pass it out to $_GET (just for the sake of not using "data-tab").
JS should change the URL to site.com/article-one/#!first-tab
JS should detect if the URL has #!first-tab, and show the selected tab instead of the default one.
Now, for the server-side implementation, here is where I'm kind lost in the woods.
How Wordpress will handle site.com/article-one/?_escaped_fragment_=first-tab?
Do I have to change something in .htaccess?
What should have the HTML snapshot? My guess is all the site, but with the requested tab showing, instead of showing only the content.
I think that I can separate what Wordpress will handle when it detects the _escaped_fragment_. If is requested, like by Google, it will show all the content plus the selected content, and if not, it's because AJAX is requesting it and will show only the content. That should be right?
I'm gonna talk third person.
Since this has no responses, I have a good one why you should not do this. Yes, the same reason why Twitter banged them:
http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
Instead of doing hashbangs, you should make normal URIs. For example, an article with summary tab on should be "site.com/article/summary", and if it is the default one that pops out (or is it already requested) it also should change to that URI using pushState().
If the user selects the tab "exercises", the URL should change to "site.com/article/exercises" using pushState() while the site loads the content throught AJAX, and while you still maintain the original href to "site.com/article/exercises". Without JavaScript the user should still see the content - not only the content, the whole page with the tab selected.
For that to work, some editing to the .htaccess to handle the /[tab] in the URL should be done.
my question is about this website - http://www.bits-apogee.org/2011/
whenever you click on the link in the side navigation bar, the middle part of the website is dynamically loaded. Also, the url also changes, everything else remains unchanged. how is this done?
is this some query plugin?
I totally agree with #JMCCreative. It looks like it's an actual refresh. You should look at the following post on StackOverflow.
Modify the URL without reloading the page
The site is using Hashes (#) in the URL to denote the new content being loaded.
This is useful for people bookmarking dynamically loaded content (normally hashes load to specific areas on a page, named anchors or ID's for new browsers), because they don't trigger the page to refresh...
http://www.highrankings.com/urls-with-hashtags-307 there are drawback (SEO) concerns to this... however you will notice more and more sites doing it so i would assume the SEO robots will get better.
There are 2 possibilities:
You can use the HTML5 capabilities to change the url (history pushState), however this feature isn't available in all browsers yet. For more information, look at this SO post: Is there a way to change the browser's address bar without refreshing the page? .
You can use a hashtag (#) part as fall back for browsers who don't have above feature yet.
If you use jQuery, you can use the handy plug-in jQuery Address. This will take care of both above cases.
They're not using a plugin. They're doing an ajax request to a URL like this:
http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong
and dumping the overview in the container.
The circle of this type of process is usually like this:
listen for link clicks
on click, prevent default on event.
user window.history.pushState to update url
some other code - hears new history
generates a url to get the content.
ajax load the url
dump the data into a container
2 Libraries I have used, both are easier than the above, as they rely on loading a regular html page via AJAX instead the example site you point to, which used a JSON format to get the data.
Pjax - update peices of the page, by pulling that HTML node from a different URL.
Ajaxify - easiest solution, you could do that effect on an HTML site in 10 minutes.
Here's the situation.
I have a site where clicking hyperlinks within a certain div makes a jQuery function get the content of a div from a separate page. Because of this, the URL don't change. I need it to change as well as writing an entry in history.
My pages are setup like this (not sure this is the smartest way of going though)
access.php (main logon)
new-user.php
forgot-pass.php
index.php
controlpanel.php
etcetc. Now, all of these pages are reachable on their own and are mainly identical and all contain a div called "container". When clicking links, the content from this div gets erased and the content from the coresponding div (container) gets loaded from the file of the URL (href). I'm terrible at explaining..
So basically, what I need is some javascript that picks up the href link address and just pastes it in the url bar at the same time as it creates an entry in history so the back and forth buttons work.
I plan on extending this in a while as well, translating query strings as well. But there are a few constant static pages I need to take care of first. Any help would be very appreciated! :)
You are not allowed to change the entire URL by JavaScript but you can use URL hashes. I recommend you the browser history plug-in. You can simply register a handler to react on URL changes and load your corresponding content via ajax.
Have you looked at the jquery address plugin? Look at the examples. Is this similar to what you want?
It's not possible with "normal urls" (we must wait for a new generation of browsers...)
But there is a "trick": playing with anchors.
A link like "same_page.php#anchor" does not reload the page, but act on both the history and the adress bar.
So, if instead of having url like "page.php?param=lorem", you could have "page.php#param=lorem", you have your solution :)
hi im using ajax to extract all the pages into the main page but am not being able to control the refresh , if somebody refreshes the page returns back to the main page can anybody give me any solutions , i would really appreciate the help...
you could add anchor (#something) to your URL and change it to something you can decode to some particular page state on every ajax event.
then in body.onload check the anchor and decode it to some state.
back button (at least in firefox) will be working alright too. if you want back button to work in ie6, you should add some iframe magic.
check various javascript libraries designed to support back button or history in ajax environment - this is probably what you really need. for example, jQuery history plugin
You can rewrite the current url so it gives pointers to where the user was - see Facebook for examples of this.
I always store the 'current' state in PHP session.
So, user can refresh at any time and page will still be the same.
if somebody refreshes the page returns back to the main page can anybody give me any solutions
This is a feature, not a bug in the browser. You need to change the URL for different pages. Nothing is worse then websites that use any kind of magic either on the client side or the server side which causes a bunch of completely different pages to use the same URL. Why? How the heck am I gonna link to a specific page? What if I like something and want to copy & paste the URL into an IM window?
In other words, consider the use cases. What constitutes a "page"? For example, if you have a website for stock quotes--should each stock have a unique URL? Yes. Should you have a unique URL for every variation you can make to the graph (i.e. logarithmic vs linear, etc)? Depends--if you dont, at least provide a "share this" like google maps does so you can have some kind of URL that you can share.
That all said, I agree with the suggestion to mess with the #anchor and parse it out. Probably the most elegant solution.