I am using unobtrusive javascript to render search results from a get request -- a search.
When a user follows a search result and doesn't like it they need to be able to hit back and get to the same results.
How do I solve this problem?
You can use the HTML5 History API for modern browsers to change the URL every time you change the application state, and you call fallback on changing the URL anchor tag when you want to capture a history state. An example of the former is source code navigation in Github using PJax and Twitter is the example of the latter.
Related
Right now when the user inputs a word in the textfield and hits search, the form submits using $.get(). The data(JSON) is fetched from the server and then the UI is updated.
What I want to do is pretty simple:
1) When the form submits, the URL of the browser needs to update (something like search/zyx, zyx is what the user is searching for).
2) when the page is booked into favorites, or clicked as a link from somewhere the page needs to load and then the textfield value have to be 'zyx'. Also the UI needs to show search result of zyx.
This is important to my app because I will be using Google Analytics. So the URL is needed to reflect behaviour. Plus the other issue like back button history. Is this possible using just jQuery or some extremely light libraries build on jQuery. I have searched everywhere and all the solutions I found were using MVC frameworks. Or another solution was to use a templating framework like this one. However my app is way too simple for these solutions.
So, the approach you you need is to listen to hash changes in the url and based on this get the current page and render it in a cointainer. Something like this:
Go to Page 2
<div class="page-container"></div>
<script>
$(window).on('hashchange',function(){
var page = window.location.hash;
$.get('pages/'+page+'.html', function(pageContent){
$('.page-container').html(pageContent);
})
});
</script>
Thank you every one. So I ended up using a combination between #Tulio Faria 's answer and #Gabriele Mantovani.
To get the search keyword from url I used window.location.hash
To update url used history.pushState({id: 'query'}, '', 'some_url_string');
Used $(window).on('hashchange',function(){...}) to load page of the current search keyword if either back or forward buttons of browser were clicked
If I understand you want to change the URL of the user when some actions are done. There is an other topic about it HERE, and they use
window.location.replace(url)
Hope it helps you :)
I'm a beginner in using jQuery along with Spring MVC framework, trying my luck on building a basic utility that might be helpful at work. I've made a bunch of AJAX calls using jQuery in the code.
Now, I want to make use of the back button of the browser and figured I'd need to use an anchor in the URL. Not sure about how to proceed, after a bit of browsing tried window.location.hash="value" in the success part of the AJAX call, although the hash was appended in the URL, the back button did not work.
Any tip would be helpful.
Thanks :)
So the problem is that whenever you change the hash portion of the URL, the page does not reload or anything. That's the beauty and the curse of the hash... : )
Your solution only has one half of the overall solution: changing the hash value of the current url, so that your link can be shared with others.
In order for the back button to work, you will need to play around with the history API.(A good tutorial is here)
In your case, you will basically have to redo your previous ajax calls to get back the state from the previous page when the "popstate" handler is called. Or you could store the ajax response as you pushState to the history API. But either way, you will have to re-apply your dynamic page building on popstate.
The back button usually asks the server for the previous page's URL. Now in a single page application, you will have to do all that work yourself an rebuild the previous page somehow.
Hope this helps!
My site uses pagination to get to different event pages. The problem is, these conferences on these pages are not getting picked by search engines. Below is my code...
1
2
What can I do for SEO so Google will crawl and find all of the conferences on the other pages?
Make real pages with real URLs.
Link to the real pages instead of to javascript:;.
Cancel the default behaviour of the link (by returning false if you are going to keep using onclick attributes) so that the JS still has the effect you want.
Use pushState and friends to update the URL and make the back button work.
I am using the history.js plugin here: https://github.com/browserstate/history.js/ for handling HTML5 History in my application. And I want to handle both HTML5 and HTML4 versions (using the hash fallback).
You can see the demo here: http://dev.driz.co.uk/history45/
Question 1
How do I load the correct content based on the hash when a person visits a url with a hash in (hasn't clicked a link on the website) As the server won't understand what the code is and I don't want to have to double the request by checking if the hash exists and then calling the content via AJAX. So for example: http://dev.driz.co.uk/history45/#about.php doesn't load in the about.php content.
Update:
I've seen some examples here: https://gist.github.com/balupton/858093 which seem to cover loading the correct content (even optimised versions). But I'm struggling to get it to work in combination with my HTML5 version. View source: http://dev.driz.co.uk/history45/ AND it only runs when a person clicks a link instead of on page load which is the original issue.
Update 2:
Tried an example here: http://dev.driz.co.uk/history4/#/contact.php to get the content to load in contact.php content using the snippet in the source but doesn't work...? BUT according to the article here: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling#wiki-why-the-hashbang-is-unnecessary this code SHOULD be AJAX loading in the correct content if it has a hash on it. Any ideas why?
Question 2
How do I force the /#/ on the root and prefix all urls with `#/'
As currently if you try and visit a page via a link in a HTML4 browser, you end up with weird urls like:
http://dev.driz.co.uk/history45/#contact.php and http://dev.driz.co.uk/history45/#./
instead of:
http://dev.driz.co.uk/history45/#/contact.php and http://dev.driz.co.uk/history45/#/
And if I start on an inner page with:
http://dev.driz.co.uk/history45/contact.php and choose a link then I end up with: http://dev.driz.co.uk/history45/contact.php#about.php when what it should be is: http://dev.driz.co.uk/history45/#/about.php
How do I load the correct content based on the hash when a person visits a url with a hash in (hasn't clicked a link on the website) As the server won't understand what the code is
The server won't see the # or anything after it
and I don't want to have to double the request by checking if the hash exists and then calling the content via AJAX.
Your only other option is to redirect (by setting location with JavaScript) to the URL that you would have used if the history API was available.
How do I force the /#/ on the root?
You'd have to redirect to the homepage (again by setting location) if the history API isn't supported.
I take the view that if they are using a browser which doesn't support the history API (which probably means Windows XP and IE 8 these days) then they can get the non-Ajax fallbacks and I never have to deal with the hash hack.
If all you want to do is to force all browsers (both HTML4/5) to use hashes, you'd use change the History.js Options within your init
History.options.html4Mode = true
However, you may also want to consider using the $.address functionality from jQuery which can append any new URL you want with a hash.
Also within the $.address method, you could also determine where to redirect the user based on their init URL if they were accessing the site for the first time:
Say, have a user access a URL with say
http://www.site.com/#/about.php
you could then have a function which listens to any changes to any changes based on the URL changes
$.address.change(fn)
REF: http://www.asual.com/jquery/address/docs/
UPDATE
One thing I've discovered that may apply here is that if you have a click event handler which behaves by pushing a new state, even if you are currently on that same page, History js will append the same url to the end of the existing URL with a hash
e.g.
If on About Page (and your state is "about") and you click the about link -
your URL will change from
http://www.site.com/about
to
http://www.site.com/about#/about
To save yourself the hassle, have an if statement on that button that checks your History State for "about" and if not, pushState "About"
e.g.
$('.about.btn').on('click', function(e){
if(History.getState().data.State != "About") {
e.preventDefault();
History.pushState({"State": "About"}, null, "/about");
}
})
I have a page (http://myflashpics.com/picture/p9e0) with some user information in the side and small thumbnail in the side. What it's doing now is linking to a whole different page and the sidebar reloads as well. I was wondering if it was possible to change the image, comments section, the caption, as well the URL so if the user wants to link to it anywhere.
This might not be possible - but if it is I don't even know where to begin Googling this or even starting to comprehend how this will work.
All answers are appreciated! Links and source code would be nice too.
In browsers that support HTML5, you can use window.history.pushState to perform AJAX partial loading of pages and still completely change the URL of the page. This is what GitHub uses (see some more info as well as a video demonstrating the technique at their blog post, The Tree Slider). There is some great info on the subject on the Dive Into HTML5 History API page.
On browsers that don't support HTML5, you either must use location.hash (if you want linkable URLs) or else don't use AJAX (and stick with your current implementation). I am in the camp that uses jQuery for this task.
sounds like a situation for
jQuery history plugin
jQuery.ajax() – jQuery API
In short, you can't change the URL without reloading the page but you can use AJAX to load new data ad if the page had changed. You can also track history by changing anything after the "#" in the address bar. A good example of a site that implements this is grooveshark.com
You can do this simply using ajax. If you need to change the urls change the location.hash property using Javascript.