IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Tableau dynamique avec bouton de validation


Sujet :

jQuery

  1. #1
    Membre averti
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Novembre 2018
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Ingénieur intégration

    Informations forums :
    Inscription : Novembre 2018
    Messages : 43
    Par défaut Tableau dynamique avec bouton de validation
    Bonjour,
    je doit développer un tableau permettant de lire en temps réél les donnée d'une base de donnée et de l'afficher dans un tableau avec un bouton sur chaque ligne permettant de valider la ligne.
    Je souhaite développer l'index en html et javascript pour pouvoir l'encapsuler avec cordova pour faire une appli smartphone.

    J'ai donc index.html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    <html>
    <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    	<script type="text/javascript" src="js/jquery.js"></script>
    <script>
     
    function update_data(){
        $.getJSON('http://localhost/supervision/names.php', function (data) {       // fonction de retour, data est le tableau renvoyé par json_encode du php
           console.log(data);
               var tr;
           for (var i = 0; i < data.length; i++) {
                            tr = $('<tr/>');
                            tr.append("<td>" + data[i].Num + "</td>");
                            tr.append("<td>" + data[i].Last_Name + "</td>");
                            tr.append("<td>" + data[i].Company + "</td>");
                            tr.append("<td>" + data[i].LastPassDoor + "</td>");
                            tr.append("<td>" + data[i].Quai + "</td>");
                            tr.append("<td>" + "<input type='submit' id='button' value='Valider' />" + "</td>");
                            $('table').append(tr);
                            $("#button").click(function(){
                                    $.post("validation.php", {number : data[i].Num});
                            });     
     
                    }
            });
    }
     
    $(document).ready(function(){  
            update_data();
             //setInterval(function(){ update_data()}, 1000); //requete toutes les 1secondes
    });
     
     
    </script>
     
     
    </head>
    <body>
    <form name="autoriser" method="post" action="index.php">
    	<p style="text-align:center">
    	<span style="font-size: 18pt;">Liste des camions</span><br>
    	</p>
    <table class="tableau">
    	<thead>
    		<tr class="entete">
    			<th>Numero RDV</th>
    			<th>Nom</th>
    			<th>Company</th>
    			<th>Status</th>
    			<th>Quai</th>
    			<th>Valider</th>
    		</tr>
    	</thead>
    </table>
     
    </form>
    </body>
    </html>

    et le names.php permettant d'échanger avec le serveur SQL
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <?php 
    header("Content-Type: application/json");
     
    include('function.php');
    $conn = connexion_DB();
    // on selectionne les  personnes sur site qui ne sont pas passé par le lecteur de sortie;
    $strSQL = "SELECT Num, Last_Name, LastPassDoor FROM rptRollCall WHERE LastPassDoor != 'Lecteur sortie' ";
    $result = sqlsrv_query($conn, $strSQL) or die( print_r( sqlsrv_errors(), true));
     
    $array = array();
    while( $row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    	// On cherche le nom de la company et du quai dans CRDHLD
    	$last_name=$row["Last_Name"];
    	$SQL = "SELECT Company, Quai FROM CRDHLD WHERE Last_Name='$last_name'";
    	$crdhld_result = sqlsrv_query($conn, $SQL) or die( print_r( sqlsrv_errors(), true));
    	$row2 = sqlsrv_fetch_array( $crdhld_result, SQLSRV_FETCH_ASSOC);
     
    			//on genere le statut et colore les lignes
    	switch($row["LastPassDoor"]){
    		case "Lecteur entree":
    			$status="En entrée";
    			$class="ligne_lime";
    			break;
    		case "Lecteur chargement":
    			$status="Chargement / Déchargement";
    			$class="ligne_yellow";
    			break;
    		case "Lecteur sortie":
    			$status="En sortie";
    			$class="ligne";
    			break;
    		case NULL:
    			$status="Zone d'attente";
    			$class="ligne_red";
    			break;
    	}
     
    	$array[] = $row + $row2;
     
    }
     
     
    echo json_encode($array);
     
    sqlsrv_free_stmt($result);
    sqlsrv_free_stmt($crdhld_result);
    sqlsrv_close ($conn);
    ?>

    Ce code fonctionne et me renvoie les 2 lignes de ma table mais:
    - Le bouton input en fin de tableau ne fonctionne pas et me redirige vers une page index.php
    - La boucle de mise à jour appelant update_data() affiche 2 lignes supplémentaires toutes les secondes
    - Il peut y avoir jusque 10 clients sur ce site et afin de soulager les requetes de names.php vers le serveur SQL, je faire tourner en boucle la lecture de la base dans name.php et stocker les infos dans un tableau que l'index.php viendrait lire. Qu'en pensez vous?

    Merci pour votre aide

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour et bienvenue sur DVP.
    - Le bouton input en fin de tableau ne fonctionne pas et me redirige vers une page index.php
    Non c'est le comportement normal d'un <input type="submit"> que de soumettre le formulaire, il te faut, si tu ne souhaites pas ce comportement, inhiber l'action par défaut.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $(".btn-validation").click(function(event){
       event.preventDefault();
        $.post("validation.php", {number : data[i].Num});
    });
    Voir : event.preventDefault()

    Remarques :
    • tu dupliques les ID est ça c'est la mal d'autant que tu n'en as pas besoin
    • il te faut sortir l'ajout de l'événement de ta boucle, il y aura d'autres détails à régler

  3. #3
    Membre averti
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Novembre 2018
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Ingénieur intégration

    Informations forums :
    Inscription : Novembre 2018
    Messages : 43
    Par défaut
    Merci pour ta réponse et pour l'accueil

    J'ai modifié, mais je crois que l'appel de fonction est pas bon, je suis débutant en javascript et je ne comprend pas bien $(.btn-validation)

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <html>
    <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    	<script type="text/javascript" src="js/jquery.js"></script>
    <script>
    //$.getJSON('index.js',
    //function(data){
    //  console.log(data);
    //});
     
    $(".btn-validation").click(function(event){
       event.preventDefault();
        $.post("validation.php", {number : data[i].Num});
    });
     
    function update_data(){
        $.getJSON('http://localhost/supervision/names.php', function (data) {       // fonction de retour, data est le tableau renvoyé par echo du php
           console.log(data);
               var tr;
           for (var i = 0; i < data.length; i++) {
                            tr = $('<tr/>');
                            tr.append("<td>" + data[i].Num + "</td>");
                            tr.append("<td>" + data[i].Last_Name + "</td>");
                            tr.append("<td>" + data[i].Company + "</td>");
                            tr.append("<td>" + data[i].LastPassDoor + "</td>");
                            tr.append("<td>" + data[i].Quai + "</td>");
                            tr.append("<td>" + "<button id='btn-validation'>Valider</button>" + "</td>");
                            $('table').append(tr);
                            };      
            });
    }
     
    $(document).ready(function(){  // on attend que la page soit prete
            update_data();
             //setInterval(function(){ update_data()}, 1000); //requete toutes les 1secondes
    });

    Qu'entends tu par " tu duplique les ID"?

    Merci

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Qu'entends tu par " tu duplique les ID"?
    Une ID doit être UNIQUE dans une page, si on a plusieurs éléments à cibler on utilise le plus souvent les class CSS.

    ... et je ne comprend pas bien $(.btn-validation)
    c'est l'écriture pour cibler tous les éléments ayant comme class "btn-validation"

    mais je crois que l'appel de fonction est pas bon,
    tes éléments étant nouvellement inclus dans le document ils ne font pas partie de ceux pris en compte par ta fonction celle-ci étant déclarée avant qu'ils n'existent, il te faut mettre la fonction dans la fonction de retour de ta requête.

    Cela pourrait donner
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function update_data() {
      $.getJSON('http://localhost/supervision/names.php', function(data) {
        console.log(data);
        var tr;
        for (var i = 0; i < data.length; i++) {
          tr = $('<tr/>');
          tr.append("<td>" + data[i].Num + "</td>");
          tr.append("<td>" + data[i].Last_Name + "</td>");
          tr.append("<td>" + data[i].Company + "</td>");
          tr.append("<td>" + data[i].LastPassDoor + "</td>");
          tr.append("<td>" + data[i].Quai + "</td>");
          // ici on met une class et non une ID
          // on rajoute une data-num pour la récupération
          tr.append("<td>" + "<button class='btn-validation' data-num='" + data[i].Num + "'>Valider</button>" + "</td>");
          $('table').append(tr);
        };
        // affectation événement sur éléments crées
        $(".btn-validation").on("click", function(event) {
          event.preventDefault();
          $.post("validation.php", {
            //number: data[i].Num
            // remplacement par la récupérartion de data-num
            number: $(this).data("num")
     
          });
        });
      });
    }
    Quelques modifications faites, à voir dans le code, pour info : .data(), d'une manière générale la documentation jQuery vaut le détour

  5. #5
    Membre averti
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Novembre 2018
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Ingénieur intégration

    Informations forums :
    Inscription : Novembre 2018
    Messages : 43
    Par défaut
    Merci tu as résolu mon problème de bouton.
    J'ai cependant toujours mon problème de rafraichissement en effet
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    setInterval(function(){ update_data()}, 1000);
    ne fait que me rajouter les lignes à la suite au lieu de rafraichir tout le tableau

    Avant j'avais testé avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
       function reloadNames() {
            var url = "names.php?t=" + (new Date()).getTime(); 
            jQuery("#row").load(url);
        }
     
    	$(document).ready(function(){  // on attend que la page soit prete
    	 setInterval(function(){ reloadNames()}, 1000); //requete toutes les 1secondes
    	});
    je créé le tableau dans names.php et la fonction reloadNames() s'affichée dans un div
    dans ce cas le rafraichissement fonctionnait bien mais plus compliqué avec le bouton
    Qu'en penses tu?

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    ne fait que me rajouter les lignes à la suite au lieu de rafraichir tout le tableau
    c'est ce qui est demandé via cette ligne
    si tu souhaites remplacer le contenu il te faut d'abord « vider » la table
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var laTable = $("table");
    // vide la table
    laTable.empty();
    // et plus loin on la rempli
    laTable.append(/* ce que l'on ajoute */);
    Voir : .empty()

  7. #7
    Membre averti
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Novembre 2018
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Ingénieur intégration

    Informations forums :
    Inscription : Novembre 2018
    Messages : 43
    Par défaut
    Merci pour ton aide, c'est exactement se que je voulais.
    Je me pose encore une question
    Une dizaine de client vont consulter en permance l'index qui entrainera de nombreuses requetes simultanées et identiques sur la bdd.
    N'est il pas plus interessant pour les ressources de faire tourner le names.php toutes les secondes afin de remplir un tableau qui pourra être lu par plusieurs clients simultanément.

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Toutes les secondes est un peu présomptueux ...
    La requête n'aura pas le temps d'aboutir pour certains (selon le débit et la quantité de données a transiter).
    En général on table sur 3 secondes pour un setInterval faisant une requête ajax.

    Le fait de faire un setInterval va au contraire lancer plus de requêtes sur le serveur.

    Tu peux en revanche informer l'utilisateur avec un timestamp de l'heure précise à laquelle les information affichées ont été récupérées (éventuellement rajouter un chronomètre ...)
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre averti
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Novembre 2018
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Ingénieur intégration

    Informations forums :
    Inscription : Novembre 2018
    Messages : 43
    Par défaut
    Un rafraichissement toutes les 3 secondes n'est pas un un problème mais mon problème est que l'appel simultané des requetes vers la bdd à travers l'appel de names.php ne consomme de la ressource inutilement.
    J'ai pensé à un truc du genre.
    Recupinfo.php génére envoie les requetes SELECT vers la base de donnée, cadencé toutes les 3 secondes par exemple et crée un tableau $array.
    Ce tableau est envoyé à names.php qui ne s'occupe que de recupérer $array et faire un json_encode($array)
    Enfin index.php récupère execute $.getJSON('http://localhost/supervision/names.php', function(data) toutes les 3 secondes.

    ou est il possible dans la requete $.getJSON('http://localhost/supervision/names.php', function(data), d'appeler une fonction du names.php en particulier?

    Merci encore pour ton aide

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    je ne pense pas que les requêtes sur la base a chaque affichage pose souci ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Tableau dynamique avec boutons en plus
    Par totonin dans le forum Struts 1
    Réponses: 10
    Dernier message: 03/07/2009, 11h05
  2. Création tableau dynamique avec php
    Par yasinfo dans le forum Langage
    Réponses: 3
    Dernier message: 05/10/2008, 14h28
  3. tableau dynamique avec surlignement de la ligne
    Par hartecel dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 11/07/2008, 11h17
  4. [Tableaux] Tableau dynamique avec php
    Par Ricus28 dans le forum Langage
    Réponses: 3
    Dernier message: 01/08/2006, 22h46
  5. Création d'un tableau dynamique avec XSL-FO
    Par lionelbrizuela dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 31/01/2006, 11h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo