Question

Background:

My webpage loads entries from an XML file via AJAX/jQuery and displays them (works fine)

The page also has a form that submits via AJAX/jQuery to a PHP file which writes to the XML file, then reloads the XML entries via AJAX/jQuery and displays them (works fine)

I have the following odd problem:

If I delete the XML file through FileZilla, or try to overwrite the XML file by uploading a copy from my local machine, the entries do not change at all when I’m looking at my page. In fact, if overwrite the XML file with a new copy, I see the new copy if I navigate to it in my address bar like: http://mysite.com/myxmlfile.xml, however, in the page that displays the XML entries, the old entries (like the file was never overwritten/deleted) are still displayed!

Confused!

---

Here’s my PHP file:

<?php

    header('Pragma: no-cache');
    header('Cache: no-cache; must-revalidate;');

    function signGuestbook($entry){

        $date = date("n.d.Y");
        $name = $entry['name'];
        $email = $entry['email'];
        $comment = $entry['comment'];

        $doc = new DOMDocument();
        $doc->preserveWhiteSpace = false;
        $doc->load('guestbook.xml');

        $root = $doc->firstChild;
        $e = $doc->createElement('entry');
        $dateNode = $doc->createElement('date', $date);
        $nameNode = $doc->createElement('name', $name);
        $emailNode = $doc->createElement('email', $email);
        $commentNode = $doc->createElement('comments', $comment);

        $e->appendChild($dateNode);
        $e->appendChild($nameNode);
        $e->appendChild($emailNode);
        $e->appendChild($commentNode);

        $root->appendChild($e);
        $doc->formatOutput = true;
        $doc->save('guestbook.xml');
    }

    function loadGuestbook(){

        $gBook = new DOMDocument();
        $gBook->load('guestbook.xml');

        $entries = $gBook->getElementsByTagName('entry');
        $entries_arr = array();

        foreach($entries as $entry)
        {
            $date    = $entry->getElementsByTagName('date')->item(0)->nodeValue;
            $name    = $entry->getElementsByTagName('name')->item(0)->nodeValue;
            $email   = $entry->getElementsByTagName('email')->item(0)->nodeValue;
            $comment = $entry->getElementsByTagName('comments')->item(0)->nodeValue;

            $entries_arr[] = array(
                'date'    => $date,
                'name'    => $name,
                'email'   => $email,
                'comment' => $comment
            );
        }

        return json_encode($entries_arr);
    }

    $entry = json_decode(stripcslashes($_POST['entry']), true);

    if($entry != null){

        signGuestbook($entry);
    }


    header("Content-type: text/plain");
    echo loadGuestbook();

    ?>

Here’s my JS file:

$(document).ready(function(){
    $.post('guestbook.php?' + new Date().getTime(), loadGuestbook, "text");
});

function loadGuestbook(gBook){

    var gBookDiv = $('div#guestbook');
    gBookDiv.empty();

    var entries = JSON.parse(gBook);

    $.each(entries, function(i, entry){

        gBookDiv.prepend(
            '<div class="entry">' +
            '<span class="date">' + entries[i].date + '</span>' +
            '<strong class="blue">Name:</strong><span class="name">' + entries[i].name+ '</span><br />' +
            '<strong class="blue">Email:</strong><span class="email">' + entries[i].email + '</span><br />' +
            '<strong class="blue">Comments:</strong><p>' + entries[i].comment + '</p>' +
            '</div>'
        );
    });
}

function signGuestbook(){

    var name    = $('input#name').val();
    var email   = $('input#email').val();
    var comment = $('textarea#comments').val();

    if(name == null || name == '' || email == null || email == ''){
        alert('You must provide a name and email.');
    }

    else{

        var entry = {
            "name"    : name,
            "email"   : email,
            "comment" : comment
        };

        var entryString = JSON.stringify(entry);
        $.post('guestbook.php?' + new Date().getTime(), { entry : entryString }, loadGuestbook, "text");

        $('input#name').val('');
        $('input#email').val('');
        $('textarea#comments').val('');
    }
}

Answer 1

This is a caching issue. To prevent your Ajax calls from being cached add the time to your Ajax call:

$.post('myphp.php?' + new Date().getTime(), { my : dataString }, myFunction, "text");