JQuery récupérer id parent

Maljuna Kris · 23-10-2012 11:48:52

Saluton,
J'ai le bout de page HTML suivant

<table id="agents">

    <thead>

        <tr>

            <th>nom</th>

            <th>prenom</th>

            <th>naissance</th>

            <th>sexe</th>

            <th>embauche</th>

            <th></th>

        </tr>

    </thead>

    <tfoot>

        <tr><th colspan="6"><input type="button" value="Insérer une ligne" id="insert"/></th></tr>

    </tfoot>

    <tbody>

    </tbody>

</table>

Je souhaite récupérer l'id de la table (agents ici) en jQuery lors de l'interception
de l'évènement onClick du bouton d'id="insert" qui est lui-même le seul enfant du seul enfant <tr> du <tfoot> de cette <table>.
Et là, je coince.

$(document).ready(function () {

    $("#insert").bind ("click", function ()

        {

        table= ??????

Quelqu'un sait faire ?
Au hasard, Pierrot ?
Merci.

Maljuna Kris · 23-10-2012 12:13:06

Je dois accompagner Dame 4in qui va s'acheter des godasses (encore !).
J'ai trouvé ça

        table= $this.parents("table").attr("id");

mais je n'ai pas encore eu le temps de tester.

Pierrot · 23-10-2012 13:11:04

au hazard ????? :D

$(this).closest('table').attr('id');

a++

Maljuna Kris · 23-10-2012 21:32:37

Merci Pierrot,
Le hasard fait souvent tellement bien les choses
Je n'ai plus le temps d'incorporer cela à mon code, mais nul doute que ta syntaxe sera moins approximative que la mienne.
Cette méthode closest reste cependant un peu confuse dans mon esprit.

Pierrot · 23-10-2012 21:49:55

citation :
Cette méthode renvoie le plus proche parent correspondant à l’expression.

cette explication ne peut être plus simple

a++

Maljuna Kris · 24-10-2012 02:35:40

Ce n'est pas tout à fait ce qui est écrit dans mon bouquin :

closest(sélecteur, contexte): Récupère le plus proche élément (parent ou déjà dans la liste récupérée par la fonction jQuery ()) de chaque élément de la liste, correspondant au sélecteur indiqué. Le paramètre contexte est optionnel.

Cela dit, il ne montre aucun exemple utilisant le deuxième paramètre.

De toutes façons

$(this).closest('table').attr('id');

retourne "undefined".
La méthode parents('table').attr('id) retourne la même chose.

SCROGNEUGNEU de SCROGNEUGNEU.

Maljuna Kris · 24-10-2012 03:29:29

Bon, pour l'instant j'ai rusé en mettant l'identifiant de la table dans l'attribut alt

 <tfoot>

<tr><th colspan="6"><input type="button" value="Insérer une ligne" alt="agents" id="insert"/></th></tr>

</tfoot>

et du coup

    $("#insert").bind ("click", function ()

        {

        var table;

        table= $(this).attr('alt');

        $.ajax({

               url : 'modeles/getStructure.php?table='+table,

               complete : function(xhr)

/* etc */

peut fonctionner, ce qui était ma préoccupation première, mais cela ne me semble pas intellectuellement satisfaisant.

Pierrot · 24-10-2012 04:55:51

montre ton html complet stp.
parce que moi, je viens de tester, et çà me retourne bien ce que je veux.

a++

Maljuna Kris · 24-10-2012 07:19:52

C'est bien là le problème, c'est que le HTML est, en partie, construit par jQuery et Ajax.
Notamment ce foutu plugin

jQuery Scrollable Table Plugin
==============================
This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.

dont je parlais ici et dont je n'arrive pas à en voir le résultat dans la console Firebug.
Je crois que je vais m'en passer et tenter de gérer ça à l'ancienne.

Maljuna Kris · 24-10-2012 08:05:59

Bon, ça se complique.
Ceci

$(document).ready(function () {

    $("#insert").bind ("click", function ()

    /* au click du bouton insert il faut insérer une ligne vide cooorespondant à la structure

              de la table à récupérer, via ajax, dans modeles/schema_nomencs.inc.php

           */

        {

        var table;

        table= $(this).attr('alt');

        $.ajax({

               url : 'modeles/getStructure.php?table='+table,

               complete : function(xhr)

                {

                var response = xhr.responseText;

                $("table#"+table+" tbody").append(response);

                $("table#"+table+" tbody").find("tr:last").find("input[type=text]:first").focus ();;

                }

               });

/* suite du script */

me génère bien cela.

<tr><td><input type="text" id="nom" size="25" /></td><td><input type="text" id="prenom" size="25" /></td><td><input type="text" id="naissance" size="10" class="date" /></td><td><select id="sexe"><option value='M'>M</option><option value='F'>F</option></select></td><td><input type="text" id="embauche" size="10" class="date" /></td><td><input type="button" id="remove" value="Supprimer" /></td></tr>

Bien noter l'<input> d'id "remove", mais ensuite, cet appel à jQuery reste muet

    $("remove").live ("click",function()

        {

        var $tr = $(this).parents ("tr");

        alert($tr);

        var id = $tr.attr("id");

        if(id){

            // ajax_remove_client($tr)

            }

        $tr.remove();

        });

    }); // fin de $(document).ready(function ()

C'est pourtant la méthode live() et non bind() qui est invoquée;
Mystère et misère.

Pierrot · 24-10-2012 08:19:12

$("remove").live devient $("#remove").live

a++

Maljuna Kris · 24-10-2012 08:27:09

merci mon Pierrot.
Alors ça, je me foutrais des baffes, même pas foutu-capable de recopier un code.
MoKo, BOULET !!!!
MoKo, BOULET !!!!
MoKo, BOULET !!!!
MoKo, BOULET !!!!

Maljuna Kris · 24-10-2012 08:29:31

Bon, ça ne change rien au résultat, le <tr> n'est pas supprimé et j'ai ajouté un petit alert($tr) qui n'est jamais exécuté.

Pierrot · 24-10-2012 12:32:50

essaye avec delegate

et montre moi ton code !!!!!!!!!!
nomdidiou !!!!!!!!!!!!!

a++

Maljuna Kris · 24-10-2012 14:37:00

Ne t'énerves pas, ma pou-poule. D'abord je découvre cette méthode delegate() de gestion avancée des événements qui ne figure même pas à l'index du bouquin d'Éric Sarion.
Mais delegate ne change rien
Bon, voici le code généré, récupéré dans l'onglet script de Firebug.

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

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

    <head>

        <meta HTTP-EQUIV="pragma" CONTENT="no-cache" />

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

        <title>** nomencs  : administrateur **</title>

        <link rel="StyleSheet" type="text/css" href="vues/style.css"/>

        <link rel="stylesheet" type="text/css" href="../JQUERY/tablescroll/tablescroll.css"/>

        <link rel="StyleSheet" type="text/css" href="../JQUERYUI/css/ui-lightness/jquery-ui-1.9.0.custom.min.css"/>

        <script type="text/javascript" src="../JQUERYUI/js/jquery-1.8.2.js"></script>

        <script type="text/javascript" src="../JQUERYUI/js/jquery-ui-1.9.0.custom.min.js"></script>

        <script type="text/javascript" src="controleurs/js.js"></script>

        <script>

        // pour JQUERYUI

        $(function() {

            $( "#tabs" ).tabs();

            });

        </script>

    </head>

    <body>

                    <h1><span class="lettrine">Résidence XXXX de ZZZZ</span>

                Plannings & Droit Individuel à Formation

            </h1>

            <h2>** nomencs  : administrateur **</h2>

            <h3>utilisateur : admin</h3>

        <div id="tabs">

            <ul>

                <li><a href="#tabs-0">agents</a></li>

                <li><a href="#tabs-1">utilisateurs</a></li>

                <li><a href="#tabs-2">grades</a></li>

                <li><a href="#tabs-3">fonctions</a></li>

                <li><a href="#tabs-4">equipes</a></li>

                <li><a href="#tabs-5">services</a></li>

                <li><a href="#tabs-6">positions</a></li>

                <li><a href="#tabs-7">postes</a></li>

            </ul>

            <div id="tabs-0">

<table id="agents" class="tablescroll">

    <thead>

        <tr>

            <th>nom</th>

            <th>prenom</th>

            <th>naissance</th>

            <th>sexe</th>

            <th>embauche</th>

            <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>

        </tr>

    </thead>

    <tfoot>

        <tr><th colspan="6"><input type="button" value="Insérer une ligne" alt="agents" id="insert"/></th></tr>

    </tfoot>

    <tbody>

    </tbody>

</table>

            </div>

            <div id="tabs-1">

<h1>Table utilisateurs</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

            <div id="tabs-2">

<h1>Table grades</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

            <div id="tabs-3">

<h1>Table fonctions</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

            <div id="tabs-4">

<h1>Table equipes</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

            <div id="tabs-5">

<h1>Table services</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

            <div id="tabs-6">

<h1>Table positions</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

            <div id="tabs-7">

<h1>Table postes</h1>

<img src="vues/encours.jpg" alt="construction en cours" />

            </div>

        </div>

        <form name="nomencs" method="post" action="index.php"/>

            <p class="centerinput" >

                <input class="bouton" type="submit" value="RETOUR AU MENU" />

            </p>

            <input type="hidden" name="page" value="Menu"\>

        </form>

    <script type="text/javascript" src="../JQUERY/tablescroll/tablescroll.js"></script>

    <script>

/*<![CDATA[*/

jQuery(document).ready(function($)

{

  $('#agents').tableScroll({height:150,width:600});

  $('#utilisateurs').tableScroll({height:150,width:600});

  $('#grades').tableScroll({height:150,width:600});

  $('#fonctions').tableScroll({height:150,width:600});

  $('#equipes').tableScroll({height:150,width:600});

  $('#services').tableScroll({height:150,width:600});

  $('#positions').tableScroll({height:150,width:600});

  $('#postes').tableScroll({height:150,width:600});

});

/*]]>*/

    </script>

    </body>

</html>

mais la ligne insérée dans <tbody> n'y apparaît pas.
Quant à controleurs/js.js :

$(document).ready(function () {

    // rattacher une balise <li> sur deux du menu à la classe alt

    $("ul#menu_body li:even").addClass("alt");

    $("ul#menu_body li a").mouseover(function () {

        $(this).css({"font-weight":"bold"} );

        });

    $("ul#menu_body li a").mouseout(function () {

        $(this).css({"font-weight":"normal"} );

        });

    // redirection en fonction de l'item du menu cliqué

    $("ul#menu_body li a").bind("click",function () {

        var hidden ="";

        hidden += "<input type='hidden' name='page' value='"+$(this).attr("id")+"'\\>";

        $("form").append(hidden);

        $("form").submit();

        });

    // on va initialiser chaque onglet de table de nommenclature

    $.ajax({

        url : "modeles/getListeTables.php",

        complete : function(xhr)

            {

            var response = xhr.responseXML;

            var $tables = $(response).find("liste");

            $.each($tables, function()

                {

                var table= $(this).find('table').text();

                ajax_get_nomenc(table);

                });

            }

          });

    $("#insert").bind ("click", function ()

    /* au click du bouton insert il faut insérer une ligne vide cooorespondant à la structure

              de la table à récupérer, via ajax, dans modeles/schema_nomencs.inc.php

           */

        {

        var table;

        table= $(this).attr('alt');

        $.ajax({

               url : 'modeles/getStructure.php?table='+table,

               complete : function(xhr)

                {

                var response = xhr.responseText;

                $("table#"+table+" tbody").append(response);

                $("table#"+table+" tbody").find("tr:last").find("input[type=text]:first").focus ();;

                }

               });

        });

    $("#remove").delegate ("click",function()

        {

        var $tr = $(this).parents ("tr");

        alert($tr);

        var id = $tr.attr("id");

        if(id){

            // ajax_remove_client($tr)

            }

        $tr.remove();

        });

    });

function ajax_get_nomenc(table)

    {

    $.ajax({

        url : "modeles/getnomenc.sql.php?table=" + table,

        complete : function(xhr)

            {

            var response = xhr.responseXML;

            var $lignes = $(response).find(table);

            $.each($lignes, function()

                {

                var html= $(this).find('ligne').text();

                $("table#"+table+" tbody").append(html);

                });

            }

          });

    }

Ah tu voulais du code, ben en voilà.
Désolé mais notre forum ne colorise plus le code.
C'est le résultat d'une construction dynamique par PHP.

Pierrot · 24-10-2012 17:17:59

mon pti MK, j'ai pas le temps ce soir, mais promis, demain matin (très tôt), je regarde

a++

Maljuna Kris · 24-10-2012 17:41:59

Je viens de lire ce petit tuto du site du Zéro : Le principe de la délégation d'événement et, du même coup, je me rends compte que ma façon de l'utiliser est erronée, mais je ne vois pas auprès de quel parent du bouton #remove, je pourrais déléguer l'action de supprimer ce <tr>.
Mais bon, je m'aperçois que je suis là-dessus depuis 2h30 ce matin (avec des grandes coupures, je te rassure), notamment pour mettre cuire ma soupe au chou préférée, donc je vais faire un grand break, jusqu'à .... on verra bien quand.
Encore, merci, mon Pierrot.
PS : j'ai fait tourner un peu ma SKYTEAM DAX 125 dans l'allée chez moi, donc seulement en 1ère. (J'attends toujours mon CPI pour pouvoir m'assurer et faire faire la plaque).
Boudi ! l'est pêchue la bête, même avec mon quintal sur le siège, elle partirait vite en wheeling.
Va bien finir par se tordre le coup, l'vieux !

Ci-gît, MoKo, mort avant d'avoir pu profiter pleinement des avantages de jQuery.
RIP

L'intérêt c'est que j'y retrouverais vite c'te bonne Raf, tu sais bien, la Valoche qui n'est point sotte du tout, elle.

Maljuna Kris · 25-10-2012 08:32:44

Bon, j'ai passé ma soirée à effectuer une saine lecture Simplifiez vos développements JavaScript avec jQuery de Michel Martin éditions du Site du Zéro, lecture qui m'a amené à y poster ce commentaire :

Saluton,
J'ai reçu le bouquin au courrier, hier matin.
Une bonne partie de ma journée d'hier et de ma nuit a été consacrée à sa lecture et j'avoue une petite déception a priori.
Des imprécisions, voire des erreurs. Par exemple quant au comportement des balises <span> qui, à ma connaissance, sont des balises inline et non block (pp 55-57).
Un manque (voire un oubli ?): dans les chapitres 8 et 9 afférents à la gestion événementielle, je n'ai pas lu une ligne à propos des méthodes live() et delegate(). Ces méthodes n'ont même pas d'entrée dans l'index du livre, index au demeurant assez frustre.
Voilà, je ne jette pas le bébé avec l'eau du bain, peut-être une deuxième lecture plus attentive m'amènera-t-elle à réviser mon jugement mais, pour l'heure, je reste sur ma faim.
Amike, MoKo.

J'ai toutefois retenu, et mis en application, la recommandation de MM qui consiste à positionné l'appel aux sources JQuery et/ou Javascript, juste avant la balise fermante </body> et non plus dans le bloc <head></head> comme j'avais coutume de le faire.
Je vous cite les arguments invoqués par MM en bas de la page 21 de son bouquin

Optimisation du code
Voici quelques recommandations qui augmenteront les performances des pages qui contiennent du code jQuery :
-1. Invoquez la bibliothèque jquery.js à la fin du document, avant la balise </body>.
-2. Insérez le code jQuery rattaché à la page dans un fichier annexe et faites référence à ce fichier juste après la balise qui indique où se trouve la bibliothèque jQuery.
Ces positions stratégiques optimisent le temps de chargement de la page. En effet, de nombreux navigateurs bloquent l'exécution du code qui suit une balise <script> jusqu'à ce que cette balise ait été chargée et exécutée. En plaçant les balises <script> juste avant la balise (fermante) </body>, l'affichage de la page n'est pas "freiné" par le code jQuery.

Bon, ça ne fait pas avancer le schmilblick sujet initial de ce post, mais comme disait ma grand-mère:

si ça gagne pas, ça débarasse.

Maljuna Kris · 25-10-2012 09:34:52

Me reportant à la documentation officielle de jQuery, je constate que les méthodes live() et delegate() seraient obsolètes (jQuery 1.4.3+) et qu'il conviendrait dorénavant d'utiliser leur équivalent on() jQuery 1.7+
Méthode qui, elle, est copieusement référencée et illustrée dans le bouquin de Michel Martin. (au temps pour moi, donc).
Ceci dit, pour en revenir à mes moutons, je ne vois toujours pas en quoi ces méthodes peuvent me permettre de récupérer dans l'événement click d'un <input type="button" id="remove"/> situé dans un <td> d'un <tr> d'un <tbody> d'une <table> la valeur de l'attribut id de cette <table>.
Par contre on doit pouvoir déléguer à cet événement click de l'<input type="button" id="remove"/> la suppression du parent <tr id="x">, où id contient éventuellement la valeur de la clé primaire de la ligne dans la table du SGBDR.
A approfondir .....

Maljuna Kris · 25-10-2012 09:36:14

    $("tr").delegate ("#remove","click",function()

        {

        alert("delegate.remove");

        var id =  $(this).attr("id");

        if(id){

            // ajax_remove_client($tr)

            }

        $(this).remove();

        });

    });

laisse le navigateur et Firebug de marbre.

Maljuna Kris · 25-10-2012 14:38:31

A la lecture de cette partie de tuto : Plus loin dans la gestion événementielle - Délégation d'événements, je crains de comprendre que les délégations ne peuvent intervenir qu'à partir d'objets pré-existants à leur clônage par jQuery.
Du coup j'ai créé un ceci :

<tbody>

     <tr class="hidden"><td>nom</td><td>prenom</td><td>naissance</td><td>sexe</td><td>embauche</td><td><input type="button" id="remove" value="Supprimer" /></td></tr>

</tbody>

et j'ai ajouté ceci a sttyle.css

.hidden {display:none}

 

Mais ça n'apporte aucun changement.
Certes il s'agit de la méthode on(), mais comme elle semble être appelée à remplacer les fonctions live() et delegate()....
Bref, je suis complètement à la ramasse.
En plus je commence à avoir la migraine.

Maljuna Kris · 25-10-2012 14:59:25

YOUPIEEEEE!!!!
C'était bien ça le problème, après avoir refermé le navigateur, donc bien vidé les caches et rechargé les bonnes versions des scripts, avec cette <tr class="hidden">, ce code semble fonctionner

    $("#remove").live("click",function()

        {

        var id =  $(this).closest("tr").attr("id");

        if(id){

            // ajax_remove_ligne(table,id)

            }

        $(this).closest("tr").remove();

        });

    });

[EDIT]En fait, maintenant que ça fonctionne, j'ai ôté le <tr> fantôme (de class="hidden"), et je m'aperçois que ça fonctionne tout à fait très bien sans.
Bizarre, qu'est-ce donc qui foirait ?[/EDIT]

Il me reste à tester avec une ligne provenant de la table de la BD, donc ayant un id dans $(this).closest("tr").attr("id"), pour tester ajax_remove_ligne(table,id).
Mais là, c'est une autre histoire, je vais de nouveau me heurter au problème de récupération du nom de la table.
Je ne vais tout de même pas devoir à nouveau dupliquer, en PHP, ce nom dans chaque attribut alt de #remove !

Maljuna Kris · 25-10-2012 15:49:14

Maljuna Kris a écrit :

Je ne vais tout de même pas devoir à nouveau dupliquer, en PHP, ce nom dans chaque attribut alt de #remove !

Ben, pour l'instant en tous cas, si. (:'-(

Maljuna Kris · 25-10-2012 16:09:30

Par contre, maintenant que je peux insérer et supprimer autant de lignes que je veux, je viens de me rendre compte que le plugin tabscroll, qui est censé limiter la hauteur du tbody à 150px, ne limite que dalle.
Et c'est reparti !

Maljuna Kris · 25-10-2012 18:29:17

A bien scruter les codes par comparaison, je ne vois pour l'instant que cette seule différence majeure entre

    $tr.remove();

et

$(this).closest("tr").remove();

mais ça ne m'explique pas pourquoi je n'obtenais pas d'affichage de mon alert().

PHP|Débutant :: Forums

Advertisement

#1 23-10-2012 11:48:52

JQuery récupérer id parent

#2 23-10-2012 12:13:06

Re : JQuery récupérer id parent

#3 23-10-2012 13:11:04

Re : JQuery récupérer id parent

#4 23-10-2012 21:32:37

Re : JQuery récupérer id parent

#5 23-10-2012 21:49:55

Re : JQuery récupérer id parent

#6 24-10-2012 02:35:40

Re : JQuery récupérer id parent

#7 24-10-2012 03:29:29

Re : JQuery récupérer id parent

#8 24-10-2012 04:55:51

Re : JQuery récupérer id parent

#9 24-10-2012 07:19:52

Re : JQuery récupérer id parent

#10 24-10-2012 08:05:59

Re : JQuery récupérer id parent

#11 24-10-2012 08:19:12

Re : JQuery récupérer id parent

#12 24-10-2012 08:27:09

Re : JQuery récupérer id parent

#13 24-10-2012 08:29:31

Re : JQuery récupérer id parent

#14 24-10-2012 12:32:50

Re : JQuery récupérer id parent

#15 24-10-2012 14:37:00

Re : JQuery récupérer id parent

#16 24-10-2012 17:17:59

Re : JQuery récupérer id parent

#17 24-10-2012 17:41:59

Re : JQuery récupérer id parent

#18 25-10-2012 08:32:44

Re : JQuery récupérer id parent

#19 25-10-2012 09:34:52

Re : JQuery récupérer id parent

#20 25-10-2012 09:36:14

Re : JQuery récupérer id parent

#21 25-10-2012 14:38:31

Re : JQuery récupérer id parent

#22 25-10-2012 14:59:25

Re : JQuery récupérer id parent

#23 25-10-2012 15:49:14

Re : JQuery récupérer id parent

#24 25-10-2012 16:09:30

Re : JQuery récupérer id parent

#25 25-10-2012 18:29:17

Re : JQuery récupérer id parent

Pied de page des forums