How to refresh ajax results based on link clicked

Question

I have a problem. I'm sending a ajax request and I get the data to load the right results depending on the link that's click. When I click a different link and request the results to reflect that link. It retains the value from the previous link. Any help would greatly be appreciated. Here's what I'm doing. Here's my ajax call

$('body').on('click', 'button', function () {
    $.ajax({
        url: fullUrl,
        type: "GET",
        dataType: "json",
        ifModified: true,
        success: onDataReceived,
        error: onError//,
        // data: data
    });
});

Now when I click the button I get the right values the first time, but when I click a different link to change one of the values the result doesn't change. Like it's caching the results. I've tried setting cache to false, clearing browser cache to now avail. What am I doing wrong

My success function is this

function onDataReceived(series) {
    // Push the new data onto our existing data array
    count = 0;
    for (var prop in series) {
        if (series.hasOwnProperty(prop))
            ++count;
    }
    for (i = 0; i < count; i++) {
        if (!alreadyFetched[series[i].label]) {
            data.push(series[i]);
        }
    }

    $.plot("#placeholder", data, options);
}

Are you sure you get a different response from the server? Does `fullUrl` change based on which button is clicked? You don't show how/where it is defined. So, with this little information I would say that `fullUrl` is the same for every call and that's why you get the same response. — Felix Kling, Aug 23 '13 at 18:17
Yes I'm certain that I'm getting different values from fullUrl, I'm watching the url through console just to make sure. — Eric Evans, Aug 23 '13 at 18:20
Then maybe it's not your ajax code, thats the issue, but probably the success event. — André Snede, Aug 23 '13 at 18:36

score 0 · Answer 1 · answered Aug 23 '13 at 18:20

0

Add a query string to the URL typically current time like :

var time= new Date().getTime();
var path = 'http://hostname.domain.com/api?time=' + time;

This will make sure the URL changes each time, so ideally no caching will occur

answered Aug 23 '13 at 18:20

Farhan

752
4
10

Now it won't return any data because the url has been changed. Also if I set cache to false it will put a value in front of the url, but I still get data. So I don't think that will solve my problem thanks for trying. – Eric Evans Aug 23 '13 at 18:24
I've done that and set cache to false. The problem I'm having is every time I send a get request I get the data from clicking a button. If I click it again the old values stay and new values cover it. – Eric Evans Aug 26 '13 at 00:24

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Local cache disabling
The easiest way and propably also the most intuitive way, is to add the cache: false parameter to your ajax call.

$('body').on('click','button',function() {
      $.ajax({
            url: fullUrl,
            type: "GET",
            dataType: "json",
            ifModified: true,
            success: onDataReceived,
            error: onError//,
            // data: data,
            cache: false
        });

     });

It does exactly what Farhan says, but it's internal so it might be easier to remember, also it is way more readable what you are trying to accomplish, so that will help the next dev or yourself, to figure out your code later on.
Read more about the jquery-ajax object here: http://api.jquery.com/jQuery.ajax/
- Searh for cache on the page.

Global cache disabling
You can also do it on a global scale, for the entire page, though I would not recommend that.

But if you really need to, put this in the page load event:

$(document).ready(function(){
      $.ajaxSetup({ cache: false });
      // ... Other init code
});

The global question has been asked here before: How to prevent a jQuery Ajax request from caching in Internet Explorer?

edited May 23 '17 at 12:13

Community

1
1

answered Aug 23 '13 at 18:24

André Snede

9,899
7
43
67

I've did both and it's still caching. Can't figure out whats going on. – Eric Evans Aug 25 '13 at 23:43
What browser are you using? Check it's console/network utility, to see the return code of the request. If its caching, even after a timestamp, it's not the browser that is caching then. – André Snede Aug 26 '13 at 06:00
I'm using chrome, ie, and firefox. I don't think it's caching it's just duplicating json values over and over again in the same place. What i'm trying to do is have to plot refresh with new data. – Eric Evans Aug 26 '13 at 22:10
First of all, are you getting the right response from the server? If so, please share your success function with us. – André Snede Aug 26 '13 at 23:35

How to refresh ajax results based on link clicked

2 Answers2