Buttons work only on the second click - PHP, AJAX

Question

I'm trying to make a web application (with PHP) that lists TV Series episodes and you can click on a button (the circles with a pipe in it) next to episode title to check or uncheck your progress. I want to use AJAX for this, but the buttons work only for the second click. After the second click, the page doesn't refresh so AJAX seems to work. How can I solve this problem?

The relevant code snippets:

series1.php:

     $user) {
                if ($user["login"]) {
                    $users[$key]["login"] = false;
                    $has_user = false;
                    $active_user = [];
                }
            }
        }
    
        if (isset($_GET["watched"])) {
            foreach ($users as $key => $user) {
                if ($user["login"]) {
                    $users[$key]["watched"]["series1"] = $_GET["watched"] - 1;
                }
            }
        }
        if (isset($_GET["unwatched"])) {
            foreach ($users as $key => $user) {
                if ($user["login"]) {
                    $users[$key]["watched"]["series1"] = $_GET["unwatched"];
                }
            }
        }
    
        $new_array = json_encode($users, JSON_PRETTY_PRINT);
        file_put_contents("users.json", $new_array);
    ?>
...
            
                
                
                    
                        
                            
                                
                                    
                                        
                                            " alt="..."/>
                                        
                                        
                                            
                                                
                                                    
                                                    
                                                    
                                                
                                                Episode aired  | IMDb rating: 
                                                
                                            
                                        
                                    
                                        
                                            " alt="..."/>
                                        
                                        
                                            
                                                
                                                    
                                                    
                                                    
                                                
                                                Episode aired  | IMDb rating: 
                                                
                                            
                                        
                                    
                                
                                    
                                        
                                            " alt="..."/>
                                        
                                        
                                            
                                                
                                                    
                                                    
                                                    
                                                
                                                Episode aired  | IMDb rating: 
                                                
                                            
                                        
                                    
                                        
                                            " alt="..."/>
                                        
                                        
                                            
                                                
                                                    
                                                    
                                                    
                                                
                                                Episode aired  | IMDb rating:

scripts.js:

let section = document.querySelector("section");

function handleCheckButtonClick(event) {
    if (!event.target.matches("button")) return;

    let xhr = new XMLHttpRequest();
    
    if (event.target.classList.contains("check")) {
        console.log("check");
        xhr.open("GET", `seriesgenerator.php?unwatched=${document.querySelector(".idnum").innerHTML}`, true);
        xhr.addEventListener("readystatechange", function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    section.innerHTML = xhr.responseText;
                } else {
                    console.log("Error");
                }
            }
        }, false);
        xhr.send(null);
    } else if (event.target.classList.contains("uncheck")) {
        console.log("uncheck");
        xhr.open("GET", `seriesgenerator.php?watched=${document.querySelector(".idnum").innerHTML}`, true);
        xhr.addEventListener("readystatechange", function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    section.innerHTML = xhr.responseText;
                } else {
                    console.log("Error");
                }
            }
        }, false);
        xhr.send(null);
    }
    
}
section.addEventListener("click", handleCheckButtonClick);

And the seriesgenerator.php is echoing the exact same code in the series1.php section part, but here's the code:

 $user) {
            if ($user["login"]) {
                $users[$key]["login"] = false;
                $has_user = false;
                $active_user = [];
            }
        }
    }

    if (isset($_GET["watched"])) {
        foreach ($users as $key => $user) {
            if ($user["login"]) {
                $users[$key]["watched"]["series1"] = $_GET["watched"] - 1;
            }
        }
    }
    if (isset($_GET["unwatched"])) {
        foreach ($users as $key => $user) {
            if ($user["login"]) {
                $users[$key]["watched"]["series1"] = $_GET["unwatched"];
            }
        }
    }

    $new_array = json_encode($users, JSON_PRETTY_PRINT);
    file_put_contents("users.json", $new_array);

    $html = "";
    $i = 1;
    foreach ($series1["episodes"] as $episode) {
        $html = $html."";
        if ($has_user) {
            if ($i <= $active_user["watched"]["series1"]) {
                if($i % 2 == 1) {
                    $html = $html."
".$i."
".$episode[$i]["title"]."
Episode aired ".$episode[$i]["date"]." | IMDb rating: ".$episode[$i]["rating"]."
".$episode[$i]["plot"]."";
                } else {
                    $html = $html."
".$i."
".$episode[$i]["title"]."
Episode aired ".$episode[$i]["date"]." | IMDb rating: ".$episode[$i]["rating"]."
".$episode[$i]["plot"]."";
                }
            } else {
                if($i % 2 == 1) {
                    $html = $html."
".$i."
".$episode[$i]["title"]."
Episode aired ".$episode[$i]["date"]." | IMDb rating: ".$episode[$i]["rating"]."
".$episode[$i]["plot"]."";
                } else {
                    $html = $html."
".$i."
".$episode[$i]["title"]."
Episode aired ".$episode[$i]["date"]." | IMDb rating: ".$episode[$i]["rating"]."
".$episode[$i]["plot"]."";
                }
            }
        } else {
            if($i % 2 == 1) {
                $html = $html."
".$episode[$i]["title"]."
Episode aired ".$episode[$i]["date"]." | IMDb rating: ".$episode[$i]["rating"]."
".$episode[$i]["plot"]."";
            } else {
                $html = $html."
".$episode[$i]["title"]."
Episode aired ".$episode[$i]["date"]." | IMDb rating: ".$episode[$i]["rating"]."
".$episode[$i]["plot"]."";
            }
        }
        $html = $html."";
        $i = $i + 1;
    }

    echo $html;
?>

Buttons work only on the second click - PHP, AJAX

0 Answers