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.

did you check firebug -> net? You can see if request goes to the server and what respond do you get. — Eldar Djafarov, Aug 28 '09 at 06:15

Christian C. Salvadó · Accepted Answer · 2009-08-28T07:05:20.960

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

Actually it is happening with Firefox 3.5. $.ajaxSetup({cache:false}); solved it. I added a cache:true at the end of the request, but I really interested in sending a POST request because that is what this is. — Cyril Gupta, Aug 28 '09 at 06:43

score 2 · Answer 2 · answered Aug 28 '09 at 06:13

2

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.

answered Aug 28 '09 at 06:13

Marc Gravell

1,026,079
266
2,566
2,900

that sounds like a reasonable idea, let me check how to do post with jquery getjson – Cyril Gupta Aug 28 '09 at 06:20
I was able to use $.post satisfactorily. – Cyril Gupta Aug 28 '09 at 07:39

score 2 · Answer 3 · edited Jan 17 '12 at 18:45

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>

Mind if I ask if this stays enabled/disabled within the – InspiredBy May 18 '12 at 20:38 — InspiredBy, May 18 '12 at 20:38

score 0 · Answer 4 · answered Aug 28 '09 at 07:22

0

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.

answered Aug 28 '09 at 07:22

moha297

1,902
1
16
16

Well this is practicable, but not practical. I think doing a POST request was the most reasonable idea, but in scenarios where POST is not available for some reason we can use your or CMS's methods. Thanks – Cyril Gupta Aug 28 '09 at 07:38

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

4 Answers4

Linked