Bonjour à tous, je suis débutant en JQuery, et je suis actuellement devant un problème qui me tien tête de puis plusieurs jours maintenant. 

Côtés HTML j'ai des baises <a> qui contiennent chacune des chaines de caractères, et deux bouttons : 1 modifier, et 1 valider.

La première interactions JQuery doit faire en sorte que lorsqu'on appuis sur le bouton modifier. toutes les balises <a> se transformes en balises <input> et <textarea>, mais tout en conservant les valeurs a l’intérieur afin que l'utilisateur puisse modifier ces données.

La deuxième interaction fait que lorsqu'on appuis sur valider. les données modifier soit sauvegardé. et les balises redeviennes des <a>.

Pour le moment la seule chose que j'ai réussi a faire est a transformé les balises <a> en input et <textarea>, mais les données ne sont pas transféré. 

Voici le petit bout de code que j'ai fait actuellement. j'ai essayer plusieurs méthodes mais cela ne marche pas. 

Merci d'avance de votre aide qui me serait bien utile.

$(document).ready(( function () {

  $('#modif').click(function(){ // .modif = boutton modifier
    $('.infos').replaceWith('<input>'); // .infos = tous  les <a> à transformé en <input>

  });

  $('#modif').click(function(){

    $('.area').replaceWith('<textarea value="this">'); //area = tous les <a> à transformé en <textarea>
  });

  $('#valid').click(function(){ // #valid = bouton valider

  });

}));

-
Edité par FranckyLass 15 juin 2018 à 9:52:23

Salut,

Je n'ai pas trop compris ce que tu entends par "sauvegarder" quand tu cliques sur valider. Du coup j'ai fais en sorte que les textes soient conservés aussi dans ce cas !

<a class="infos">Salut !</a>
<a class="infos">Hello !</a>
<a class="infos">Guten Tag !</a>
<a class="area">Comment vas-tu ?</a>
<a class="area">How are you ?</a>
<a class="area">Wie geht es dir ?</a>

<button id="modif">
Modifier
</button>

<button id="valid">
Valider
</button>

$(document).ready(function() 
{
    $('#modif').click(function() // Quand tu cliques sur le bouton modif
    { 
    
        $('.infos').each(function() // Pour chaque élément de la classe info
        {
            // Tu effectues le remplacement
            $(this).replaceWith('<input class="infos" value="' + $(this).text() +'">');   
        });

        $('.area').each(function() // Pour chaque élément de la classe area
        {
            // Tu effectues le remplacement
            $(this).replaceWith('<textarea class="area">' + $(this).text() +'</textarea>');   
        });

    });

    $('#valid').click(function() // Quand tu cliques sur le bouton valider
    {
        $('.infos,.area').each(function() // Pour chaque élément des deux classes
        {

            var classElem = $(this).attr('class'); // Tu stockes la classe dans une variable, vue qu'on peut en avoir deux différentes
            var text = $(this).text(); // Tu stockes le texte
            var val = $(this).val(); // Tu stockes la valeur
            console.log(text)
            console.log(val)
            // Tu effectues le remplacement
            if(text == "") $(this).replaceWith('<a class="' + classElem + '">' + val + '</a>'); // Sinon, tu es dans le cas d\'un input donc tu utilises le value
            else $(this).replaceWith('<a class="' + classElem + '">' + text + '</a>');  // Si le texte est vide, tu es dans le cas d'un textarea donc tu utilises le texte

        });
    })
});

Tu avais par ailleurs mis 2 parenthèses avant le premier "function", c'est inutile !

Dis moi si tu ne comprends pas un truc

-
Edité par Anonyme 15 juin 2018 à 14:29:15

ça fonctionne parfaitement.  Merci beaucoup. et pour le bouton " valider" c'est exactement cela que je devais faire. merci beaucoup encore, tu me m’enlève une belle épine du pied !

Pas de quoi, je sais pas si tu as remarqué mais je t'ai fais deux méthodes :

- Sur le clic modifier : tu parcours chaque classe séparément dans des boucles distinctes

- Sur le clic valider : tu parcours les deux classes ensemble dans une seule boucle, mais dans ce cas il faut que tu sépares les cas à l'intérieur de la boucle

Donc en soit tu peux utiliser la même syntaxe que tu choisis pour les deux clics, ou avoir l'une différente de l'autre !

PS : Je ne sais pas si tu sais ce que représente le console.log, mais tu peux les enlever, c'était juste pour vérifier mes test dans la console du navigateur

Bonne journée

-
Edité par Anonyme 15 juin 2018 à 14:52:04

Oui j'ai viré les console.log, et merci d'avoir géré la chose de deux manières différentes cela me permet de mieux étudier les façon de codé en JQuery.  merci encor