CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Brendon Albertson
Brendon Albertson

Reputation: 25

Ajax not getting most recent version of JSON file

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.

Upvotes: 0

Views: 541

Answers (2)

Brendon Albertson
Brendon Albertson

Reputation: 25

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.

Upvotes: 1

Mr.Thanks
Mr.Thanks

Reputation: 225

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;
      // ...

Upvotes: 0

Related Questions