Change URL Dynamically Without Adding Previous To History Stack - javascript

A stackoverflow question URL includes a servlet, id#, and title like so...
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
My webiste works the same way with URL's like so...
localhost:8443/user/1/admin
The query I do on the backend to get the users info only requires the id number. The name of the user after that is just for show. So if you typed this into the browser for localhost:8443/user/1/a it would give you the exact same page as this localhost:8443/user/1/admin
Stackoverflow is capable of noticing that the end part of the URL is missing and add it back. So if you put this into the address bar
stackoverflow.com/questions/824349/modify
They will change it to this dynamically
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
Now I did reading about changing URL's dynamically on stackoverflow and everyone kept referring to history.pushstate so I tried it. The problem with this is it adds the incorrect URL to the history stack. What I would like to accomplish is change the URL to the path it should be and not include the wrong URL to the history stack. So if the user decides to go back they go back to the actual page they were on last not, stackoverflow.com/questions/824349/modify. Just like stackoverflow does it. How could I do this!?

Check out the replaceState method.

Try using history.replaceState instead of history.pushState

Related

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

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

Accessing pushState URL on page load

I'm trying to create a gallery that allow custom url rather than url prefix with hashtag.
For example:
http://www.myportfolio.com/gallery/3
rather than
http://www.myportfolio.com/gallery#3
so far everything is working fine, if I access from http://www.myportfolio.com/gallery I was able to go to the next and previous image with the url updated.
My main issue now is although the url is now dynamic but it still cannot be bookmarked, if I enter http://www.myportfolio.com/gallery/4 to go the 4th image it doesn't work.
Is there a Javascript approach to this or do you need a combination of PHP to redirect the url?
It is possible to use client side JavaScript to handle this, although you'll need to set up the server so that every URL (that isn't for something like an image or script) loads the bootstrap document your SPA runs on. You just need to check location.href when the page loads and then set up the content you want.
That said, doing so is a very bad idea that completely misses the point of using pushState and friends in the first place.
The two points of being able to have a normal URL are that:
Clients where the JavaScript fails still get a useful page
The content for that URL is loaded in the initial page load (so it is available faster)
If you aren't going to take advantage of that, you might as well go back to hashbangs.

How can I find the actual link which is related to the javascript

I'm a student stuyding the bioinformatics.
I'm trying to make a crawler where I can put the lists of queries and get the results automatically.
The site I'm interested in is the GEO DataSet site.
www.ncbi.nlm.nih.gov/gds/
If I wish to send a query like 'lung cancer', I can use the following address.
http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer.
And there are 549 pages showing up.
I can get the results of the first page, but I don't know how to move to the next page.
I mean, how can I move to the next page by changing the URL?
The Next button is linked as "www.ncbi.nlm.nih.gov/gds/?term=lung+cancer#" and I don't think it's the actual URL that button is linked to.
I'm new to the JavaScript, but I heard the hash sign (#) is processed in the JavaScript
I wonder if there is something I can do like
"http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer&page=2"
so that I can move to the second page.
If you use any debugger tool (Firebug for Firefox, WebDeveloper for Chrome) you should be able to monitor the network traffic. If you do that, you'll see, that by clicking the next button a form is submitted, sending data via post method. However, when concatenating the post data to a get string you can also get to the next page. The following url lets you access to second page of the result set (warning: really, really long!):
http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer?term=lung+cancer&EntrezSystem2.PEntrez.Gds.Entrez_PageController.PreviousPageName=results&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPresentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sSort=none&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FFormat=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FileFormat=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastPresentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Presentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.PageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastPageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Sort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FileSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Format=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastFormat=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.cPage=1&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.CurrPage=2&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_ResultsController.ResultCount=10973&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_ResultsController.RunLastQuery=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.cPage=1&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPresentation2=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPageSize2=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sSort2=none&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FFormat2=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FSort2=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Filters.CurrFilter=all&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Filters.LastFilter=all&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.Taxport.TxView=list&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.Taxport.TxListSize=5&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.RelatedDataLinks.rdDatabase=rddbto&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.RelatedDataLinks.DbName=gds&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Discovery_SearchDetails.SearchDetailsTerm=%22lung+neoplasms%22%5BMeSH+Terms%5D+OR+lung+cancer%5BAll+Fields%5D&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.HistoryDisplay.Cmd=PageChanged&EntrezSystem2.PEntrez.DbConnector.Db=gds&EntrezSystem2.PEntrez.DbConnector.LastDb=gds&EntrezSystem2.PEntrez.DbConnector.Term=lung+cancer&EntrezSystem2.PEntrez.DbConnector.LastTabCmd=&EntrezSystem2.PEntrez.DbConnector.LastQueryKey=1&EntrezSystem2.PEntrez.DbConnector.IdsFromResult=&EntrezSystem2.PEntrez.DbConnector.LastIdsFromResult=&EntrezSystem2.PEntrez.DbConnector.LinkName=&EntrezSystem2.PEntrez.DbConnector.LinkReadableName=&EntrezSystem2.PEntrez.DbConnector.LinkSrcDb=&EntrezSystem2.PEntrez.DbConnector.Cmd=PageChanged&EntrezSystem2.PEntrez.DbConnector.TabCmd=&EntrezSystem2.PEntrez.DbConnector.QueryKey=&p%24a=EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.Page&p%24l=EntrezSystem2&p%24st=gds
This complete GET string contains all search parameters like items per page, search terms, display and way more. You should be able to figure out which parameter is used for the offset (cPage and CurrPage are your friends) and then alter it to your needs.
EDIT: Btw, to find javascript events bound to an HTML element, you can use the bookmarklet found at http://www.sprymedia.co.uk/article/Visual+Event+2

When updating a url/html title dynamically, how can I get a facebook like button to register the change? (NOT the href in fb:like)

I have a webapp that changes the url using window.history.pushState() based on the content that is dynamically loaded. I also have a facebook like button on the page that corresponds to the current element/url (also changed dynamically), and I also change the title of the page (document.title).
When I click the button when it's running, the update on facebook says "User likes this link". The link is the correct link going to the right URL, but beneath it is a little message that says
Original Title
Original URL
How can I get the facebook update to instead read:
Updated Title
Updated URL
Best,
Sami
EDIT:
Alternatively, does anybody know how to change the message that the facebook like button posts? If I could create my own message, I could easily fix this.
It looks like this question has been answered before here Update FB:Like URL Dynamically using JavaScript
there are a number of different solutions given
Edit to answer the clarified question:
The problem is recounted here Facebook Share doesn't pick up title / description meta tags that are changed after page load
To summarize: Facebook scrapes and caches your page title and description, the information is not submitted by the client.
One way around this is to have your server parse the hash or query string, as your javascript would, and serve a page with the title you want.

Update URL parameter with javascript, without ruining the history?

I'm looking for a way to update the url in the status bar..
I have a gallery, and when you click your way through the gallery I want the image ID to show up in the URL, so that the user can link directly to the image..
I've read about using hash and so. but as far as I've tried it, that "ruins" the history.
If I click the back-button in my browser the previous image would be shown.
Is it possible to add or update a URL parameter, without ruining the history?
Thanks in advance
Use location.replace to replace the current location:
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
Do it simply this way, when switching to images, add a hash to the url, for example:
location+='#image-'+image_id
your location will become
http://example.org/images/#image-3
instead of the initial
http://example.org/images/
and onload, check if location.hash is not empty, and matches with ^image-(\d+)$ (regular expression pattern), if it matches, do the usual thing you'd have done if a user clicks on image with id (\d+).
To preserve history, use reallysimplehistory.

Categories

Resources