JeuWeb Créez votre jeu par navigateur !

daroth · (Modification du message : 08-09-2008, 06:52 PM par Sephi-Chan.)

Salut à tous,
afin de rendre mes sites plus agréables à l'utilisation, je souhaite me mettre au javascipt avec le bibliothèque JQuery Cool

J'ai donc farfouillé un peu partout dans la doc, mais je bloque sur un point.

Je souhaite faire disparaître une ligne d'un tableau quand on clique sur le lien "valider" contenu dans la ligne, mais pour l'instant je n'ai réussis qu'à faire disparaître tout le tableau quand je clique sur un lien, d'où le problème...

Voilà donc mon code source :

Code PHP :
<?php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

    <head>

        <title>Test</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="./css/design.css" />

        <!-- Définition des codes javascript : -->

        <script src="./js/jquery.js"></script>

        <script>

              $(document).ready(function() {

                //$("tr").hide();

                $("a").click(function () {

                      $("tr").hide();

                      return false;

                });

              });

          </script>

    </head>

    <body>

            <div id='content'>

                <table>

                    <tr>

                        <td>0</td>

                        <td>12 octobre 2009</td>

                        <td>Jimi Hendrix</td>

                        <td><a href=''>Consulter</a></td>

                        <td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>

                    </tr>

                    <tr>

                        <td>1</td>

                        <td>15 juin 2008</td>

                        <td>Jimi Page</td>

                        <td><a href=''>Consulter</a></td>

                        <td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>

                    </tr>

                </table>

            </div>

    </body>

</html>

NicoMSEvent · 16-04-2008, 11:42 AM

a mon avis (je dis a mon avis pcq je ne connais pas plus que ça jQuery)
$("a") signifie n'importe quel lien. Donc, $("tr") va agir sur tous les <tr>.

La solution, numérote tes lignes (genre <tr id="tr01"> ), et les liens ( avec id="a01" ). Il ne te restera plus qu'une petite manipulation de chaine pour que ton fonction fasse disparaitre la bonne ligne.

Sephi, tois qui est expert en jQuery, tu pourrais donner tes lumières Wink

Lanwin · 16-04-2008, 12:08 PM

Effectivement Nico a raison

il faut que tu choisisses le lien qui va faire disparaitre le tr en lui affectant un id ou une class.
Idem pour la ligne que tu veux faire disparaitre.

Voilà un exemple tiré de ton code. Le lien "Consulter" de ta première ligne fera disparaitre cette ligne en question Big Grin

Code :
<script>

              $(document).ready(function() {

                //$("tr").hide();

                $("a.disparaitre").click(function () {

                      $("tr.disparaitre").hide();

                      return false;

                });

              });

          </script>

    </head>

    <body>

            <div id='content'>

                <table>

                    <tr class="disparaitre">

                        <td>0</td>

                        <td>12 octobre 2009</td>

                        <td>Jimi Hendrix</td>

                        <td><a href='' class="disparaitre">Consulter</a></td>

                        <td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>

                    </tr>

                    <tr>

                        <td>1</td>

                        <td>15 juin 2008</td>

                        <td>Jimi Page</td>

                        <td><a href=''>Consulter</a></td>

                        <td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>

                    </tr>

                </table>

            </div>

    </body>

Il existe un autre méthode qui est de demander à chaque lien de faire disparaitre la ligne dont elle est l'enfant (cad dont où elle est imbriquée). Je n'ai pas par contre plus le souvenir du code, mais avec la doc il te sera facile de construire cette fonction (si toute fois c'est ce que tu veux Big Grin

)

Amicalement,

daroth · 16-04-2008, 01:03 PM

Je pense que la deuxième solution (avec le système mère/fils) est le bon, car dans la première solution j'ai l'impression qu'il faut autant de méthodes javascript que de lignes dans le tableau (or le tableau sera généré en php dans la version final).

Je vais donc creuser la deuxième solution de Lanwin.

Je vous fait part de mes découvertes dès que possible, en attendant n'hésitez pas à me proposer d'autres solutions Smile

++

**Sephi-Chan** · (Modification du message : 16-04-2008, 01:10 PM par Sephi-Chan.)

NicoMSEvent a écrit :Sephi, tois qui est expert en jQuery, tu pourrais donner tes lumières

C'est très flatteur. :p Cela dit, je suis malheureusement très loin d'être un gourou en jQuery, des gens comme Anthor sont largement meilleurs que moi en la matière !

Mais j'ai quand même une solution à proposer pour ce problème, et qui ne requiert pas de modification dans ton code XHTML.

Code PHP :
<?php 

$(document).ready(function(){

    $('td a').click(function(){

        $(this).parent('td').parent('tr').hide();

        return false;

    });

});

daroth · 16-04-2008, 01:26 PM

Merci beaucoup pour cette réponse rapide et prévise.

Une autre question se pose maintenant :
Imaginons que chaque ligne du tableau soit un tuble dans une base de données.
Comment faire pour que que je clique sur le lien, la ligne disparaisse à la fois dans la page html et dans la base de données?

NicoMSEvent · 16-04-2008, 01:32 PM

fais un appel Ajax qui lancera sur le serveur une requete qui fait ça ^^

**Sephi-Chan** · (Modification du message : 16-04-2008, 09:59 PM par Sephi-Chan.)

Voici une piste qui pourra sans doute t'aider. Je pense que les commentaires suffiront mais si ce n'est pas le cas, n'hésite pas à poser des questions. Smile

Code PHP :
<?php 

$(document).ready(function(){

    $('td a').click(function(){

        /* 

         * On conserve l'objet représentant la ligne du 

         * tableau à laquelle appartient le lien cliqué.

         */

        var rowToDelete = $(this).parents('tr');

        /* 

         * On conserve le contenu de la première colonne

         * en supposant qu'il s'agisse de l'identifiant 

         * unique de l'entrée en base de données. Si ce

         * n'est pas le cas, on changera de technique.

         */

        idToDelete = rowToDelete.children('td:first').text();

        $.ajax({

            url         : 'deleteRow.php',

            type         : 'POST',

            dataType     : 'text',

            data         : {'idToDelete' : idToDelete},

            success     : function(response){

                /* On procède au masquage. */

                rowToDelete.hide();

                alert("La mise à jour s'est effectuée correctement.\n" + response);

            },

            error         : function(){

                alert("Une erreur est survenue.");

            }                

        });

        return false;

    });

});

daroth · 16-04-2008, 03:14 PM

Et de deux bonnes réponses pour Mr Sephi-Chan!! :respect:

Voilà donc mon code php de suppression du tupple :

Code PHP :
<?php

if(!empty($_POST['idToDelete']) && is_numeric($_POST['idToDelete'])) {

    mysql_connect('localhost', 'root', '');

    mysql_select_db('cdb');

    mysql_query('DELETE FROM test WHERE id="'.$_POST['idToDelete'].'"');    

}

?>

**Sephi-Chan** · (Modification du message : 16-04-2008, 04:00 PM par Sephi-Chan.)

Je te déconseille d'utiliser empty() puisque dans le cas où ton idenfiant est 0, tu ne passes pas le test. Mais je doute que ce cas puisse arriver en pratique puisque les identifiants en base de données commencent généralement à 1. Le problème peut survenir par contre si tu changes de support de données tels que XML, JSON, etc. Tu peux par contre utiliser isset(), qui conviendra très bien.

Le reste semble bon, mais fais par contre attention à la fiabilité des données. Ajax te transmet la données, mais rien ne te dit qu'elle n'a pas été altérée entre le navigateur et le serveur, pense donc à vérifier si la personne qui appelle cette requête est autorisée à le faire pour la ressource envoyée au script.

Pour faire remonter les erreurs, tu peux utiliser le fait que toute sortie textuelle sera contenu dans la variable de réponse (captée par l'événement success, ici je l'ai nommée response). Tu peux donc si tu le souhaites renvoyer ton message d'erreur comme ça. Tu écris (avec echo) l'erreur (par exemple Smile

Code PHP :
<?php

if(isset($_POST['idToDelete']) && is_numeric($_POST['idToDelete'])){

    mysql_connect('localhost', 'root', '');

    mysql_select_db('cdb');

    $query = sprintf(

        "DELETE 

        FROM test 

        WHERE id = %d;",

        (int) $_POST['idToDelete']

    );

    $sql = mysql_query($query);

    if(mysql_affected_rows() == 1){

        echo "Ligne supprimée : ".$_POST['idToDelete'].".";

    }

    else {

        echo "Aucune lignée n'a été supprimée.";    

    }    

}

?>

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	[Resolu] Retourner plusieurs tableaux par Ajax	L'Omniscient	2	1 782	29-04-2017, 10:15 PM Dernier message: L'Omniscient
	[JS][SVG/CANVAS] manipulation de partie d'images	Ter Rowan	6	4 653	29-05-2013, 05:21 PM Dernier message: Ter Rowan
	[jquery][Résolu] besoin du plug in cookies	Ter Rowan	2	1 936	20-04-2012, 01:54 PM Dernier message: Ter Rowan
	[Résolu][jQuery UI] problème autocompletion et JSON	popayan	2	3 058	02-11-2011, 04:18 PM Dernier message: popayan
	[Script] Manipulation d'image	Akira777	0	1 875	30-07-2011, 03:15 PM Dernier message: Akira777