getJson only working once in Google Chrome

Question

I am currently working on a small random Quote Generator (Freecodecamp Project) with codepen.io. You can find it here: http://codepen.io/Baumo/pen/VjQbBj?editors=1000

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
  $(document).ready(function(e){
        $('#getQuote').click(function(){
        $.ajax({
          dataType: "json",
          url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
            success: function(a) {
            $(".quote").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>");
          }
        });
     });
  });  
</script>

<body>
  <div class="box">
    <div class="message quote">

    </div>
    <div class = "right">
      <button class="btn" id="getQuote">
        NEW QUOTE
      </button>
    </div>
  </div>
</body>

If I open the page with Microsoft Edge, it works just fine. But in Google Chrome the "New Quote" Button will only work the first time I click it.

Any Ideas how to solve this?

Thanks!

Answer 1

Chrome is aggressively caching your ajax requests. Add cache: false to the request:

    $.ajax({
      dataType: "json",
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      cache: false,
        success: function(a) {
        $(".quote").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>");
      }
    });

getJson only working once in Google Chrome

Question

1 answers

solution1
0 ACCPTED 2016-07-18 22:09:25

getJson only working once in Google Chrome

Question

1 answers

solution1 0 ACCPTED 2016-07-18 22:09:25

solution1
0 ACCPTED 2016-07-18 22:09:25