Petit soucis de classe Hide et select

Par Anju, il y a 10 ans

Javascript

Bonjour à tous :)

Voila je rencontre un petit problème avec mon code.

Ce que je fais

<!-- Mon tableau d'utilisateurs --> <table cellpadding="0" cellspacing="0"> <thead> <tr id="titreCol"> <th><?= $this->Paginator->sort('username', 'Identifiant') ?></th> <th><?= $this->Paginator->sort('name', 'Nom') ?></th> <th><?= $this->Paginator->sort('first_name', 'Prénom') ?></th> <th class="emailUser"><?= $this->Paginator->sort('email', 'Email') ?></th> <th><?= $this->Paginator->sort('profil_id', 'Profil') ?></th> <th><?= $this->Paginator->sort('status', 'Statut') ?></th> <th class="actions"><?= __('Actions') ?></th> </tr> </thead> <tbody> <?php $i = 0; ?> <?php foreach ($users as $user): ?> <tr id="<?= $i ?>"> <td class="username"><?= h($user->username) ?></td> <td class="name"><?= h($user->name) ?></td> <td class="first_name"><?= h($user->first_name) ?></td> <td class="email"><?= h($user->email) ?></td> <td class="profil_id"><?= h($user->profil_id) ?></td> <td class="status"><?= h($user->status) ?></td> <td class="actions"> <span class="firstBtn"> <button class="user-update"><img src="/Intranet/img/update.gif" /></button> <button class="user-save" ><a class="hide" href="/Intranet/users/edit"><img src="/Intranet/img/save.gif" /></a></button> </span> <span class="secondBtn"> <?= $this->Form->postLink( $this->Html->image('delete.png', array('alt' => 'Supprimer', 'class' => 'user-delete')), array('controller' => 'users', 'action' => 'delete', $user->id), ['class' => 'user-delete', 'confirm' => __('Etes-vous sûr de vouloir supprimer l\'utilisateur {0} {1}?', $user->first_name, $user->name), 'escape' => false]); ?> <button class="user-back"><a class="hide" href=""><img src="/Intranet/img/back.gif" /></a></button> </span> </td> </tr> <?php $i++; ?> <?php endforeach; ?> </tbody> </table> // Mon code JS $(document).ready(function() { $('table').find('.user-update').click(function() { var row = $(this).parents('tr'); var td_username = row.find('td.username'); var td_name = row.find('td.name'); var td_first_name = row.find('td.first_name'); var td_email = row.find('td.email'); var td_profil_id = row.find('td.profil_id'); var td_status = row.find('td.status'); td_username.html('<input type="text" name="username" value="' + td_username.text() + '">'); td_name.html('<input type="text" name="name" value="' + td_name.text() + '">'); td_first_name.html('<input type="text" name="first_name" value="' + td_first_name.text() + '">'); td_email.html('<input type="text" name="email" value="' + td_email.text() + '">'); // Il y a sûrement une façon plus simple et plus propre de faire ça... td_profil_id.html('<select name="profil_id" value="' + td_profil_id.text() + '"><option value="1">Admin</option><option value="2">DP</option><option value="3">CP</option><option value="4">Référent</option><option value="5">Sachant</option><option value="6">Intervenant</option><option value="7">MOE</option></select>'); td_status.html('<select name="status" value="' + td_status.text() + '"><option value="0">Actif</option><option value="1">Inactif</option></select>'); var span_firstBtn = row.find('span.firstBtn'); span_firstBtn.find('button.user-save').removeClass('hide'); span_firstBtn.find('button.user-update').addClass('hide'); var span_secondBtn = row.find('span.secondBtn'); span_secondBtn.find('button.user-back').removeClass('hide'); span_secondBtn.find('a.user-delete').addClass('hide'); }); });

Ce que je veux

Comme vous pouvez le voir, à la fin de chaque ligne d'utilisateurs, j'ai deux boutons, "update" et "delete".
Lorsque je clique sur le bouton "update", la ligne se modifie pour n'afficher que des inputs et selects avec le contenu des champs.
Il faudrait également que les boutons changent. Le bouton "update" doit devenir le bouton "save" et le bouton "delete" doit devenir le bouton "back". Les seconds boutons ont une classe hide qui me permet de les cacher, puis avec mon code JS je suis censée supprimer cette classe hide et l'ajouter sur les premiers boutons...

Ce que j'obtiens

A la place, les deux premiers boutons disparaissent bien. Mais les autres n'apparaissent pas...
Quand je regarde le code source de la page, je me rends compte qu'il n'y a pas de classe hide sur les boutons "update" et "delete" (alors qu'ils ne sont plus visibles), et que les boutons "save" et "back" ont toujours leur classe hide !

Comment faire pour que ce soit l'inverse ?

J'ai un second petit problème !
Quand je clique sur "update" mes champs input sont bien remplis, mais par contre, mes champs select (qui sont remplis avec les options ne sont pas sur les options attribués à l'utilisateur. Je pense que mon code est juste nul à ce niveau là... :/

Je tiens à ajouter que je débute fortement en JS (à vrai dire je n'y connais pas grand chose...)...

Merci par avance pour votre aide !

Ju'

10 réponses

Anju, il y a 10 ans

Bon après un peu de recherche, j'ai finalement réussi à faire ce que je voulais.

<!-- Les boutons de mon tableau --> <td class="actions"> <span class="firstBtn"> <button class="user-update visible"><img src="/Intranet/img/update.gif" /></button> <button class="user-save" ><a class="hide" href="/Intranet/users/edit"><img src="/Intranet/img/save.gif" /></a></button> </span> <span class="secondBtn"> <?= $this->Form->postLink( $this->Html->image('delete.png', array('alt' => 'Supprimer')), array('controller' => 'users', 'action' => 'delete', $user->id), ['class' => 'user-delete visible', 'confirm' => __('Etes-vous sûr de vouloir supprimer l\'utilisateur {0} {1}?', $user->first_name, $user->name), 'escape' => false]); ?> <button class="user-back"><a class="hide" href=""><img src="/Intranet/img/back.gif" /></a></button> </span> </td> // Code JS des boutons $(document).ready(function() { $('table').find('.user-update').click(function() { //... $('.hide').removeClass('hide').addClass('noHide'); $('.visible').removeClass('visible').addClass('hide'); }); });

Par contre, concernant mon select, je suis toujours bloquée :(

Anju, il y a 10 ans

Bonjour, merci de me répondre :)

Et bien les données des utilisateurs sont récupérées en base de données normalement :o
Je sais pas si je réponds bien à ta question :$

Anju, il y a 10 ans

Profil_id correspond aux clés primaires de ma table Profiles, à laquelle ma table Users est reliée. (D'ailleurs, faudrait que j'arrive à afficher les noms plutôt que les id...)
Et Status est un booléen, où 0 correspond à Actif et 1 à Inactif :/

Anju, il y a 10 ans

Du coup, il faut que j'enlève ces lignes là je suppose :

td_profil_id.html('<select name="profil_id" value="' + td_profil_id.text() + '"><option value="1">Admin</option><option value="2">DP</option><option value="3">CP</option><option value="4">Référent</option><option value="5">Sachant</option><option value="6">Intervenant</option><option value="7">MOE</option></select>'); td_status.html('<select name="status" value="' + td_status.text() + '"><option value="0">Actif</option><option value="1">Inactif</option></select>');

Non ?
Mais dans ce cas, si je les enlève, mes champs ne deviennent pas des selects :/
Et je n'arrive pas à comprendre, dans la fonction, où est-ce que le select est "rempli" ? Où est-ce qu'il récupère les différents noms des profils ? Il faut aller les chercher dans la BDD, non ?

(Je suis désolée, je suis un peu novice de ce côté là @_@ )

Anju, il y a 10 ans

D'accord, je crois que je comprends mieux !
Donc du coup, je dois laisser mes deux lignes en question. Toutefois, les deux selects ne sont pas positionnés sur l'option propre à l'utilisateur mais sur la première de la liste :(

Oh, et j'utilise Bootstrap. Au cas où ça change quelque chose ^^'

Anju, il y a 10 ans

Par exemple, voilà ce que dit mon inspecteur de code sur Firefox :

<td class="profil_id"> <select value="CP" name="profil_id"> <option value="1">Admin</option> <option value="2">DP</option> <option value="3">CP</option> <option value="4">Référent</option> <option value="5">Sachant</option> <option value="6">Intervenant</option> <option value="7">MOE</option> </select> </td>

Donc là l'utilisateur est normalement de profil "CP", donc le value du select est bien sur CP, mais visuellement, il est toujours positionné sur Admin qui est la première option ! Je ne comprends pas pourquoi :/

Quand je regarde dans le deboggueur de Firefox, je ne vois rien. Ou alors je ne sais pas l'utiliser :/ Comme je le disais je n'ai jamais fais de JS avant :$

Anju, il y a 10 ans

Quand je clique sur mon bouton user-update, tous les champs de la ligne deviennent des inputs/selects, je voudrais que quand on clique sur le bouton retour, ça fasse l'inverse, pour annuler la modification ^^

Anju, il y a 10 ans

Ca fonctionne ! Merci beaucoup :D

Et est-ce que par hasard, tu saurais comment créer une action de "retour" ? Quand je clique sur mon bouton "back", je voudrais annuler toutes les actions faites quand j'ai cliqué sur mon bouton "update". Au début, j'ai pensé faire l'inverse, mais je me suis dis que c'était quand même long, et qu'il y avait sûrement beaucoup plus simple ^^'

Je remets tout mon script au cas où :

function autoSelect() { var optVal; var selectVal; $('option').each(function() { optVal = $(this).attr('value'); selectVal = $(this).closest('select').attr('value'); if (optVal == selectVal) { $(this).attr('selected', true); } }); }; function remplir() { document.getElementById('username').value = document.getElementById('name').value + document.getElementById('first_name').value; } $(document).ready(function() { $('table').find('.user-update').click(function() { var row = $(this).parents('tr'); // Création des variables en fonction des td var td_username = row.find('td.username'); var td_name = row.find('td.name'); var td_first_name = row.find('td.first_name'); var td_email = row.find('td.email'); var td_profil_id = row.find('td.profil_id'); var td_status = row.find('td.status'); var td_actions = row.find('td.actions'); // Transformation des variables (texte) en inputs/selects, en affichant les contenus des variables textes td_username.html('<input type="text" name="username" value="' + td_username.text() + '">'); td_name.html('<input type="text" name="name" value="' + td_name.text() + '">'); td_first_name.html('<input type="text" name="first_name" value="' + td_first_name.text() + '">'); td_email.html('<input type="text" name="email" value="' + td_email.text() + '">'); td_profil_id.html('<select name="profil_id" value="' + td_profil_id.text() + '"><option value="Admin">Admin</option><option value="DP">DP</option><option value="CP">CP</option><option value="Référent">Référent</option><option value="Sachant">Sachant</option><option value="Intervenant">Intervenant</option><option value="MOE">MOE</option></select>'); td_status.html('<select name="status" value="' + td_status.text() + '"><option value="Actif">Actif</option><option value="Inactif">Inactif</option></select>'); $('.hide').removeClass('hide').addClass('noHide'); $('.visible').removeClass('visible').addClass('hide'); autoSelect(); }); });

En gros, en cliquant sur mon bouton "back", il faudrait que ça annule tout ce que j'ai fais dans ma fonction click :o

Anju, il y a 10 ans

Bon, bah je vais essayer de faire ça dans l'autre sens alors ^^

J'ai ajouté ça :

$('.user-back').click(function() { td_username.html('<td class="username>' + td_username.text() + '</td>'); })

L'input disparait bien, mais le texte ne s'affiche pas :/

Anju, il y a 10 ans

Je m'y rends ^^
Et je n'ai ni casque et micro non plus (je suis au boulot) ^^

Merci pour ton aide en tout cas !