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          


        

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

Yes, $.ajaxSetup({ cache: false }); does solve the problem! My application is with MVC 2. The code is like below:

<script type="text/javascript">
    jQuery(document).ready(function () {
        $.ajaxSetup({ cache: false });

        $('#btnApplyForm').click(function () {
            $("#applyForm").html("Loading...");
            $("#divApplyForm").dialog("open");
            var id = $('#applyFormID').attr("value");
            $.get('<%= Url.Content("~/Applying/FillApplyForm/") %>' + id,
                    function (response) { $("#intakeForm").html(response); }
            );
            return false;
        });

        $("#divApplyForm").dialog({
            title: "Application Form",
            autoOpen: false,
            bgiframe: true,
            modal: true,
            width: 600,
            height: 540
        });
    });
</script>

Answer 3

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 4

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.