Discussion :

[Invité]

Salut à tous,

Je cherche de l’aide en ce qui concerne un script JQuery de modification d’article, je m’explique… Je voudrais que l’utilisateur en cliquant sur le bouton « Corriger » puisse saisir une nouvelle valeur, grâce à un input de type text qui remplacerait la valeur entrée en HTML brut (cf. les deux images):

Mon code JQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function corrigerArticle(){
            $('.corriger').toggle();
            $('.supprimer').toggle();
            $('.accepter').toggle();
            $('.annuler').toggle();
 
            var par = $(this).parent();
 
            var identification = par.children("h1:nth-child(1)");
            //var notation = par.children("???");
            //var numerotation = par.children("???");
            //var datation = par.children("???");
            //var localisation = par.children("???");
            //var memorisation = par.children("???");
            //var remarquation = par.children("???");
 
            identification.html("<input type='text' id='txtName' value='"+identification.html()+"'/>");
            //notation.html("<input type='text' id='txtName' value='"+notation.html()+"'/>");
            //numerotation.html("<input type='text' id='txtName' value='"+numerotation.html()+"'/>");
            //datation.html("<input type='text' id='txtName' value='"+datation.html()+"'/>");
            //localisation.html("<input type='text' id='txtName' value='"+localisation.html()+"'/>");
            //memorisation.html("<input type='text' id='txtName' value='"+memorisation.html()+"'/>");
            //remarquation.html("<input type='text' id='txtName' value='"+remarquation.html()+"'/>");
        }
        $('.corriger').click(corrigerArticle);

Mon code HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<article class="fiche" id="a2">
    <h1>Marie Poudrière</h1>
    <img src="photos/marie.jpg" alt="photo"> 
    <table>
        <tr>
            <td class="information">Note: </td>
            <td class="note">8/10</td>
        </tr>
         <tr>                     
            <td class="information">Téléphone: </td>
            <td class="telephone">06.XX.XX.XX.XX</td>
        </tr>
        <tr>
            <td class="information">Date: </td>
            <td class="date">2014-11-15</td>
        </tr>
        <tr>
            <td class="information">Lieu de rencontre: </td>
            <td class="lieu-rencontre">XXXXXXX</td>
        </tr>
        <tr>
            <td class="information">Meilleur souvenir: </td>
            <td class="souvenir">XXXXXXX</td>
        </tr>
         <tr>
            <td class="information">Remarque(s): </td>
            <td class="remarque">XXXXXXX</td>
        </tr>
    </table>
    <input class="corriger" type="submit" value="Corriger">
    <input class="accepter" type="submit" value="Accepter">
    <input class="supprimer" type="submit" value="Supprimer">
    <input class="annuler" type="submit" value="Annuler">
</article>

Pourriez-vous m'aider à compléter les ".children("???");", s'il vous plait?

Le premier "identification" qui modifie le titre h1 fonctionne, mais je n'y arrive pas pour les autres...

Merci d'avance !

PS: ne faites pas attention aux noms que j'ai pu donner, ce n'est pas toujours très français...

[danielhagnoul]

Bonjour

Sous réserve d'avoir bien compris, je vous conseille de procéder d'une autre manière, par exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
51
<article class="fiche" id="a2">
    <h1>Marie Poudrière</h1>
    <img src="photos/marie.jpg" alt="photo"> 
    <table>
        <tbody id="fiche">
            <tr>
                <td class="information">Note: </td>
                <td class="note">
                    <input name="note" type="text" value="8/10">
                    <button class="corriger">Corriger</button>
                </td>
            </tr>
             <tr>                     
                <td class="information">Téléphone: </td>
                <td class="telephone">
                    <input name="telephone" type="text" value="06.XX.XX.XX.XX">
                    <button class="corriger">Corriger</button>
                </td>
            </tr>
            <tr>
                <td class="information">Date: </td>
                <td class="date">
                    <input name="date" type="text" value="2014-11-15">
                    <button class="corriger">Corriger</button>
                </td>
            </tr>
            <tr>
                <td class="information">Lieu de rencontre: </td>
                <td class="lieu-rencontre">
                    <input name="lieuRencontre" type="text" value="XXXXXXX">
                    <button class="corriger">Corriger</button>
                </td>
            </tr>
            <tr>
                <td class="information">Meilleur souvenir: </td>
                <td class="souvenir">
                    <input name="souvenir" type="text" value="XXXXXXX">
                    <button class="corriger">Corriger</button>
                </td>
            </tr>
             <tr>
                <td class="information">Remarque(s): </td>
                <td class="remarque">
                    <input name="remarque" type="text" value="XXXXXXX">
                    <button class="corriger">Corriger</button>
                </td>
            </tr> 
        </tbody>
    </table>
    <button id="accepter">Accepter</button>
</article>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
$( function( ){
 
    // les inputs
    var jObjInput = $( "input", "#fiche" );
 
    // interdire la modification
    jObjInput.prop( "disabled", true );
 
    /*
     * L'utilisateur veut corriger une valeur
     */
    $( "button.corriger" ).on( "click", function(){
 
        // permettre la modification
        $( this )
            .prev()
            .prop( "disabled", false )
            .trigger( "focus" );
    });
 
    /*
     * L'utilisateur accepte les valeurs
     */
    $( "#accepter" ).on( "click", function(){
 
        /*
         * stocker les valeurs des inputs dans str
         */
        jObjInput.prop( "disabled", false );
        var str = jObjInput.serialize();
        jObjInput.prop( "disabled", true );
 
        // debug, console, touche F12
        console.log( str );
 
        /*
         * Transaction AJAX POST
         * 
         * En PHP, les noms des variables sont
         * ceux de l'attribut name des inputs.
         * 
         * Ex : $_POST["lieuRencontre"]
         * 
         * Les valeurs sont dans la variable str.
         * 
         * Ex : "note=8%2F10&telephone=06.XX.XX.XX.XX&date=2014-11-15"
         */
        var jqXHR = $.post( "monFichier.php", str );
 
        jqXHR.done( function( data, textStatus, jqXHR ){
            // succès de la transaction, on doit traiter le contenu de data
            console.log( data, textStatus, jqXHR );
 
        });
 
        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
            // échec de la transaction, gérer la catastrophe
            console.log( jqXHR, textStatus, errorThrown );
 
        });
 
        /*
        // éventuellement
        jqXHR.always( function( jqXHR, textStatus ){
            // la transaction est terminée
            console.log( jqXHR, textStatus );
            
        });
        */
 
    });
 
});

[Invité]

Bonjour danielhagnoul,
Merci beaucoup pour votre réponse, c'est en effet quelque chose dans ce style là que je cherchais. J'avais plutôt l'intention de centraliser les boutons "corriger" en un seul, mais l'intention reste la même!
Pour ceux qui seraient éventuellement intéressés, voici le rendu avec la solution proposée:


S'il n'y a pas d'autre solution correspondant plus à mon souhait de départ d'ici ce soir, je fermerai le sujet.
Merci !