.live(), .clone() et navigateurs

Bonjour !
Je continue avec mes questions de neuneus...Aujourd'hui, cloner une ligne d'un formulaire !
J'explique : sur mon site de cuisine, on peut proposer des recettes. Il y a des champs à remplir, genre "accompagnements", "ingredients", "étapes", etc. Vu qu'il n'y a pas de standard en recette de cuisine, je pensais mettre un bouton + à la fin de chaque ligne de formulaire, permettant de cloner celle-ci et de l'ajouter à la suite.
Le modèle est le suivant pour le HTML:

<div id="conteneur">
    <div id="element_a_cloner">Ligne de formulaire<span class="bouton_ajout">cliquez ici pour ajouter un élément</span></div>
</div>

Et pour le jQuery ça donne ceci :

    $(".bouton_ajout").live("click",function(){
         $("#element_a_cloner").clone().appendTo("#conteneur");
         $(this).addClass("hidden");
});

Donc ça marche très bien sur Firefox. Mais, j'ai quelques questions :

- d'un point de vue accessibilité, ne vaudrait-il pas mieux créer X lignes de formulaires en html et masquer toutes sauf la première en jQuery, afin de permettre à ceux qui n'ont pas javascript de remplir quand même le formulaire ?

- IE ne semble pas prendre en compte le live() : je peux cliquer une fois sur les boutons d'ajouts. Au-delà, il ne fait plus rien.

- IE et Opera ne savent pas compter alors que Flock, Chrome et FF y arrivent : un de ces champs de formulaires est dans une liste ordonnée (les étapes de préparation de la recette). Le clonage permet de rajouter des éléments à cette liste. 3 navigateurs numérotent correctement les nouvelles lignes. IE et Opera, donc, restent à 1.

- Y a-t-il d'autres méthodes pour réaliser ce que je veux ?

Merci pour vos conseils.
Modifié par Mendoza (10 Feb 2011 - 11:20)

Une encore meilleure pratique serait d'implémenter un 'ajout' d'ingrédients en html , puis de rajouter une couche ajax pour ceux qui ont js.
Live() n'est pas toujours la meilleure méthode, lis le paragraphe caveeats de la doc de la méthode.
Assure toi d'avoir la dernière version de jquery, certains dysfonctionnement avec IE ont été résolus. source
Modifié par paolo (10 Feb 2011 - 12:16)

Pourriez-vous développer un peu plus votre recommandation, s'il vous plait ? Je ne suis pas sûr de bien comprendre. Merci.

Pour faire simple :
Un visiteur ( sans javascript) clique sur ajouter un ingrédient, le site le renvoie vers une nouvelle page html à laquelle un champ supplémentaire à été ajouté.

Pour les visiteurs avec js, le lien html 'ajouter un ingrédient' est remplacé par un ajout dans le dom du champ correpondant.

a écrit :
d'un point de vue accessibilité, ne vaudrait-il pas mieux créer X lignes de formulaires en html et masquer toutes sauf la première en jQuery, afin de permettre à ceux qui n'ont pas javascript de remplir quand même le formulaire ?

C'est peut-être acceptable en accessibilité, mais ça va te contraindre à un nombre fixe et limité d'ingrédients.

Par ailleurs, je pense que tu peux te passer de live, en associant les évènements 'ajouter une ligne' avec les boutons contenus dans le html initial de la page.
Modifié par paolo (10 Feb 2011 - 12:32)

Non mais faut arrêter de mentir. Je n'ai pas de stats sous la main mais les navigateurs sans js ca n'existe plus depuis 1993. Honnêtement en 20 ans de carrière geek j'ai du croiser plus de 20.000 pc's et j'en ai jamais vu un sans js. Même ceux sans flash commencent à se faire rares.

Faut arrêter cette légende de coder son site pour ceux qui n'ont pas js.

Bonjour,

bogs a écrit :
Faut arrêter cette légende de coder son site pour ceux qui n'ont pas js.

J'aimerais bien te croire, mais pourquoi existe-t-il l'extension Firefox NoScript? J'ose croire que c'est parce que de nombreuses personnes désactivent le Javascript pour naviguer, et l'active uniquement au besoin.

Pour une sécurité maximale sur le Web, il est préférable de désactiver le Javascript dans son navigateur. Très peu de gens prennent cette peine, mais ça limiterait déjà les dégâts. J'imagine que quelques ordinateurs dans les réseaux d'entreprise resserrent cette sécurité.

Les avantages de coder un site pour qu'il fonctionne même sans Javascript sont les suivants :

- L'essentiel du site demeure fonctionnel même en cas d'erreur Javascript (navigateur incompatible, extension du navigateur entrant en conflit, antivirus sur les hormones, erreur de manipulation du webmaster lors d'une mise à jour du site...),
- Si le Javascript est désactivé volontairement ou involontairement, le site reste encore une fois fonctionnel
- Un robot d'indexation consulte le site comme un visiteur sans Javascript. Il peut arriver à se débrouiller pour dénicher des urls, mais si tout le contenu du site est généré dynamiquement via Javascript, il n'arrivera pas à indexer le contenu.
- Je pourrais trouver d'autres arguments, mais pas de chance je manque de temps!

Pour des explications plus détaillées et quelques réactions, lire l'article Pourquoi certains n'activent pas Javascript.
Modifié par Tony Monast (10 Feb 2011 - 18:17)

Tony Monast a écrit :
Bonjour,



J'aimerais bien te croire, mais pourquoi existe-t-il l'extension Firefox NoScript? J'ose croire que c'est parce que de nombreuses personnes désactivent le Javascript pour naviguer, et l'active uniquement au besoin.

Pour une sécurité maximale sur le Web, il est préférable de désactiver le Javascript dans son navigateur. Très peu de gens prennent cette peine, mais ça limiterait déjà les dégâts. J'imagine que quelques ordinateurs dans les réseaux d'entreprise resserrent cette sécurité.

Les avantages de coder un site pour qu'il fonctionne même sans Javascript sont les suivants :

- L'essentiel du site demeure fonctionnel même en cas d'erreur Javascript (navigateur incompatible, extension du navigateur entrant en conflit, antivirus sur les hormones, erreur de manipulation du webmaster lors d'une mise à jour du site...),
- Si le Javascript est désactivé volontairement ou involontairement, le site reste encore une fois fonctionnel
- Un robot d'indexation consulte le site comme un visiteur sans Javascript. Il peut arriver à se débrouiller pour dénicher des urls, mais si tout le contenu du site est généré dynamiquement via Javascript, il n'arrivera pas à indexer le contenu.
- Je pourrais trouver d'autres arguments, mais pas de chance je manque de temps!

Pour des explications plus détaillées et quelques réactions, lire l'article Pourquoi certains n'activent pas Javascript.

>pourquoi existe-t-il l'extension Firefox ?
Pour les hackers("piratage" du site), les webmasters, et pour la protection de ceux qui vont sur des sites tellement douteux (porn/warez) qu'il est préférable pour leurs sécurité de désactiver le JS le temps de la visite du site en question.

Coder HTML pour la "désactivation du JS en cas d'erreur", c'est un peu le gars qui va coder 2 version de son programme en C++ ET en JAVA pour être sûr qu'un des 2 fonctionnera.

Reste effectivement les problèmes d'indexation pour lesquels les moteurs de recherches ont encore du mal avec l'ajax. Mais y'a les sitemap.xml qui sont prévus pour ça.

Je maintiens donc qu'il faut arrêter de répandre le plus gros mensonge du 21è siècle !
Modifié par bogs (10 Feb 2011 - 18:39)

bogs a écrit :
les navigateurs sans js ca n'existe plus depuis 1993

Connais-tu Lynx ? C'est un navigateur qui ne prend pas du tout en charge le JavaScript et qui existe encore.

bogs a écrit :
>pourquoi existe-t-il l'extension Firefox ?
Pour les hackers("piratage" du site), les webmasters, et pour la protection de ceux qui vont sur des sites tellement douteux (porn/warez) qu'il est préférable pour leurs sécurité de désactiver le JS le temps de la visite du site en question.

Raison de plus de s'assurer que le site reste consultable sans JavaScript.

bogs a écrit :
Reste effectivement les problèmes d'indexation pour lesquels les moteurs de recherches ont encore du mal avec l'ajax. Mais y'a les sitemap.xml qui sont prévus pour ça.

Et encore, les sitemaps ne sont pas la garantie absolue d'indexation. Le moyen le plus efficace d'indexer une URL est de créer des liens qui y pointent et sont fonctionnels sans JavaScript (pour le cas où tu serais tenté de parler des liens JavaScript ).

bogs a écrit :
Je maintiens donc qu'il faut arrêter de répandre le plus gros mensonge du 21è siècle !

En quoi est-ce un gros mensonge ?

<parenthèse>

bogs a écrit :
Même ceux sans flash commencent à se faire rares.

Connais-tu l'iPhone ou l'iPad ? Eh bien, figure-toi que bon nombre de sites avec Flash sont inaccessibles sur ces supports, faute de disposer d'une alternative au Flash.
</parenthèse>

bogs a écrit :

Coder HTML pour la &quot;désactivation du JS en cas d'erreur&quot;, c'est un peu le gars qui va coder 2 version de son programme en C++ ET en JAVA pour être sûr qu'un des 2 fonctionnera.

Non, ça n'a rien à voir. Il vaut mieux éviter les analogies, ça ne fait jamais avançer un débat.

bogs a écrit :

Reste effectivement les problèmes d'indexation pour lesquels les moteurs de recherches ont encore du mal avec l'ajax. Mais y'a les sitemap.xml qui sont prévus pour ça.

Je préfère coder une version HTML de base et mettre une surcouche Javascript, plutôt que d'être obligé de créer un sitemap juste pour que l'indexation se porte bien, ce qui n'est pas garantie.

bogs a écrit :

Je maintiens donc qu'il faut arrêter de répandre le plus gros mensonge du 21è siècle !

Ce n'est pas un mensonge. L'exemple même des robots d'indexation est très parlant. Juste cet argument est suffisant pour réaliser le site proprement. Je pense plutôt que le mensonge est de se dire que ce n'est pas important et que le Javascript désactivé est un mythe. À noter que si tu es trop pressé ou paresseux pour faire une version fonctionnelle sans Javascript, tu es dans ton droit, mais dire que tout ça est un mythe...

L'idée n'est pas de reproduire entièrement les fonctionnalités Javascript avec HTML, mais d'avoir une version HTML de base fonctionnelle, et l'améliorer via Javascript.
Modifié par Tony Monast (10 Feb 2011 - 19:26)

Lynks l'argument du troll. Je pense que même la Playstation est encore plus utilisée pour naviguer sur le web.

Mon grand-père utilise encore ms-dos pour lancer de vieilles api.

Ce n'est pas pour autant que je vais créer des versions ms-dos des softs que je crée.

Ok, c'est encore une analogie pas tout à fait correct mais ca fait bien passer l'idée.

Sérieux tout le monde fait passer ce mythe en le répétant bêtement car en 2000 c'était encore un peu vrai. ( comme ca l'est pour flash aujourd'hui ) . Mais créer une version noscript aujourd'hui, c'est comme se soucier de la compatibilité avec ie4. ( et oui, y'en à aussi beaucoup qui croient en ce mythe là).

J'ajoute ma pierre à l'édifice .

Si les arguments précédents ne sont pas reçus et sont soit-disant du domaine du troll (ils sont tous recevables soit dit en passant) pourquoi ne pas prendre le problème sous un autre angle.

Bizarrement ce qui est choquant pour la présentation ne choque pas pour les comportements. La séparation fond / comportement (DOM / Events) coexiste à la séparation fond / forme. Ce sont juste des règles de conception élémentaires qui profitent aux concepteurs et aux visiteurs.

bogs a écrit :
Mais créer une version noscript aujourd'hui, c'est comme se soucier de la compatibilité avec ie4. ( et oui, y'en à aussi beaucoup qui croient en ce mythe là).

Tu confonds version "noscript" avec le concept de Progressive Enhancement.
Modifié par yodaswii (10 Feb 2011 - 21:08)

bogs a écrit :
Lynks l'argument du troll. Je pense que même la Playstation est encore plus utilisée pour naviguer sur le web.

On se demande plutôt c'est qui le troll ici!

bogs a écrit :

Mon grand-père utilise encore ms-dos pour lancer de vieilles api.

Ce n'est pas pour autant que je vais créer des versions ms-dos des softs que je crée.

Ah les magnifiques analogies. On pourrait tous en sortir une ou deux qui pourraient coller à nos argumentations respectives. Ce n'est pas pour autant que ça fait avançer le débat. Cela dit, tu salueras ton grand-père!

bogs a écrit :

Sérieux tout le monde fait passer ce mythe en le répétant bêtement car en 2000 c'était encore un peu vrai. ( comme ca l'est pour flash aujourd'hui ) . Mais créer une version noscript aujourd'hui, c'est comme se soucier de la compatibilité avec ie4. ( et oui, y'en à aussi beaucoup qui croient en ce mythe là).

Je crois que c'est de la mauvaise foi là pour parler que des gens s'occupent encore de la compatibilité de IE4... C'est l'argument du troll ça aussi?

L'argument du robot d'indexation justifie amplement de conseiller de développer le Javascript en surcouche.

On pourrait toujours en parler à MythBusters pour trancher.

Je n'ai rien à ajouter à ce qu'ont dit dernièrement mes deux camarades, si ce n'est ceci : si tu veux troller sur Alsacréations, bogs, c'est uniquement le vendredÿ, pas le jeudi.

Fin de la parenthèse (du moins, je l'espère ).

a écrit :
Non mais faut arrêter de mentir. Je n'ai pas de stats sous la main mais les navigateurs sans js ca n'existe plus depuis 1993. Honnêtement en 20 ans de carrière geek j'ai du croiser plus de 20.000 pc's et j'en ai jamais vu un sans js. Même ceux sans flash commencent à se faire rares.

Faut arrêter cette légende de coder son site pour ceux qui n'ont pas js.

Les derniers chiffres que j'ai vus donnaient 5-6 % sans js (le w3c )
Visiblement tu mélanges différents concepts. Tes assertions auraient plus de poids si tu les appuyais sur des données vérifiables ou reconnues.

paolo a écrit :


Les derniers chiffres que j'ai vus donnaient 5-6 % sans js (le w3c )
Visiblement tu mélanges différents concepts. Tes assertions auraient plus de poids si tu les appuyais sur des données vérifiables ou reconnues.

Le troll est bien parti.^^
Franchement le jour où vous trouverez qqn qui connait "lynks" sur un forum de gens "normaux" appelez moi. En attendant si tes stats ont été faites sur les visiteurs de w3c je veux bien te croire qu'il y a 5% de noscript. Et enfin tes derniers chiffres datent de 2008, une époque où les smartphones n'étaient pas tous achevés.
Modifié par bogs (11 Feb 2011 - 10:20)

a écrit :
Le troll est bien parti.^^

Qui l'a initié ?

a écrit :
le jour où vous trouverez qqn qui connait "lynks" sur un forum de gens "normaux"

Ça va bien faire plaisir aux "pas normaux" qui fréquentent ce forum .

Le concept d'amélioration progressive qui consiste à bâtir sur un empilement fond/forme/comportement est une bonne pratique, et pas uniquement dans une optique noscript.
Je suis tout a fait conscient que c'est parfois très chronophage d'implémenter un fallback sans js, et on ne peut pas le faire systématiquement. Mais la question initiale portait (en partie) sur l'accessibilité, les bonnes pratiques.

paolo a écrit :

Qui l'a initié ?



Ça va bien faire plaisir aux &quot;pas normaux&quot; qui fréquentent ce forum .

Le concept d'amélioration progressive qui consiste à bâtir sur un empilement fond/forme/comportement est une bonne pratique, et pas uniquement dans une optique noscript.
Je suis tout a fait conscient que c'est parfois très chronophage d'implémenter un fallback sans js, et on ne peut pas le faire systématiquement. Mais la question initiale portait (en partie) sur l'accessibilité, les bonnes pratiques.

^^ pour le troll

Sinon effectivement parfois recoder une version noscript prend autant de temps que d'avoir codé le site initial. ( je parle de site forts axés js, comme ceux "entièrement" fait en ajax) . Donc au final ça double le temps de création. Et selon moi ( avis personnel ) , c'était jusqu il y à peu une bonne pratique mais ce n'est plus vrai aujourd'hui alors qu'une majorité suffisante ( selon moi tjs ) de navigateurs prennent en charges le js.
Modifié par bogs (11 Feb 2011 - 11:31)

Merci pour tous ces retours. Je ne pensais pas lancer un tel débat ^^
Pour ma part en tant que débutant armé de bonnes intentions, je me force à envisager une version sans js, même si j'avoue que ça me gonfle prodigieusement de passer tellement de temps là-dessus, pour à peine 5% d'utilisateurs potentiels. Mais bon, ce que je fais là, c'est pour apprendre, et je me dis que de toute façon ce n'est pas du temps perdu. Ca me permet déjà d'être de plus en plus à l'aise. Y a encore pas mal de boulot à abattre. Bref.

@Paolo>cette solution de mettre le bouton directement dans le html était tellement logique que je ne l'avais pas envisagé. Merci. Effectivement, maintenant ça marche pour tous les navigateurs. Y a plus qu'un problème de comptage des éléments LI dans une OL. IE et Opera restent à 1 au lieu d'incrémenter normalement à chaque ajout de ligne. M'enfin c'est très secondaire comme problème.

PS : je vous propose un autre thème de débat ici
http://forum.alsacreations.com/topic-1-53732-1-Approche-preparatoire--meilleur-moyen-de-sauver-des-infos.html

Et l'eau,

Règle numéro 1 : Le web pour toutes et tous ! Les standards sont fait pourquoi ?

Règle numéro 2 : Ce n'est pas à l'utilisateur de se plier aux exigences du développeur web, mais plutôt l'inverse.

Règle numéro 3 : Ce n'est pas parce que le développeur web a une machine qui coûte plus de 8.000 € que tous les utlisateurs ont la même machine.

Règle numéro 4 : Une application web doit être compatible et portable le plus possible.
Modifié par niuxe (12 Feb 2011 - 13:27)

niuxe a écrit :
Et l'eau,

Règle numéro 1 : Le web pour toutes et tous ! Les standards sont fait pourquoi ?

Règle numéro 2 : Ce n'est pas à l'utilisateur de se plier aux exigences du développeur web, mais plutôt l'inverse.

Règle numéro 3 : Ce n'est pas parce que le développeur web a une machine qui coûte plus de 8.000 € que tous les utlisateurs ont la même machine.

Règle numéro 4 : Une application web doit être compatible et portable le plus possible.

1) Pour des linuxiens anarchistes ? + "haha"

2) voir 1

3) voir 1

4) voir 1

Et non je ne passerai pas 3 fois plus de temps pour coder mon site pour satisfaire les 1,5% de linuxiens anarchistes qui s'obstinent à utiliser lynks. Mais si certains ont le courage de le faire, c'est tout à leurs honneur.