HTTP requests are duplicated (Jquery/PHP)

Question

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    function Send1()
        {
        adress="1.php"
        $.get(adress,Get1)
        }
    function Get1(answer)
        {
        $("#Show1").html(answer)
        }
        
    function Send2()
        { 
        $("#Show1").click(function( event ) {
        var cty = $(event.target).attr('id');
        adress="2.php?cty="+ cty
        $.get(adress,Get2)
        })
        }
    function Get2(answer)
        {
        $("#Show2").html(answer)
        }
    </script>
</head>


<body>
<form method="post">
    <div style="margin-top: 1vh; margin-bottom: 1vh;">
        <input type="button" onclick="Send1()" style="height:4vh; width: 19.7vw;" value="Button">
    </div>
</form>
<div id="Show1" style="border:1px solid black; height: 600px; width:300px; float:left; margin-right: 1vw;" onclick="Send2()"></div>
<div id="Show2" style="border:1px solid black; height: 600px; width:1000px;"></div>
</body>
</html>

1.php

<?php
require 'vendor/autoload.php';
$adress="http://localhost:3000/Country";
$clienthttp=new EasyRdf\Http\Client($adress);
$req=$clienthttp->request();

$resultJSON=$req->getBody();
$country=json_decode($resultJSON);

foreach ($country as $countries)
    {
    echo "<a href='#'><span id='$countries->id'> $countries->name </span></a> <br>";
    }
?>

2.php

<?php

require 'vendor/autoload.php';
$cty = $_GET["cty"];
$adress="http://localhost:3000/City?CountryId=$cty";
$clienthttp=new EasyRdf\Http\Client($adress);
$req=$clienthttp->request();

$resultJSON=$req->getBody();
$city=json_decode($resultJSON);

    echo "<div style='text-align: center; margin-bottom: 5vh;'>"; 
    echo "<span style='font-size: 3vh'> Name </span>";
    echo "<span style='margin-left: 10vw'> Surface </span>";
    echo "<span style='margin-left: 10vw'> Population </span>";
    echo "</div>";

foreach ($city as $cities)
{
    echo "<div style='text-align: center; margin-bottom: 22.5vh;'>"; 
    echo "<span style='font-size: 3vh;'> $cities->name </span>";
    echo "<span style='margin-left: 10vw'> $cities->surface </span>";
    echo "<span style='margin-left: 10vw'> $cities->population </span>";
    echo "</div>";
}
?>

Short description: first request (Send1 and Get1) shows a list of countries. When I click one of the countries, I want to get the cities from it (that's what Send2 and Get2 are for). For some reason, the request is duplicated times x (first request goes once, second twice, so on). And sometimes it just randomly changes the values between cities from different countries. Basically, the code works but it produces some strange behaviours.

Every time you run Send2 it executes `$("#Show1").click...`which creates a new click event handler for the show1 button. But you never remove any of the previous handlers. So when you click show1 it runs all the handlers (and thus all the Ajax requests) ever attached to the button. So it's fine the first time obviously but after that the number of requests triggered will keep going up proportional to every execution of the Send2 function. The mess is also exacerbated by the fact that Send2 is triggered by clicking on show1! — ADyson, May 06 '21 at 17:19
It would make more sense to define the event handler once, outside the Send2 function. I don't think you need the Send2 function at all, in fact. — ADyson, May 06 '21 at 17:21
Thanks a lot, you should leave a comment separately so I can award and upvote you. — WunderWaffle, May 06 '21 at 20:33

score 0 · Accepted Answer · answered May 06 '21 at 21:34

Every time you run Send2 it executes $("#Show1").click... which creates a new click event handler for the show1 button. But you never remove any of the previous handlers. So when you click show1 it runs all the handlers (and thus all the Ajax requests) ever attached to the button.

That's fine the first time obviously, but after that the number of requests triggered will keep going up proportional to every execution of the Send2 function. The mess is also exacerbated by the fact that Send2 is triggered by clicking on show1!

It would make more sense to define the event handler once, outside the Send2 function. You don't need the Send2 function at all, in fact.

HTTP requests are duplicated (Jquery/PHP)

1 Answers1