Ajax not getting most recent version of JSON file

Question

I'm rather new to terminology and coding in general, but I've tried to trim down my code, though it may still have redundancies. Thanks in advance for your understanding.

I'm using an ajax and php script to write some data to a file on the server called data.json. The script works fine, and opening the json file shows that it's indeed updated with the data. The json file simply contains an array of objects.

Here's the code that does this:

function writeData() {
    $.ajax({
        type : "POST",
        url : "save.php",
        async : true, 
        data : {
        json : JSON.stringify(dataToWrite)
        }
    });

document.getElementById('success-box').innerHTML = "Data successfully written.";
};

...and the PHP:

<?php
   $json = $_POST['json'];
   $file = fopen('data.json','w+');
   fwrite($file, $json);
   fclose($file);
?>

The problem I'm having is this: The user can navigate to a separate HTML page, and can click a button to view the data in the json file in a nicely-formated way. This is done via another ajax script that reads the data. This latter ajax script doesn't seem to be able to "see" the newly updated json file. It instead loads the old version of the file, before it was updated with the first ajax script. I'm sure that this second ajax script is run after the above writeData() is finished, because it's actually on a separate HTML page entirely, which is loaded later, after the user clicks a button.

Here's the second ajax script that reads the data from the data.json file (it's on another, separate HTML page):

$.ajax({
        type : "GET",
        url : "http://eslquiz.net/ell_errors/data.json",
        async : true,
        dataType : 'json',
        success : function(response) {

          data = response;

          document.getElementById('main').innerHTML = `
                <div id='top-stuff'>
                    <button onClick='viewData()'>Reset Filter</button>
                    <button onclick="print2()">Print Worksheet</button>
                </div>
                <br>
                <div id='left-column' class='column'></div>
                <div id='right-column' class='column'></div>
          `;

          leftColumn = document.getElementById('left-column');
          rightColumn = document.getElementById('right-column');

          leftColumn.innerHTML = "<b>Sentences:</b> <br><br>";
          rightColumn.innerHTML = "<b>Errors:</b> <br><br>";

          //add the sentences and their errorTypes:
          for (i=0; i<data.length; i++) {

            var senBox = document.createElement('div');
            senBox.className = 'box';
            senBox.setAttribute('id', 'sen' + i)
            senBox.innerHTML += data[i].text;

            var errBox = document.createElement('div');
            errBox.className = 'box';
            errBox.setAttribute('id', 'err' + i)
            errBox.innerHTML += data[i].errorType;

            leftColumn.appendChild(senBox);
            rightColumn.appendChild(errBox);

          }

        }

    });

All of these files are hosted in the same directory on One.com.

The strange thing is that when I manually open the data.json file and edit its contents in any way (by deleting everything, for example), the next time the ajax call is made, it reads the version I just manually updated. This makes me think it might be something to do with the One.com server refreshing itself?

I tried adjusting the ajax between synchronous/asynchronous, and using cache: false, but these don't seem to affect anything.

I've searched around, and can't seem to find out what's going on here. Thanks for any guidance you could provide.

Perhaps you are calling the second ajax before `writeData()` ajax has completed? Show more code context — charlietfl, Aug 02 '18 at 21:39
Thanks. The second ajax is actually on a separate HTML page to avoid the problem of being run before writeData() is completed. The user navigates to this second HTML page only after the data is added with the first ajax. Updated question to mention this. — Brendon Albertson, Aug 02 '18 at 21:43
this might be worth a read/try: https://stackoverflow.com/questions/33390424/how-to-control-cache-control-in-ajax-request — Jeff, Aug 02 '18 at 21:53
as a I test I would try to serve that json via php-script. Either only to test where the issue is coming from or as a final solution (which would give you also the possibility to _hide_ that `data.json` from not logged in users) — Jeff, Aug 02 '18 at 21:55
sidenote: the online `data.json` right now is not json so will throw an error latest at `data.length` — Jeff, Aug 02 '18 at 21:57

score 1 · Answer 1 · answered Aug 03 '18 at 14:14

1

Thanks. I ended up using the following:

jQuery.ajaxSetup({
    cache: false
});

I tried using this before, but for some reason it didn't work, not sure why. But it's working now! Thanks.

answered Aug 03 '18 at 14:14

Brendon Albertson

25
4

score 0 · Accepted Answer · answered Aug 03 '18 at 03:51

first, GET method can be cached by the browser. second, Make sure the response is a json type

$.ajax({
    type : "GET",
    url : "http://eslquiz.net/ell_errors/data.json?rand_v=" + Matn.random(), // add a random try again
    async : true,
    dataType : 'json',
    success : function(response) {
      // Make sure the response is a json type
      // console.log(typeof(response));
      // console.log(typeof(JSON.parse(response)));
      data = response;
      // ...

Ajax not getting most recent version of JSON file

2 Answers2