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!
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 :)
Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets.
Basically i have a bunch of ajax requests, variables and content that i want wiped when a user clicks 'new' (currently i'm using just using location.reload(); ) but want a more graceful way of doing it.
I'm really wanting to refresh it without the screen going white for a split second and also want to retain a single modal popup i have which is open when the user clicks 'new'.
So the user clicks the 'new' button, a popup appears taking a parameter, the site refreshes and the parameter is passed to an Ajax request kicking off the start process.
If anyone could point me in the direction of what to even look for it'd be much appreciated.
"Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets."
You can't refresh the website without making it look like it refreshed, the browser needs time to display the content.
You can, however, use jQuery .load to load some standard markup into your site to make it appear as it did when it was initialized, the browser won't refresh, just like making an AJAX call doesn't require the website to refresh.
I'm, however, unable to see why you want the website to refresh if only to make an AJAX call.
The simple answer is to have the content you want to reload inside a container i.e.:
<div id="container"> page content </div>
Then when you have successfully got new data from the ajax call you can empty the container with:
$("#container").empty();
and repopulate it with
$("#container").append(newcontent);
You can use jQuery's .load to request and replace a portion of your page, e.g. a container element.
For example, calling the following on index.html would effectively "reset" the #container element:
$("#container").load("index.html #container");
See "Loading Page Fragments" on the docs for $.load.
As for resetting variables and cancelling any pending ajax requests - you could perhaps write a reset() function to do all that for you.
Another possibility would be to put data in local storage, or in the url after a # before the reload. But your options for having it look like it isn't refreshing are pretty limited outside of jQuery .load or an XHR request (which is what the jQuery load does)
I have a page A that displays some text from my database. The text is editable and gets autosaved using AJAX. If the user would go away from that page, and then go back to page A using browsers history functionality, the page would not have the latest data (since we went back in history). And the user would edit the old data, which would overwrite the latest data on the server when it gets autosaved.
I assume this is purely a front-end issue, where my server can do nothing about this. What solutions could be aplied? If it was possible do detect with javascript that the user went back in history, then I could simply display a text saying that the user has to refresh the page. But is that even possible? Or are there any better solutions?
There are lots of options and strategies for a situation like this.
The first thing you can do is to try to disable caching on the page. You can use meta tags to do this.
You can also keep track of when the user presses the back button using libraries such as this one. You can respond either on the server or on the client, although you want to be careful because a disabled back button can annoy users.
Should you ever happen to consider using a javascript framework such as AngularJS you can probably keep track of the back button using the framework.
Finally you can solve issues like this with careful page design. If the data on a page can change you might load the current data via ajax before the user has a chance to edit it. By doing this - your "load" code will run even if the user does use the back button. Take a look at this stack for more information on that!
Hope these suggestions help a bit!
If you are using Jquery then use/
$(document).on('pageshow', '#Content' ,function()
in place of
$(document).ready(function()
It will solve your problem, the javascript file that is back end will be loaded when that particular page loads
I am trying to add a like button to a post in my RoR application. The two models I have are Post and Like.
On my webpage I am going to put the like button right next to the post button, but when users click the like button, I would like to have th request run in the background and not have to refresh the page.
Does anyone know of a simple way I could do this or where I can learn more about how to do it?
I am using the jQuery JavaScript library in my Rails application.
If you're using jQuery, you should use the jQuery.ajax() method, or one of it's deriviatives depending on your purposes. It runs in the background, and is very easy to use.
You can use jquery's ajax
api here
http://api.jquery.com/jQuery.ajax/
or even this one
http://jqapi.com/#p=jQuery.ajax
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.