How to implement routing with a single page application build solely using jQuery

Question

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.

That will solve the problem for sure but I have to learn those frameworks, not that I don't want to. But I'm looking for an easy way using my current skills :). Plus my app is so simple that using an SPA framework is an overkill specially with the time I will use to learn them and then code my app. — unbalanced_equation, Jan 02 '17 at 11:28
Unless thats the only way, then I have to do it anyways. Just being lazy, lol! — unbalanced_equation, Jan 02 '17 at 11:31
`Plus my app is so simple that using an SPA framework` I don't think so. You can write tiny app with AngularJS (I'm not that familiar with the rest) and it much easily than write it using jQuery/Vanila because there are some stuff that you should take care about (routing, pushState, analytics on SPA etc.). If you want to be a developer or something, you can't be lazy ;) — Mosh Feu, Jan 02 '17 at 11:34

score 7 · Answer 1 · answered Jan 02 '17 at 11:35

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:

<a href="#page2">Go to Page 2</a>
<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>

score 2 · Answer 2 · answered Jan 07 '17 at 16:07

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

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

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 :)

edited May 23 '17 at 12:33

Community

1
1

answered Jan 02 '17 at 11:35

Ilphrin

54
4

Thanks for your suggestion @llphrin but `window.location.replace(url)` will cause the page to refresh and that defies the whole purpose of app as being a single page application – unbalanced_equation Jan 07 '17 at 15:50
this will reload the page – Crash Override Apr 07 '20 at 05:41

How to implement routing with a single page application build solely using jQuery

3 Answers3

Linked