Can't refresh using jQuery.Get() method

Question

I'm using the AJAX method jQuery.Get() because it's really simple to use. I use this to load pages into a div. But when I change this page that is being loaded and click Refresh. It won't be updated. The only solution is to exit the browser and reopen it and go to the website again. This is really anoying and I wonder if there is a solution to this.

More info on the method: http://api.jquery.com/jQuery.get/

Code used:

function pagina_ophalen(pagina){    
    $.get('paginas/' + pagina + '.html', function(data){
    $('#inlaadcontent').css('display','none');
        $('#inlaadcontent').html(data);
    $('#inlaadcontent').fadeIn("slow");
    });

}

Thank you very much. Dylan

Answer 1

The simplest change you can make to get this working is

function pagina_ophalen(pagina){    
    $.get('paginas/' + pagina + '.html',
          { t = new Date().getTime() },    // ADD THIS
          function(data){
            $('#inlaadcontent').css('display','none');
            $('#inlaadcontent').html(data);
            $('#inlaadcontent').fadeIn("slow");
          });
}

What's the difference?

Your browser is caching the result of the AJAX request because the URL is the same each time. By adding a query parameter that is variable (?t=xxxxxxx, based on the current timestamp) you make the browser consider each request as a new one and fetch the page again instead of using the cached result.

If you take a look at the jQuery.ajax function (of which get is simply a convenience-targeted subset), you will see that there is a cache option you can set. This does exactly what I described above if set to false.