ajax receives previous response when browser back button is clicked?

Question

I have a set of divs each containing a set of products for an e-comm site. Only one div is visible at a time when a certain stock button is clicked.

When a user opens up a new div i have an ajax method send $_get variable to a php file that updates the database with a panel number so i can keep a panel history. When the user clicks a product displayed inside the div it takes them to a details page, then if the user decides to keep browsing and clicks the back button to return to product display div another ajax, on $(window).load ajax calls to the php file that retrieves the panel number from the database and automatically shows the last visible div the user had open when the page reloads.

Though for some reason the ajax receives the previous response instead of the correct one when clicking the back button even though the database has been updated with the correct panel number. But if instead i test with the refresh button everything works fine when the page reloads.

Example:

Open "apparel" div --> ajax sends "2" to php file --> php file updates database with "2" --> user navigates away, clicks back, ajax calls to php file --> php file retrieves panel number "2" from database and opens "apparel" div through the success function of the ajax call. all works well

but now if i open a different panel..

Open "collectable" div --> ajax sends "1" to php file --> php file updates database with "1" --> user navigates away, clicks back, ajax calls to php file --> but this time it receives "2" in the response instead of "1" and again opens "apparel" div instead of "collectable" div

Why does the ajax receive the previous "2" response instead of "1" even though the database has been updated with the correct panel number.? If i test with the refresh button to reload page after opening different divs it always displays the correct div, but if i use the back button it just displays the old div.

Ajax send method

 // user clicks apparel panel
    $("#stockApparel").click(function(){

      var $apparel = "2";

      $.ajax({
          url: "php/panel.php",
          data: { panel_update: $apparel },
          type: "get",
          dataType: "text",
          success: function(response){
          },
      });

      var divPosition = $('#shippingImg').offset();
      $('html, body').animate({scrollTop: divPosition.top}, "slow");
      $("#stockButtons").animate({left: '1140px'});
      $("#new").animate({left: '-470px'});
      $("#apparel").show(700);
      $("#marketing").hide(100);

  });

retrieve on window load

$(window).load(function(){

         $get = "get_panel";

         $.ajax({
          url: "php/panel.php",
          data: { panel_get: $get },
          type: "get",
          dataType: "text",

          success: function(response){
             switch (response) {

                 case "1": // collectable panel

                 $("#stockButtons").animate({left: '1140px'});
                 $("#new").animate({left: '-470px'});
                 $("#collectable").show(700);
                 $("#marketing").hide(100);

                 var divPosition = $('#shippingImg').offset();
                 $('html, body').animate({scrollTop: divPosition.top}, "slow");

                 alert(response);

                 break;

                 case "2": // apparel panel

                 $("#stockButtons").animate({left: '1140px'});
                 $("#new").animate({left: '-470px'});
                 $("#apparel").show(700);
                 $("#marketing").hide(100);

                 var divPosition = $('#shippingImg').offset();
                 $('html, body').animate({scrollTop: divPosition.top}, "slow");

                 alert(response);

                 break;

                 default:

             }

          },

       });

     });

PHP file

<?php
require_once 'connect.php';

if (isset($_GET['panel_update'])) { // Sets the panel number 

    $set = $_GET['panel_update'];
    $sql = "UPDATE panel SET panel='$set' WHERE id=1";


    if ($mysqli->query($sql) === true) {

    } else echo "mysql error:" . $mysqli->error;


}

if (isset($_GET['panel_get'])) { // Retrieves the panel number

    $get = $_GET['panel_get'];
    $sql = "SELECT * FROM panel WHERE id=1";
    $result = $mysqli->query($sql);

    $row = $result->fetch_assoc();

    echo $row['panel'];

}
?>

Answer 1

It sounds like your AJAX responses are being cached. If you are using PHP sessions then responses will usually have the proper no-cache headers, but if not then the browser will cache. When you hit 'refresh' in the browser it forces a new request to happen, which is why you see the "correct value" after the refresh.

A quick way to see if the proper no-cache headers are being sent is to use Chrome Dev Tools or Firefox Dev Tools and switch to the Network tab. In the Response Headers for the AJAX call, look for Cache-Control: no-cache and friends.