osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> [bug]Ckeditor : validation de formulaire via jquery, multiple instances de ckeditor en échec
FoxP2
posté 4 Oct 2013, 13:18
Message #1


Ceinture marron OSC
Icône de groupe

Groupe : Membres
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



Dans mon application, j'utilise cet éditeur.
J'ai constaté un bug. Si plusieurs instances de l'éditeur sont inclus dans le même formulaire, seul la première est sauvegardée lorsqu'on valide le formulaire en js.

code mis en échec :
Code
<form id="article_create" action="" method="post">
<!-- reste du code -->
</form>

    <a title="" id="button_submit" class="win-command white pull-right" href="#">
        <span class="win-commandicon win-commandring icon-plus"></span>  
        <span class="win-label white">Créer</span>
    </a>
<script>
$('#button_submit').click(function() {
$('#article_create').submit();
});
</script>


résolu en déportant la validation js directement dans la balise lien

Code
    <a title="" id="button_submit" class="win-command white pull-right" href="#" onclick="$('#article_create').submit();">
        <span class="win-commandicon win-commandring icon-plus"></span>  
        <span class="win-label white">Créer</span>
    </a>


pourtant, il y a bien un bug report à ce propos qui devrait corriger le problème (j'utilise bien la version CKEditor 4.2.1) :
http://dev.ckeditor.com/ticket/10689

avec une seule instance de ckeditor, la validation js fonctionne.
Go to the top of the page
 
Gnidhal
posté 6 Oct 2013, 23:35
Message #2


5eme dan OSC
Icône de groupe

Groupe : Administrateur
Messages : 9221
Inscrit : 4-March 03
Lieu : Pau
Membre no 927



Plusieurs instances, cela ne signifierait pas plusieurs id identiques ?
$('#button_submit') ne cible donc que le premier dans le dom.
Une idée comma ça...
suffirait d'insérer une variable d'incrément sur l'id non ?


--------------------
Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues :
Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums.
Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin.

----------------------------- Quelques sites de référence ---------------------------
PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js
Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper
Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien)
Go to the top of the page
 
FoxP2
posté 7 Oct 2013, 06:26
Message #3


Ceinture marron OSC
Icône de groupe

Groupe : Membres
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



Citation (Gnidhal @ 6 Oct 2013, 23:35) *
Plusieurs instances, cela ne signifierait pas plusieurs id identiques ?

sauf que ça, c'est une erreur de débutant, hors il me semble que je ne suis plus débutant, même si je laisse à croire que je pourrais l'être.

on le voit ici, les deux instances de ckeditor fonctionnent.

donc soit c'est dans le noyau même de ckeditor que le problème réside (car l'éditeur traverse le dom et rencontre un nœud 'submit' qui est intégré dans son code[la toolbar de ckeditor embraque un bouton save de type submit], mais dès lors où il y a plusieurs instances, ce parcours plante. il doit manquer une boucle dans le script lui même.)

soit mon instruction .submit() avec l'objet jQuery est mal implémentée et ne permet pas au script de prendre en compte l'ensemble des champs.
D'ailleurs, je le précise, en déportant l'instruction js au cœur de la balise 'a', ça fonctionne nickel (onclick).
Mais je n'aime pas cette solution, car pour moi, les instructions js doivent être dans un script, les styles dans un css et les vaches seront bien gardées. (puis c'est plus simple pour déboguer)

cependant quand j'ai qu'une seule instance de ckeditor, comme dans ce formulaire, mon .submit() ne pose pas problème.

pire, aucune erreur javascript n'est soulevée : comme dit ici

Citation
If multiple ckeditor instances are present in the form, only the first instance is saved (others are posted in their original state);

New to 4.2 (4.1.3 ok)(also present in latest github)

Firefox, webkit, no javascript error
Go to the top of the page
 
Gnidhal
posté 7 Oct 2013, 08:32
Message #4


5eme dan OSC
Icône de groupe

Groupe : Administrateur
Messages : 9221
Inscrit : 4-March 03
Lieu : Pau
Membre no 927



Citation (FoxP2 @ 7 Oct 2013, 07:26) *
sauf que ça, c'est une erreur de débutant, hors il me semble que je ne suis plus débutant, même si je laisse à croire que je pourrais l'être.
Waip, un truc de newbees mais le code c'est un peu comme l'orthographe, même un super champion peut se faire piéger par une faute élémentaire en raison de :
- fatigue
- inattention
- faute de frappe
- redondance visuelle cyclique
- ...
(rayer les mentions inutiles ou compléter si besoin)
Loin de moi de vouloir donner une leçon, mais juste apporter un autre point de vue.
Mais il est vrai qu'avec du code visible on comprend mieux l'étendu du problème. Tu n'as qu'une seule instance de button.submit mais plusieurs instances de cKe. Plus clair.
Alors j'ai une piste : dans la toolbar il y a un bouton qui effectue aussi le submit() , la disquette. Or ces deux boutons semblent fonctionner dans le cas de multiples instances. Ok ils sont dans le form et dans ce cas un simple submit() devrait suffire, cela dit, c'est peut-être un indice.
Hypothèse : cKe gère peut-être l'évènement autrement dans le cas de multiples instances en bloquant le jQuery déporté pour le gérer à sa manière. Au cas où, mais il me semble superflu puisque la différence est que les boutons de la toolbar sont apparemment dans le form.
Cela expliquerai que le bouton "en dur" fonctionne car il ne passe pas par le déport ready(function().
Ok, c'est résolument un bug identifié de ce framework.
Comme tu le sais, je fonctionne en logique simple déduction mais un autre angle de vue peut parfois apporter une lumière ou 'ring a bell'...





--------------------
Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues :
Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums.
Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin.

----------------------------- Quelques sites de référence ---------------------------
PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js
Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper
Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien)
Go to the top of the page
 
Gnidhal
posté 11 Oct 2013, 14:24
Message #5


5eme dan OSC
Icône de groupe

Groupe : Administrateur
Messages : 9221
Inscrit : 4-March 03
Lieu : Pau
Membre no 927



J'y reviens car j'ai constaté autre chose sur ce bouton 'save' de cke
J'ai un formulaire que je souhaite vérifier avant d'envoyer, j'ai donc dans ma déclaration de formulaire un truc comme
Code
onsubmit="return CheckForm(this);"

Tout va bien quand je valide mon formulaire à l'aide d'un bouton <insert type="submit"> (donc dans le formulaire) ou que j'appuie sur la touche entrée, le contrôle du formulaire se fait correctement via la fonction CheckForm
mais si j'ai un bouton js (toujours dans le form mais déplaçable en ciblant le formulaire dans l'instruction) qui contient onclick="this.form.submit()", le contrôle ne se fait plus. Mon bouton doit contenir onclick="CheckForm(this.form)";
Le bouton save de cke fait le même type de submit sans contrôle (j'ai pas fouillé le code, mais j'imagine un simple this.form.submit()) Je ne peux donc l'utiliser pour mon formulaire qui part sans contrôle. ça me gène pas, j'ai viré le bouton de la toolbar wink.gif c'est le plus simple dans mon cas.
A priori aucun rapport avec ta non validation, quoi que... c'est peut-être une piste.
Waip, je sais, ça ne résout pas le bug cke racine, mais si ça peut aider...

Au passage j'utilise la ckEditor version:"4.1.2",revision:"d6f1e0e" qui ne pose aucun problème avec plusieurs instances dans le même formulaire.


--------------------
Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues :
Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums.
Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin.

----------------------------- Quelques sites de référence ---------------------------
PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js
Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper
Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien)
Go to the top of the page
 
FoxP2
posté 12 Oct 2013, 08:42
Message #6


Ceinture marron OSC
Icône de groupe

Groupe : Membres
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



effectivement, je viens de faire un test sur un formulaire contenant 3 instances de ckeditor avec une toolbar réduite (donc sans l'option save), la validation via l'objet jquery fonctionne comme attendu

le code source du browser

HTML
<form style="margin-bottom:93px;" id="gistcomments_create" action="/foxp2projects/symfony/web/app_dev.php/fr/backoffice/gistcomments/create" method="post" >
<div id="form"><input type="hidden" id="form_IdGist0" name="form[IdGist0]" readonly="readonly" value="123" />
<div>
<label for="form_FilenameGist0" class="required"><strong>Nom du fichier</strong></label>
<div class="input-prepend">
<span class="add-on"><i class="icon-pencil-2"></i></span>
<input class="input-xxlarge" type="text" id="form_FilenameGist0" name="form[FilenameGist0]" readonly="readonly" required="required" value="file1" />
</div>
</div>
<div>
<label for="form_Comments0" class="required"><strong>commentaires</strong></label>
<textarea id="form_Comments0" name="form[Comments0]" required="required"></textarea>
<script type="text/javascript">
var CKEDITOR_BASEPATH = 'http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/';
</script><script type="text/javascript" src="http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/ckeditor.js"></script><script type="text/javascript">
if (CKEDITOR.instances['form_Comments0']) {
delete CKEDITOR.instances['form_Comments0'];
}
CKEDITOR.replace('form_Comments0', {"toolbar":[{"name":"basicstyles","items":["Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat"]},{"name":"paragraph","items":["NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl"]},{"name":"styles","items":["Styles","Format","Font","FontSize"]}]});
</script>
</div>
<input type="hidden" id="form_IdGist1" name="form[IdGist1]" readonly="readonly" value="123" />
<div>
<label for="form_FilenameGist1" class="required"><strong>Nom du fichier</strong></label>
<div class="input-prepend">
<span class="add-on"><i class="icon-pencil-2"></i></span>
<input class="input-xxlarge" type="text" id="form_FilenameGist1" name="form[FilenameGist1]" readonly="readonly" required="required" value="file2" />
</div>
</div>
<div>
<label for="form_Comments1" class="required"><strong>commentaires</strong></label>
<textarea id="form_Comments1" name="form[Comments1]" required="required"></textarea>
<script type="text/javascript">
var CKEDITOR_BASEPATH = 'http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/';
</script>
<script type="text/javascript" src="http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/ckeditor.js"></script>
<script type="text/javascript">
if (CKEDITOR.instances['form_Comments1']) {
delete CKEDITOR.instances['form_Comments1'];
}
CKEDITOR.replace('form_Comments1', {"toolbar":[{"name":"basicstyles","items":["Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat"]},{"name":"paragraph","items":["NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl"]},{"name":"styles","items":["Styles","Format","Font","FontSize"]}]});
</script>
</div>
<input type="hidden" id="form_IdGist2" name="form[IdGist2]" readonly="readonly" value="123" />
<div>
<label for="form_FilenameGist2" class="required"><strong>Nom du fichier</strong></label>
<div class="input-prepend">
<span class="add-on"><i class="icon-pencil-2"></i></span>
<input class="input-xxlarge" type="text" id="form_FilenameGist2" name="form[FilenameGist2]" readonly="readonly" required="required" value="file3" /></div>
</div>
<div>
<label for="form_Comments2" class="required"><strong>commentaires</strong></label>
<textarea id="form_Comments2" name="form[Comments2]" required="required"></textarea>
<script type="text/javascript">
var CKEDITOR_BASEPATH = 'http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/';
</script>
<script type="text/javascript" src="http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/ckeditor.js">
</script>
<script type="text/javascript">
if (CKEDITOR.instances['form_Comments2']) {
delete CKEDITOR.instances['form_Comments2'];
}
CKEDITOR.replace('form_Comments2', {"toolbar": [{"name": "basicstyles", "items": ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]}, {"name": "paragraph", "items": ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "Blockquote", "CreateDiv", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "BidiLtr", "BidiRtl"]}, {"name": "styles", "items": ["Styles", "Format", "Font", "FontSize"]}]});
</script>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="570a7b14b0a87befe923c6ab7b561559247f38f8" />
</div>
</form>
<script>
$('#gistcomments_create').click(function() {
$('#mon_formulaire').submit();
});
</script>


de la à dire que la présence de ces boutons submit dans les toolbar ckeditor mettent le bordel lors de la validation, j'ai un doute car dans l'autre formulaire j'ai une instance de ckeditor (avec toolbar réduite) et une avec une toolbar complète.
donc si on suit la logique du bug, cela ne devrait pas planté.
je rappelle que dans les autres formulaire avec une simple instance de ckeditor (et toolbar complète, la validation via l'objet jquery ne pose aucun problème)

le commentaire N°8 l'explicite bien

par contre c'est vrai que de faire des test sur des versions différentes de ckeditor est incohérent.

nota bene - bug d'ipb : la balise HTML fait perdre l'indentation du code

référence externe : tagué comme bug dans le projet
Go to the top of the page
 
Gnidhal
posté 12 Oct 2013, 10:43
Message #7


5eme dan OSC
Icône de groupe

Groupe : Administrateur
Messages : 9221
Inscrit : 4-March 03
Lieu : Pau
Membre no 927



Citation (FoxP2 @ 12 Oct 2013, 09:42) *
par contre c'est vrai que de faire des test sur des versions différentes de ckeditor est incohérent.

Certes, malgré cette incohérence (ma 4.1.2 va très bien merci) cela t'a peut-être donné un fix provisoire.
Perso je trouve ce bouton save superflu dans la toolbar comme utilisé dans nos scripts puisqu'on met un bouton de validation en bas de page.

Citation (FoxP2 @ 12 Oct 2013, 09:42) *
nota bene - bug d'ipb : la balise HTML fait perdre l'indentation du code
Waip bah faisons avec wink.gif
Delaballe a proposé récemment la mise à jour de notre version IPB. J'ai décliné en raison du spam.
Notre antispam bricolé maison fonctionne plutôt pas mal (une cinquantaine de spammeurs bloqués chaque jour) et je crains qu'une nouvelle version soit trop vulnérable car "publique".
Et 1500 spams par mois, c'est ingérable!


--------------------
Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues :
Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums.
Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin.

----------------------------- Quelques sites de référence ---------------------------
PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js
Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper
Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien)
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 29th March 2024 - 12:38
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)