Reloading ajax retrieved data after page refresh

Question

So, I have a page that has several links with onClick events that will retrieve data from external files and fill a div with this data. This works as intended. When I refresh the page, however, the div empties again. What I would like to happen is that after a refresh, the div will maintain the last content retrieved.

I'd prefer not to go down the road of cookies and have looked into adding data to the URL which I think is the way I want to go with this.

Is there some nice JQuery calls that can append data to url when a link is clicked and then on refresh restore the required content to the div?

My loadContent function is:

function loadContent (url, container) {
    var target = $(container);
    target.load(url, function (text, statusText) {
        if (statusText === "success") {
            target.find("a[rel^='gridnav']").initgn();
        }   
    });
}

edit: I forgot to mention, the line

target.find("a[rel^='gridnav']").initgn();

is used to re-initialise a script on the new content loaded.

So when I click a link, the onClick event calls the function like this

<a href="#" onClick="loadContent('xyz.html', '#right')">TEST</a></li>

where xyz.html contains only the data I want inside the div "#right"

Is there a way to edit this function to do what I want ?

See http://stackoverflow.com/a/3354511/65387 Once you've got the info you need in the URL, it's just a matter of handling the page load to check it. — mpen, Aug 17 '12 at 15:23

score 0 · Answer 1 · answered Aug 17 '12 at 15:24

0

You can append data to the url by using

window.location.hash

https://developer.mozilla.org/en-US/docs/DOM/window.location

If you search for QueryString in jQuery plugins, there should be dozens of plugins that simplify this task.

answered Aug 17 '12 at 15:24

Shmiddty

13,847
1
35
52

You can only get the value after the hash in JS, if I'm not mistaken. This means that you can't prefetch the data server-side and send it with the initial page load like the OP wanted. This would just allow you fetch it with ajax again. – mpen Aug 17 '12 at 15:30
The OP didn't mention anything about server-side processing. – Shmiddty Aug 17 '12 at 16:21
That aside, you can in fact get the value after the hash on the server side. In .Net, for example, you simply have to modify the form action to include any updated hash values. – Shmiddty Aug 17 '12 at 16:23
@Schmiddty: He wrote "after a refresh, the div will maintain the last content retrieved". I assume that means without fetching it again via ajax. Modify the form action? That might work if he's actually submitting a form, I assume he meant by pressing F5. – mpen Aug 17 '12 at 19:23
If he means "pressing F5", there is no way that the server will know what content was loaded, correct? So, the only way to maintain any kind of state on a server-less page after a reload would be to modify the URL in some way, either through querystring parameters or the hash value. – Shmiddty Aug 17 '12 at 19:39
The server will know if you tell it. There's lot of says to do that. Session vars, cookies, database values, files, whatever. It sounds like he wants to use the URL though. Which is fine. I'm just saying there's no way of getting the hash-value server-side that I'm aware of. http://stackoverflow.com/a/940923/65387 – mpen Aug 17 '12 at 23:40

score 0 · Answer 2 · answered Aug 17 '12 at 15:25

I'd use localStorage. It's like cookies but much, much easier to maintain. The only downside is that it's not supported by all legacy browsers (See http://caniuse.com/#search=localStorage for browser support). For an orview on thhe feature, see https://developer.mozilla.org/en-US/docs/DOM/Storage If you want to go with completely no cookie like features at all; well then it has to be done server side to the best of my knowledge

score 0 · Answer 3 · answered Aug 17 '12 at 15:26

Without cookies, your task will be a little bit harder. But I may have two solution for you:

Using session on server, you can control which ajax has been call, so next time when the main page is loaded, you can append the new content to it.
Using url hash to append ajax anchor has been click #anchorname so you can click it a gain after reload.

score 0 · Answer 4 · answered Aug 17 '12 at 15:27

The comment tells you how you can modify the url without a page load. You could use that. If you have to work with older browsers, then you can still use the fragment (or do both things).

There are some history plugins for jQuery/JavaScript that manage this .. it's a technique called "deep linking." You may be able to find something simple to work with. Basically when loadContent runs you would want to update the url from /whatever to /whatever#right with the fragment indicating the load-content ID or something like that.

Another alternative would be to set some flag on the server that loads into that div when the page loads initially, which would save you an ajax request too. Depending on how your server code is set up that may not work for you, though.

Reloading ajax retrieved data after page refresh

4 Answers4