Reload JSON file using jQuery on page refresh

Question

What I am trying to do here is this:

$.getJSON(sampleJson.json), function(data) {}

Read data from sampleJson.json display on webpage. The displayed data is changed on a webpage submitted through an AJAX call as below:

$.ajax({type: "GET", url: "...", data: "abc" ,
    Success: function(data) {}

The data is taken to server side where I used servlet to get data. Here lies the problem, I write the data in the same sampleJson.json so the json file is updated. Now I want the changed data to get reflected on webpage on a page refresh since I am using the same sampleJson.json for display data on page load, but the webpage is not displaying the changed data.

I hope the problem is clear, is there a way to solve this issue?

Thanga · Accepted Answer · 2016-03-01 10:59:20Z

1

This is because the cached content is supplied from the second request. Add a timestamp parameter with the json url that will make the http request a fresh one everytime you request .. Like below

 var curTimeStamp = Math.floor(Date.now() / 1000);
 $.ajax({type: "GET", url: "/json/sampleJson.json?t="+curTimeStamp, data: "abc" ,
Success: function(data) {}

edited Mar 1, 2016 at 10:59

answered Mar 1, 2016 at 9:18

Thanga

8,2003 gold badges22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sathishkraj Over a year ago

I am reading the json file from webapp folder , how do I add time stamp parameter here, also I tried giving json url as 'localhost/json/sampleJson.json?t=<timestamp> but still issue not resolved.Also tried adding '$.ajaxsetup({cache:false});' this appends timestamp at the end of line inside sampleJson.json

Thanga Over a year ago

$.ajaxsetup({cache:false}) is also an alternative way. By adding the timestamp, it will fetch the updated json content in that URL

sathishkraj Over a year ago

Thanks Thanga. It works wen I made the json available over http. What if i use a json file in file system, will it work?

Thanga Over a year ago

No If it is from file system, It is visible inside server only. Clients can access the json only if it is on web (http).

Dirk Vermeer · Accepted Answer · 2016-03-01 11:11:42Z

0

If you can modify the serverside serving the json file, then you can add 'no-cache' the header.

Doing this in nodejs-expressjs

..
res.setHeader('Cache-Control', 'no-cache');
res.json(yourdata);
..

but the how will depend on your serverside tech and the possibility to change it. (java?)

answered Mar 1, 2016 at 11:11

Dirk Vermeer

3783 silver badges6 bronze badges

Collectives™ on Stack Overflow

Reload JSON file using jQuery on page refresh

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related