Problème changement variable

Default
,

Bonjour, je vous expose mon problème.

En gros, j'ai une page, avec un input et un bouton ADD, et en dessous la liste des elèves. quand je rentre un nom et que j'appuie sur ADD, j'ai un nouvel élève qui s'affiche en dessous et qui fait en même temps un INSERT dans la base de donnée.

Tout ça fonctionne bien, mais le problème c'est que en haut de ma page, j'ai : Listes des élèves (49 enregistré(s))

L'écho du nombre d'élève marche correctement, sauf que quand j'ajoute un élève, ce chiffre augmente seulement si j'actualise ma page, sauriez vous comment je peux faire pour qu'au moment ou j'appuie sur Add , et donc que l'élève s'ajoute à la BDD, alors ce chiffre change directement ? Tout comme quand j'appuie sur Add en fait, le nom s'affiche directement en dessous sans que j'ai besoin d'actualisé la page

Je sais pas si je suis très clair.... voici mon code:

index.php (ou il y a le formulaire):

<?php
session_start();

include "../inc/db.php";

$req = $bdd->query("SELECT * FROM eleve");
$reponse = $req->fetchAll();

$req_nombre = $bdd->query("SELECT * FROM eleve");
$nombre_eleve = $req_nombre->rowCount();

?>

<?php include "../inc/header.php"; ?> 

        <div class="breadcrumbs">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>Listes des élèves (<span id="nombre_eleve"><?= $nombre_eleve ?></span> enregistré(s))</h1>
                    </div>
                </div>
        </div>

<div class="content mt-3">
    <form method="POST" action="" onsubmit="return post();">
        <input type="text" id="liste_nom" placeholder="Nom" />
        <input type="submit" value="Ajouté" id="submit">
    </form>

    <div id="all_eleve">
        <?php 

        $req = $bdd->query("SELECT * FROM eleve ORDER BY id DESC");
        $resultats = $req->fetchAll();
        ?>

        <?php foreach($resultats as $r) { ?>
             Nom: <?= $r['liste_nom']; ?><br>
        <?php } ?>
    </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">

    function post() {

    var liste_nom= $("#liste_nom").val();

    if(liste_nom) {

    $.ajax({
        type: "POST",
        url: "action.php",
        data:
        {
            liste_nom:liste_nom,
        },
        success: function(response) {
            document.getElementById("all_eleves").innerHTML=response+document.getElementById("all_eleves").innerHTML;
        }
    });
    }
    return false;
    }

</script>




</body>
</html>


action.php (la page de traitement):

<?php
include "../inc/db.php";

if(isset($_POST['liste_nom'])) {

$liste_nom = $_POST['liste_nom'];
$insert = $bdd->prepare("INSERT INTO eleve (liste_nom) VALUES ('$liste_nom')");
$insert->execute();

$select = $bdd->query("SELECT * FROM eleve WHERE liste_nom='$liste_nom'");
$response = $select->fetchAll();


if($select) {
?>

<?php foreach($response as $r) { ?>
<div class="comment_div">
    Nom: <?= $r['liste_nom']; ?>
</div>
<?php } ?>

<?php } ?>
<?php } ?>

7 Réponse

35326
,

Salut,

Tu fais un appel Ajax pour intéroger ta base de données pour savoir combien il y a d'élève, et quand ton retour ajax est là, tu changes le text de l'élément.

$('#nombre_eleve').text('<nouveau nombre>');

Default
,

Merci de ta réponse rapide !
Bon j'ai essayé de bidouiller un truc, ça marche à peu près sauf à un détail près, par moment, je vais ajouter un élève, et ça va changer le numéro, et par moment, je vais ajouter l'élève, mais le changement va se faire si je rajoute encore un autre élève, donc ca va mettre le bon numéro du rowCount au bout du 3ème ajout quoi.... ça peut venir de quoi ce bug ?

Voici le JS corrigé, ainsi que ma nouvelle page nombre_eleve.php

$("#submit").click(function (e) {

e.preventDefault();

var liste_nom= $("#liste_nom").val();

    if(liste_nom) {

        $.ajax({
            type: "POST",
            url: "action.php",
            data:
            {
                liste_nom:liste_nom
            },
            success: function(response) {
                document.getElementById("all_eleve").innerHTML=response+document.getElementById("all_eleve").innerHTML;
            }
        });


        $.ajax({
            type: "POST",
            url: "nombre_eleve.php",
            data:
            {
                liste_nom:liste_nom
            },
            success: function(data) {
                $("#nombre_eleve").html(data);
            }
        });
    }
});

<?php
include "../inc/db.php";


if(isset($_POST['liste_nom'])) {

$liste_nom = $_POST['liste_nom'];


$req_nombre_eleve = $bdd->query("SELECT * FROM eleve");
$nombre_eleve = $req_nombre_eleve->rowCount();


  if($req_nombre_eleve) {
     echo "".$nombre_eleve."";
  }

}

?>



35326
,

Aucune idée, met un errorHandler sur ton ajax pour voir si tu as des erreurs retournées.

$.ajax({
    type: "POST",
    url: "nombre_eleve.php",
    data: {
        liste_nom: liste_nom
    },
    success: function (data) {
        $("#nombre_eleve").text(data);
    },
    error: function (error) {
        console.log(error);
    }
});
Default
,

J'ai essayé mais il n'y pas d'erreurs :/

17162
,

Bonjour.
Il y a plusieurs choses qui ne vont pas dans ton code, autant niveau PHP que JavaScript.

$req = $bdd->query("SELECT * FROM eleve");
$reponse = $req->fetchAll();

$req_nombre = $bdd->query("SELECT * FROM eleve");
$nombre_eleve = $req_nombre->rowCount();

Pourquoi faire deux requêtes au lieu d'une, alors que c'est la même requêtes, sauf le type de retour qui est différent ?
Il te suffit de faire :

$req = $bdd->query("SELECT * FROM eleve");
$reponse = $req->fetchAll();
$nombre_eleve = $req->rowCount();

Ensuite :

if($req_nombre_eleve) {

Cette condition est totalement inutile, car elle ne contient aucun résultat, mais juste un object de type PDOStatement, il vaut donc mieux que tu fasses la condition sur la variable qui contient le résultat de la méthode rowCount de la requête.
Au niveau JavaScript, pourquoi est-ce que tu utilises la méthode html lorsque tu récupères le nombre d'utilisateurs alors que ton retour est une simple chaîne de caractères ?
Alors que comme te l'avais donné en exemple Balsakup dans une de ses réponses, il te montrait la méthode text.

Default
,

Bonjour et merci de tes conseils... j'ai bien changé tout ça, mais malheureusement toujours le même problème :/

17162
,

j'ai bien changé tout ça, mais malheureusement toujours le même problème :/

C'est peut-être tout simplement que tu n'as pas encore eu le retour de ton script PHP, il ne faut pas oublier que lorsque un nom est ajouté via le formulaire tu fais deux requêtes HTTP, l'une à la page action.php et l'autre à la page nombre_eleve.php.
Tu devrais donc faire un indicatif pour éviter que l'utilisateur soumette le formulaire à plusieurs reprises consécutivement tant que tu n'as pas eu le retour de la dernière requête.
Par exemple :

$("#submit").click(function (e) {
    e.preventDefault();
    var $submit = $(this);
    $submit.attr('disabled', true);
    // 1ère requête HTTP ...
    // 2ème requête HTTP
    $.ajax({
        type: "POST",
        url: "nombre_eleve.php",
        data:
        {
            liste_nom: liste_nom
        },
        success: function(data) {
            $("#nombre_eleve").text(data);
            $submit.removeAttr('disabled');
        },
        error: function (error) {
            console.log(error);
        }
    });    
}

De cette manière, lorsque l'utilisateur soumet le formulaire, il devra attendre que tu ait eu le retour de la dernière requête HTTP et que tu aies fait le nécessaire, avant de pouvoir soumettre à nouveau le formulaire.
Il ne faut pas oublier que tu fais quand même trois requêtes SQL (1 INSERT et 2 SELECT) entre chaque soumission du formulaire.
Par contre, je ne comprends pas pourquoi tu fais une requête de type POST pour la seconde, alors que concrétivement tu ne te sert même pas des données que tu envois.
Je crois surtout que tu as copié/collé la première requête par flemme, et que tu n'as principalement changé que l'url.