1

Bonjour tout le monde,

Je me suis mis en tête d'utiliser jQuery pour réaliser une sorte de datagrid (affichage de données sous forme de tableau, tri par colonne, édition, suppression d'entrées, limitation des lignes affichées dans le tableau et pseudo-pagination). Afin de retrouver les opérations, je stocke des informations dans l'id des cellules du header du tableau.

jQuery permet d'utiliser des sélecteurs CSS, ce qui me simplifie la tâche... dans le cas où ceux-ci fonctionnent. Pour l'instant, je me prends la tête sur quelque chose de relativement con.

J'ai qelque part dans un id de td l'information sur le dernier tri effectué, et j'aimerais la récupérer. Voyant les possibilités de jQuery, je sélectionne $("td[id*='desc']"). Seulement, pour je ne sais quelle raison, ce sélecteur ne fonctionne pas. Alors que j'ai bien mon id contenant ce que je recherche, l'ensemble retourné est vide. Quelqu'un verrait ce qui m'a échappé pendant les trois dernières heures ? mur
<table id="data"> <thead> <tr> <td id="Hdata_id"><a href="#" title="Sort ascending">Data_id</a></td> <td id="Hdate"><a href="#" title="Sort ascending">Date</a></td> <td id="Hcontent"><a href="#" title="Sort ascending">Content</a></td> <td id="Hnumber&desc=0"><a href="#" title="Sort ascending">Number</a></td> <td></td> <td></td> </tr> </thead> <tbody id="P0"> <tr id="1"> <td>1</td> <td>2010-06-08</td> <td>example 1</td> <td>7</td> <td class="edit"><a href="#" title="Edit">Edit</a></td> <td class="delete"><a href="#" title="Delete">Delete</a></td> </tr> <tr id="3"> <td>3</td> <td>2010-06-11</td> <td>example 3</td> <td>5</td> <td class="edit"><a href="#" title="Edit">Edit</a></td> <td class="delete"><a href="#" title="Delete">Delete</a></td> </tr> <tr id="4"> <td>4</td> <td>2010-06-14</td> <td>example 6</td> <td>4</td> <td class="edit"><a href="#" title="Edit">Edit</a></td> <td class="delete"><a href="#" title="Delete">Delete</a></td> </tr> <tr id="5"> <td>5</td> <td>2010-06-22</td> <td>example 4</td> <td>2</td> <td class="edit"><a href="#" title="Edit">Edit</a></td> <td class="delete"><a href="#" title="Delete">Delete</a></td> </tr> <tr id="2"> <td>2</td> <td>2010-06-03</td> <td>example 2</td> <td>1</td> <td class="edit"><a href="#" title="Edit">Edit</a></td> <td class="delete"><a href="#" title="Delete">Delete</a></td> </tr> </tbody> </table>function dataSupressor() { $(function() { $(".delete a").click(function() { if (confirm("Vous voulez réellement supprimmer cette ligne ?")) { var did = this.parentNode.parentNode.id; var sorted = $("td[id*='desc']").attr("id"); var length = sorted.length - 2; sorted = sorted.substring(1, length); var param = "delete=" + did + "&page=" + $("#data tbody").attr("id").substring(1) + "&orderby=" + sorted; alert(param); $.ajax({ type: "GET", url: "data.php", data: param, success: function(v) { $("#data").html(v); dataManager(); } }); } }); }); }

Merci
avatar
Je sais qu'il y a marqué "con" sur ma gueule. Je suis né comme ça, je m'y fais. Mais pourquoi toutes les filles qui me plaisent se sentent obligées de rajouter le suffixe "-fident" ?

2

C’est peut-être complètement à côté de la plaque mais es-tu sûr que tu peux mettre le caractère « & » dans une valeur d’attribut. Essaie avec id="Hnumber_desc=0".
Sinon je trouve ça particulièrement bricolé comme façon de faire, je suis le seul ?
Je pense que l’URL du lien qui permet de trier autrement devrait être générée côté serveur.
avatar
« Quand le dernier arbre sera abattu, la dernière rivière empoisonnée, le dernier poisson capturé, alors vous découvrirez que l'argent ne se mange pas. »

3

Hmm ouais alors en fait c'est très probablement illégal de mettre un & dedans. Il faudrait au moins mettre un &amp; pour que le code soit valide. tongue (Enfin faudrait que je vérifie dans le DTD mais #flemme#)
En dehors de ça je sais pas trop où ça ne va pas, mais je trouve aussi que c'est un peu dégueu comme manière de faire…
Tu peux gérer ça avec des classes ça marchera aussi très bien: class="asc" / class="desc" (voire même mieux ^^)
D'autre part, jQuery propose une méthode .data() pour stocker des données associées à un élément.
Sinon, je ne suis pas sûr que ce soit nécéssaire de recharger tout le tableau à la suppression de l'élément… Tu pourrais juste supprimer la ligne… (non ?)
Et pour finir, .html() c'est le mal. Ça revient exactement à appeler .innerHTML. embarrassed
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

4

GoldenCrystal (./3) :
Sinon, je ne suis pas sûr que ce soit nécéssaire de recharger tout le tableau à la suppression de l'élément… Tu pourrais juste supprimer la ligne… (non ?)

Je pourrais, mais il faudrait ajouter une ligne à la fin si j'ai supprimé sur une "page" autre que la dernière. Et pour l'instant, je n'ai rien qui me permette de générer juste une ligne grin Je rapelle que l'idée est d'avoir les x premières lignes, puis les x suivantes, etc. Je n'ai pas vraiment envie que l'utilisateur ayant supprimé une ligne, le tableau soit plus petit jusqu'à ce qu'il fasse une action quelconque.
GoldenCrystal (./3) :
Et pour finir, .html() c'est le mal. Ça revient exactement à appeler .innerHTML. embarrassed

Moi je veux bien entendre lire ça, mais que proposes-tu pour mettre à jour une partie de la page seulement sans passer par une frame ? J'avoue volontiers que je n'ai pas encore toutes les subtilités d'AJAX dans mon bagage.

[Edit] Au temps pour moi, j'aurais dû me renseigner sur .data() avant

[Edit2] … mais ça ne répond pas à la dernière question de ce post, en fait, à moins de charger la totalité du tableau…
avatar
Je sais qu'il y a marqué "con" sur ma gueule. Je suis né comme ça, je m'y fais. Mais pourquoi toutes les filles qui me plaisent se sentent obligées de rajouter le suffixe "-fident" ?

5

Euh... j'ai un peu lu en diagonale, mais je ne comprends pas pourquoi tu ne peux pas mettre à jour une partie de la page sans passer par un cadre hum

Le but d'Ajax, c'est justement de faire des requêtes asynchrones, c'est-à-dire que ton code Javascript va faire des requêtes HTTP à ton serveur (sans qu'il y ait chargement de page) pour récupérer des informations, typiquement un peu de code HTML à insérer dans la page.

Ensuite, tu peux manipuler le DOM (arbre décrivant ta page) pour ajouter des nœuds ou en supprimer : il suffit de supprimer le nœud de type TR correspondant à la bonne ligne, et d'ajouter un nœud de type TR avec à l'intérieur les informations récupérées via AJAX.

=Whitespace_tree.png
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

6

J'ai bien compris, mais je ne souhaite pas utiliser de cadre, justement. Juste avoir un tableau et le mettre à jour. Pour ça, il me semble que je suis obligé de remplacer le tableau existant, avec les données actuelles, par celui contenant les nouvelles… Et comme spécifié, je souhaite que mon tableau conserve la même taille quand je ne suis pas sur la dernière page (juste parce qu'elle peut ne pas être "remplie"), et que je n'ai rien qui me permette de créer une seule ligne pour l'ajouter à mon tableau.

Bon, je vais peut-être me faire taper, mais au moins j'apprendrai quelque chose.

Actuellement, je ne fais qu'appeler une page PHP qui me génère ce tableau à chaque tri, chaque suppression, etc. Et comme je n'aime pas trop bourrer tout dans une chaîne de caractères pour faire un echo à la fin de mon code, et que du coup je ne vois pas de moyen pour générer qu'une ligne de cette manière, je me débrouille.

Est-ce qu'il y aurait moyen de récupérer juste les données à afficher (genre le contenu des TD) en AJAX, ou plus simplement effectuer directement une requête SQL ? Si c'est le cas, je vois bien une manière de faire plus propre.
avatar
Je sais qu'il y a marqué "con" sur ma gueule. Je suis né comme ça, je m'y fais. Mais pourquoi toutes les filles qui me plaisent se sentent obligées de rajouter le suffixe "-fident" ?

7

Ymox (./4) :
GoldenCrystal (./3) :
Sinon, je ne suis pas sûr que ce soit nécéssaire de recharger tout le tableau à la suppression de l'élément… Tu pourrais juste supprimer la ligne… (non ?)

Je pourrais, mais il faudrait ajouter une ligne à la fin si j'ai supprimé sur une "page" autre que la dernière. Et pour l'instant, je n'ai rien qui me permette de générer juste une ligne grin Je rapelle que l'idée est d'avoir les x premières lignes, puis les x suivantes, etc. Je n'ai pas vraiment envie que l'utilisateur ayant supprimé une ligne, le tableau soit plus petit jusqu'à ce qu'il fasse une action quelconque.
Ben ce n'est pas impossible. Tu envoies ta requête delete, puis le serveur te renvoie une ligne à insérer en cas de réussite. Enfin, malgré tout, tu n'avais pas mentionné la pagination, donc... tongue
GoldenCrystal (./3) :
Et pour finir, .html() c'est le mal. Ça revient exactement à appeler .innerHTML. embarrassed

Moi je veux bien entendre lire ça, mais que proposes-tu pour mettre à jour une partie de la page seulement sans passer par une frame ? J'avoue volontiers que je n'ai pas encore toutes les subtilités d'AJAX dans mon bagage.
C'est l'intéret de jQuery. Tu écris un truc comme $('<h1>Toto</h1>') et ça te crée l'(es) élément(s) DOM qui vont bien.
Exemples:
$('#parent').append('<span class="fils"></span>');
$('#parent').append($('<span class="fils"></span>'));
$('<span class="fils"></span>').appendTo('#parent');
$('<span class="fils"></span>').appendTo($('#parent'));

Bref, si ton javascript renvoie du html valide, c'est une bonne solution. Mais bon, si tu dois recharger un tableau entier peut-être est-il plus simple de recharger toute la page.
Sinon, le JSON c'est cool aussi pour transmettre des informations... wink
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

8

Mais où vois-tu des cadres ? hum Je n'en parle pas ! Et avec JS, tu peux supprimer ou ajouter une ligne sans modifier le reste.

Il faut en revanche que tu prépares une page PHP qui génère uniquement la ligne à ajouter.
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

9

Au fait, je profite de ce topic pour poser une question qui me concerne : j’ai besoin, à la suite d’une action de l’utilisateur, de transformer un fragment de HTML ayant à peu près cette structure :
<div class="content">
  <div class="subcontent">
    <div class="head">bla bla</div>
    <div class="data">plop plop</div>
  </div>
  <div class="subcontent">
    <div class="head">bli bli</div>
    <div class="data">plup plup</div>
  </div>
</div>

En quelque chose ayant cette structure :
<div class="content">
  <div class="subcontent">
    <div class="head">bla bla</div>
    <div class="data">plop plop</div>
    <div class="data">plup plup</div>
  </div>
</div>


En termes de manipulation d’arbre, ça revient à faire ça : tSz4

Est-il possible (et relativement propre), de faire cette transformation sans recharger entièrement le nœud racine (class="content") : je voudrais juste pouvoir fusionner, à l’intérieur de ce nœud, le contenu du deuxième nœud subcontent avec le premier, en lui retirant au passage son sous-nœud head (mais ça c’est facile à faire).
avatar
« Quand le dernier arbre sera abattu, la dernière rivière empoisonnée, le dernier poisson capturé, alors vous découvrirez que l'argent ne se mange pas. »

10

Ben oui, tu retires le(s) nœud(s) "data" de ton élément "subcontent, puis tu le(s) réinsères dans l'autre élément "subcontent". (Node.removeChild() / Node.appendChild() ou jQuery.remove() / jQuery.append(), selon comment tu procèdes)
Avec jQuery ça donnerait un truc dans le genre: element1.append(element2.remove().children('.data').remove());
Tu as le droit d'ajouter et retirer les noeuds autant de fois que tu veux, la seule règle étant que le nœud ne peut être présent qu'à un seul endroit dans le document (enfin plus exactement, ne peut avoir qu'un seul parent, qu'il soit dans le document ou non). Du coup y'a pas vraiment de souci. tongue
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

11

Sinon, ça ne risque pas d'être un arbre grin
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

12

Ploum ploum

J'utilise maintenant des remove et append à tour de bras, c'est mieux que innerHTML confus ?

J'ai encore une question, plus liée à JS en lui-même : suposons ce bout de code
<input value="toto" />
et qui s'affiche
------------
| tata     |
------------

Donc la valeur intiale est déjà modifiée.
Comment récupérer la valeur initiale, sachant qu'elle semble rester dans le code HTML ? L'attribut value de l'objet input retourne la valeur affichée… et que j'aimerais me passer d'une requête pour récupérer ce que j'ai déjà demandé (c'est dans le cas où l'utilisateur veut annuler l'édition)
avatar
Je sais qu'il y a marqué "con" sur ma gueule. Je suis né comme ça, je m'y fais. Mais pourquoi toutes les filles qui me plaisent se sentent obligées de rajouter le suffixe "-fident" ?