[Résolu] JQuery clone

Bonsoir

J'essaie de faire usage le fonction clone de jQuery.
En reprenant l'exemple donné dans la documentation, si j'écris

        <script type="text/javascript">
            //<![CDATA[
            function test() {
                var hello2 = $( ".hello" ).clone();
                var goodbye = $( ".goodbye" );
                hello.appendTo( goodbye );
            }
            //]]>
        </script>
        <div class="container">
            <div class="hello">Hello</div>
            <div class="goodbye">Goodbye</div>
        </div>
        <input type="button" value="test" onclick="test()"/>

Quand j'appuie sur le bouton, je m'attends à voir un clone de la div de classe "hello" être copié dans la div de class "goodbye" quand j'appuie sur le bouton
En fait il ne se produit rien.
Qu'est-ce que je fais de travers?
Modifié par PapyJP (11 Feb 2015 - 23:01)

Alors déjà tu peux virer le onClick() dans le HTML, quand on utilise jQuery on fait plutôt un truc du genre :

$('button').click(function() {
    // le code
});

Où button peut être remplacé par n'importe quel sélecteur CSS1, 2 ou 3, class ou id.

Ensuite tu clone la classe hello dans hello2 mais tu ne l'utilises pas. Je pense que cette ligne :

hello.appendTo( goodbye );

Doit ressembler à :

hello2.appendTo( goodbye );

EDIT 2 : Au passage : var goodbye = $( ".goodbye" ); ne sert pas à grand chose vu que tu l'appel qu'une seule fois dans ton code (mais ça peut être une bonne pratique).

Tu peux aussi utiliser ça pour assigner ton JS en fin de page HTML :

$(document).ready(function () {
    // code
})

EDIT : Pour revenir à l'histoire de ma première phrase, il faut séparer au maximum les éléments. C'est une page de test que tu as réalisé, donc c'est certainement voulu. Mais il faut garder en tête que chaque technologie doit être séparé et non balancer dans le HTML.
Quelques cas (comme toujours) peuvent faire que, comme une page de test, mais dans la généralité des cas, on préfèreras séparer les éléments.

Pour finir, je suis sceptique sur la réelle utilité de CDATA.
Modifié par MagicCarpet (12 Feb 2015 - 00:40)

Bonjour.

Oui, il te manque juste un petit "2", et tout devrait être arrangé.

Dernière petite remarque de convention, on préférera préfixer les variables objet jQuery par un $.

var $goodbye = $( ".goodbye" );

Après, ce n'est qu'une convention...

Merci de ta réponse
Je vais regarder de près dès que j'aurai accès à mon PC.
Hier soir j'ai essayé de jouer sur .html() pour contourner le problème et j'ai pu effectivement dupliquer et adapter la div qui m'intéressait.
Compte tenu desdites "adaptations", il est possible que j'en reste à cette solution, car il est plus simple de faire un replace sur la globalité du code que de parcourir une structure DOM.
Mais de toute façon j'ai besoin de comprendre comment fonctionne le clonage jQuery.

Concernant tes remarques: il s'agit effectivement d'un programme de test, et donc je mets des variables intermédiaires pour examiner en pas à pas. Néanmoins j'évite de faire du code trop compact, qui est plus difficile à maintenir: trois ans après tu ne te souviens plus du comment du pourquoi et s'il y a un but tu passes des heures à te gratter la tête. Et encore plus si c'est le code de quelqu'un d'autre.
Dans ma vie professionnelle j'ai dû refaire à zéro des milliers de lignes de code impossible à maintenir que j'avais héritées de programmeurs débutants.

@SolidSnake : A oui, je l'avais oublié merci.

@PapyJP : Attention, je n'ai pas parler de compacter le code au maximum mais bien de bonne pratique.

MagicCarpet a écrit :

@PapyJP : Attention, je n'ai pas parler de compacter le code au maximum mais bien de bonne pratique.

Bien entendu, nous sommes parfaitement d'accord sur ce point.
Comme je débute en jQuery, il faut adapter mes "bonnes pratiques" à ce nouveau langage.
Je dirais -- à la lecture des docs et exemples -- qu'il y a une certaine tendance à la compacité, en grande partie parce qu'un des points géniaux est qu'un appel à une fonction rend un objet jQuery, ce qui incite à empiler les appels.Cela peut aboutir à un code assez cryptique.
Il me rappelle un langage à la mode dans les années 1970, "APL" qui reposait sur des symboles ésotériques et l'empilement des résultats et produisait des programmes impossibles à maintenir, ni même à relire après un mois...

SolidSnake a écrit :
Dernière petite remarque de convention, on préférera préfixer les variables objet jQuery par un $.

var $goodbye = $( ".goodbye" );

Après, ce n'est qu'une convention...

Voilà qui me semble une excellente convention que je vais adopter sur le champ.
Modifié par PapyJP (12 Feb 2015 - 11:00)

Merci à tous deux

Après test, il se confirme que

        function test() {
                var $hello2 = $( ".hello" ).clone();
                var $goodbye = $( ".goodbye" );
                $hello2.appendTo( $goodbye );
        }

fonctionne effectivement très bien.
Il était tard, je ne devais pas voir les yeux en face des trous.

Remarque: à propos de mettre le contenu du Javascript dans

        <script type="text/javascript">
            //<![CDATA[
            ------------------------------------
            //]]>
        </script>

Je sais que c'est le plus souvent superflu, mais j'ai eu des pépins dans le passé avant que j'adopte cette "bonne pratique". C'est automatique, je n'y pense plus.

MagicCarpet a écrit :
Alors déjà tu peux virer le onClick() dans le HTML, quand on utilise jQuery on fait plutôt un truc du genre :

$('button').click(function() {
    // le code
});

Je ne crois pas que ce soit une "bonne pratique" si le seul but du bouton est de lancer la fonction: à la lecture du code, on voit tout de suite à quoi sert le bouton, sinon l'information est coupée en 2.
Ce que je comprends c'est l'intérêt de fonctions locales pour éviter les problèmes de portée des noms de fonction. Comme $('button'') rend non pas un objet mais une collection dans le cas où on ajouterait d'autres boutons de ce genre, ça ne me semble pas aider à la compréhension.

A PROPOS (comme on dit quand c'est hors de propos): j'ai un peu de mal à comprendre ce qui s'applique à $('#toto') en tant qu'objet jQuery et ce qui s'applique à l'élément DOM dont l'id est 'toto'. Connaissez vous un tableau qui fait le point sur cette question?
Modifié par PapyJP (12 Feb 2015 - 10:58)

Concernant ma remarque sur le code du bouton, le problème est que là, ton code JS est très petit.
Glisse ce même code dans un fichier qui fais beaucoup plus de lignes et là, ta fonction test, tu ne sais plus d'où elle vient ni qui l'utilise. Tu va me dire que tu l’appelleras plus test dans ce cas, certes mais quand même. Un petit commentaire alors ? Mouais, on peut oublier de le mettre à jour et c'est pas le meilleur moyen d'identifier ce genre de chose...

Alors que si tu as un code du type $('button').click(), tu sais tout de suite que c'est un bouton (ou une class, id, etc.) qui, quand on clique dessus, exécuteras la fonction anonyme associé.

Le fait d'avoir un event dans le HTML gène, je trouve, la lecture car tu es obligé de naviguer entre les fichiers pour comprendre qui fait quoi. D'où mon explication pour garder le HTML dans des fichiers HTML et ainsi séparer le JS et le CSS dans des fichiers distincts.

De plus, c'est la base même de jQuery, les click et autres méthodes sont là pour ça.

Je regarde plus en détail ton a propos entre midi et deux.
Modifié par MagicCarpet (12 Feb 2015 - 12:36)

@PapyJP Il faut oublier les attributs onclick, onemouseover... et utiliser les eventListener, c'est la méthode conseillée par MDN.

De plus lorsqu'on fait un appel de fonction dans un attribut onclick par exemple il faut que la fonction soit globale, ou descendante de Window pour être appelée. Avec addEventListener on peut appeler une fonction d'un autre scope. ($(sel).click(function(){...}); est une version raccourcie de element.addEventListerner('click', function(){...});

Pour le <[CDATA au début de vos scripts JS, il n'est nécessaire que si vous avez besoin que votre page soit parsée en tant que fichier xml.

@Freez
Concernant les événements, c'est effectivement un changement de techno auquel je vais réfléchir, en particulier les impacts sur mes méthodes de design.
Concernant la protection du contenu des balises JavaScript: j'utilise beaucoup le XML, et en conséquence avoir des fichiers XHTML m'intéresse pas mal. Par ailleurs beaucoup de mes pages (X)HTML sont générées par des programmes PHP qui ajoutent systématiquement ces protections.