Probleme de code Ajax

Version imprimable

29/07/2010, 11h58
TAMBOOH

Probleme de code Ajax

Bonjour,

J'ai un probleme d'ajax.
J'ai un tableau d'enregistrement et sur chaque ligne j'ai un bouton "Modifier".
J'aimerais changer les cellules en Textbox pour chaque clicke du "Modifier".
Vos propositions sont les bienvenus

Merci
29/07/2010, 15h43
jonathan3357
Salut TAMBOOH,

Je pense que tu devrais mettre dans chaque cellule de ton tableau une information permettant d'identifier la colonne sur laquelle tu te situe :
Code:

1 2 3 4 5 6 7 8 <tr class="L1"> <td class="COL_Name">DUPONT</a> <td class="COL_Prenom">Jacques</td> ... <td><input type="button" value="Modifier" /></td> ... </tr>
Ensuite, en utilisant par exemple JQuery, tu peux grâce au clic sur le bouton Modifier, parcourir le DOM et connaitre les éléments père, enfants ..., et les modifier.

Donc dans l'exemple ci-dessus, Le père du bouton est un TD, qui lui a pour père un TR, donc via TF, tu peux regarder tous les enfants TD ayant une class spécifique, et après remplacé le contenu des TD par des INPUT.

J'espère que cela t'aidera ;)
03/08/2010, 15h11
TAMBOOH
Citation:
Envoyé par jonathan3357

Salut TAMBOOH,

Je pense que tu devrais mettre dans chaque cellule de ton tableau une information permettant d'identifier la colonne sur laquelle tu te situe :

Code:

1 2 3 4 5 6 7 8 <tr class="L1"> <td class="COL_Name">DUPONT</a> <td class="COL_Prenom">Jacques</td> ... <td><input type="button" value="Modifier" /></td> ... </tr>

Ensuite, en utilisant par exemple JQuery, tu peux grâce au clic sur le bouton Modifier, parcourir le DOM et connaitre les éléments père, enfants ..., et les modifier.

Donc dans l'exemple ci-dessus, Le père du bouton est un TD, qui lui a pour père un TR, donc via TF, tu peux regarder tous les enfants TD ayant une class spécifique, et après remplacé le contenu des TD par des INPUT.

J'espère que cela t'aidera ;)
bonjour,
En faite j'ai l'Id de mes instances (chaque lignes), mais mon probleme c'est sur le Jquery: Je sais pas par ou commencer.
Avec un peu plus de precision je devrais y arriver,
Merci

Ok c'est plus JQuery qui te dérange pour le moment on va dire.

Alors déjà dans un premier temps, il faut que t' initialise JQuery, pour cela, le plus simple est de suivre le tuto (http://docs.jquery.com/Tutorials:Get...ed_with_jQuery).

Après, pour simplifier le parcours de tes éléments, il faut que tu insère le plus d'information dans l'html pour que tu puisse facilement naviguer dans ton code (http://api.jquery.com/category/selectors/ <<< en regardant la rubrique des sélecteurs tu comprendra mieux) :
Code:

1 2 3 4 5 6 7 8 <tr class="EditableRow" id="ROW_ID"> <td class="Field_Nom">DUPONT</a> <td class="Field_Prenom">Jacques</td> ... <td><input type="button" value="Modifier" id="Btn_Row_Id" /></td> ... </tr>
Donc grâce au javascript et aux sélecteurs, tu va pouvoir naviguer dans ton html, voici des exemples (La syntaxe des sélecteurs est la même que pour déclarer des styles en css):

$('EditableRow') << Cela va te récupérer tous les éléments marqués comme "Modifiable" (y compris une div si tu as mis <div class="EditableRow"></div>)

$('tr.EditableRow') << Ca va te récupérer cette fois-ci uniquement les lignes ayant la class EditableRow

$('tr.EditableRow td[class^=Field]') << Cela va te récupérer les Colonnes contenu dans une ligne marqué comme modifiable ayant pour class une class qui commence par la chaine Field

ensuite, avec JQuery, tu peux récupérer ce qui est contenu dans un élément :
$('tr.EditableRow td[class=Field_Nom]').html() << Cela va te retourner la valeur "DUPONT".

Et tu peux modifier son contenu :

$('tr.EditableRow td[class=Field_Nom]').html('<td><input type="text" value="'+$('tr.EditableRow td[class=Field_Nom]').html()+'"/> ') << cela te modifiera "DUPONT" en un champ de formulaire ayant comme valeur "DUPONT".

Donc la, tu va pouvoir modifier le contenu de tes cellules & cie grâce a tout ça.

Ensuite, il faut que tu gère le click sur le bouton modifier, alors, soit tu gère ca avec l'attribut onclick de ton bouton, ou alors, tu peux faire ça avec JQuery et les sélecteurs (http://api.jquery.com/click/) qui te permettront d'affecter une fonction à tous les boutons modifier des lignes modifiables :
Code:

1 2 3 4 $('tr.EditableRow input[type=button]').click(function() { // C'est ici que tu va modifier les colonnes de ton tableau pour afficher un formulaire });
Donc j'espère que cela suffit, sinon, je te ferai un exemple complet qui répondrait à ton besoin :)

Donc voila un exemple que je viens de faire.

Donc voici le contenu de la page Default.aspx, qui reprend les exemples que je te donnais avant :

Code:

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
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<!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 runat="server">
    <title></title>
 
    <script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/MyScript.js"></script>
 
    <style type="text/css">
    table, tr, td { border:solid 1px black; margin:0; padding:0; width:50%; }
    </style>
 
</head>
<body>
    <table>
       <tr class="EditableRow" id="ROW_1">
           <td class="Field_Nom">DUPONT1</td>
           <td class="Field_Prenom">Jacques1</td>
           <td><input type="button" value="Modifier" id="BTN_ROW_1" /></td>
       </tr>
 
       <tr class="EditableRow" id="ROW_2">
           <td class="Field_Nom">DUPONT</td>
           <td class="Field_Prenom">Jacques</td>
           <td><input type="button" value="Modifier" id="BTN_ROW_2" /></td>
       </tr>
 
       <tr class="EditableRow" id="ROW_3">
           <td class="Field_Nom">DUPONT----</td>
           <td class="Field_Prenom">Jacques????</td>
           <td><input type="button" value="Modifier" id="BTN_ROW_3" /></td>
       </tr>
    </table>
</body>
</html>

Et voici le javascript qui permet de remplacer le contenu de la cellule par des TextBox :

MyScript.js

Code:

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
 
 
 
$(document).ready(function () {
 
    // Ici, je lie la fonction btn_modifier_click à tous les bouton "Modifier"
    $('tr.EditableRow input[type=button]').click(btn_modifier_click);
});
 
 
function btn_modifier_click() {
    // Je récupère l'attribut ID du bouton que je viens de cliquer, 
    // ce qui me permet de connaitre l'ID de la ligne (BTN_ROW_1)
    var btnID = "" + $(this).attr('id').toString();
    var ID = btnID.replace('BTN_ROW_', ''); // Le je transforme donc le BTN_ROW_1 en 1
 
    // Et ici, je sélectionne donc toutes les TD ayant une class commenceant par field de la ligne ROW_1
    // et je boucle sur ces lignes ( c'est le $.each() )
    $.each($('tr.EditableRow[id=ROW_' + ID + '] td[class^=Field]'), function (index, object) {
        // La je recupère ce qui est contenu dans la TD, donc le nom ouprénom de la personne que je veux modifier
        var value = $(object).html();
        // Et je remplace le contenu de la cellule par une TextBox ayant pour valeur par défaut, le nom ou prénom de l'utilisateur sélectionné
        $(object).html("<input type='text' value='"+value+"' name='"+ $(object).attr('id')+"'");
    });
 
}

Voilà, avec cela, tu devrais pouvoir mieux comprendre comment ça fonctionne, et après tu le complètera pour y intégrer l'AJAX ... afin que les modifications soient prise en compte ;)