jQuery $.getJSON works only once for each control. Doesn't reach the server again.

Question

First my code

$.getJSON("./posts/vote/" + postId + "/1", null, function(result) {
   if (result.result == true)
      $("#pst" + postId + " > .pstside > .rank > .score").html(result.voteCount);
 });

I have a bunch of buttons each with code which brings some voting results from an ASP.Net MVC controller action.

This works well the first time the button is clicked, but if it is clicked again nothing happens. Nothing reaches the server.

I am testing on FireFox.

What is going wrong? Some kind of weird caching? Because the request never reaches my controller the second time, the javascript seems to execute okay but keeps returning the old values.

Answer 1

Since you are doing a "GET", it doesn't sound unreasonable that some caching (at the browser, a proxy / intermediary, or the server) could be the issue. Perhaps try using a "POST" if you are changing data ("keeps returning the old values"). Or introduce some random component into the query.

Answer 2

Sounds like a browser cache issue (if is that I'm pretty sure that is happening with IE), you may want to use $.ajax and set the cache option to false, since it is false by default only for dataType script and jsonp:

$.ajax({
  type: "GET",
  url: "./posts/vote/" + postId + "/1",
  success: function (result) {
    if (result.result == true)
      $("#pst" + postId + " > .pstside > .rank > .score").html(result.voteCount);
  },
  dataType: "json",
  cache: false
});

Or you could set that option globally, for all the jQuery Ajax functions, using $.ajaxSetup before using $.getJSON:

$.ajaxSetup({ cache: false });

Edit: You can do a POST request returning JSON like this:

$.post("./posts/vote/" + postId + "/1", 
  function (result) {
    if (result.result == true)
      $("#pst" + postId + " > .pstside > .rank > .score").html(result.voteCount);
  }, "json");

If you plan to do a lot of postJSON request, you can make your own function:

jQuery.postJSON = function(url, data, callback) {
    jQuery.post(url, data, callback, "json") ;
};

And you'll be able to use it just like $.getJSON

Answer 3

You can do the same with GET request also, just add a timestamp at the end of the request for example see the below sample request

http://www.abc.com/api/v1/votes?user=123&tag=jQuery&_timestamp=1234421352

This way the browser will not cache your requests ever as the url will change on every call. You can get the timestamp from Javascript easily. Also you need not handle this timestamp at your server side, but that is upto your discretion.