Question 69572 in Ajax Question posted in
You can find the official documentation here.

Using jquery to replace the src= on images, what is causing these duplicated console messages? – Jquery ajax

General premise:

  1. an HTML page with two images, IDs are #me1 and #me2

  2. the images start out pointing to 1.jpg and 2.jpg

  3. if #me1 is clicked, we use jquery to make a GET request to a PHP script "randim.php" which returns a randomly-selected filename; this filename needs to be placed in the src= of #me2

  4. if #me2 is clicked, the same thing happens except it replaces the src= of #me1

  5. important to note, clicking each image changes the OTHER image, not itself

  6. Log to the console before swapping out the src= on an image, and then again after the image has finished loading

Code:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      var nextimg;
      
      function start() {
        console.log("First #me1 image is " + $('#me1').attr("src"));
        console.log("First #me2 image is " + $('#me2').attr("src"));
      }
            
      function clickedme1() {
      console.log("#me1 has been clicked, need to replace the image in #me2");
        nextimg = $.ajax({
            type: "GET",
            url: "randim.php",
            async: false
        }).responseText;
        console.log("Next image is for #me2 is " + nextimg);
        $('#me2').attr("src", nextimg);
        $('#me2').on("load", function() {
            console.log("Finished loading " + nextimg + " in #me2");
        });
      }

      function clickedme2() {
      console.log("#me2 has been clicked, need to replace the image in #me1");
        nextimg = $.ajax({
            type: "GET",
            url: "randim.php",
            async: false
        }).responseText;
        console.log("Next image is for #me1 is " + nextimg);
        $('#me1').attr("src", nextimg);
        $('#me1').on("load", function() {
            console.log("Finished loading " + nextimg + " in #me1");
        });
      }

    </script>
    <style>#me1, #me2 { width: 400px; height: 400px }</style>
  </head>
  <body>
    <img id="me1" onClick="clickedme1()" src="images/1.jpg">
    <img id="me2" onClick="clickedme2()" src="images/2.jpg">
    <script>window.onload = start();</script>
  </body>
</html>

It seems to be working pretty well except something is going with the console logging. Log messages are being duplicated, and the more I click, the more duplicates the log messages become.

Note the blue circles indicating duplicate log messages:

enter image description here

I’ve verified the duplicate log messages happen in both Chrome and Firefox

Logs of the web server appear normal, I’m not seeing any unexpected requests to the server. Each click results in one request to randim.php and then one request for an image.

What am I missing here?

NOTE: the contents of the PHP script (randim.php) don’t really matter, I know it’s reliable, I’ve been using it for months in different contexts, but just for the sake of completeness, it’s the script from https://www.phpjunkyard.com/random-image.php.

Other things that probably don’t matter: web server is Apache/2.4.41 on Ubuntu 20.04.4 LTS

Tags:

2

Answers


  1. 0

    This is because you are binding an event handler to the "on" event every time you click the image. You can make use of jQuery’s .one(), which will only trigger it once.

    Login or Signup to reply.
  2. 0

    Every time you click one of your images, you create a new load event handler with this code:

    $('#me1').on("load", function() {
    console.log("Finished loading " + nextimg + " in #me1");
});

    So after 1 click you have one event handler giving a message, after 2 clicks you have 2 event handlers, after 3… etc. etc.

    Move that code out of the clickme functions and into your main script code or use .one instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search