Formulaire HTML de taille variable

Version imprimable

Bonjour,

depuis quelques jours, j'essaie de me faire aider pour un problème de Javascript.

au final, j'ai ce code-ci :

Code:

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
<?php
session_start() ;
 
require_once './includes/database_user.php';
require_once './includes/functions/functions.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="./css/style.css" rel="stylesheet" media="all" type="text/css"  />
		<script src="./javascript/ckeditor/ckeditor.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 
		<script language="javascript" type="text/javascript">
		jQuery("#add_chap").click(function(){
		    $("#add_articles p").append("<textarea name='chapitre[]'></textarea>");
		});
		</script>
 
		<title>Bifrost</title>
 
	</head>
 
	<body>
 
<?php 
                require_once './includes/menu.php';
?>
 
		<div id="contener">
 
		<!-- --------------------------------------------- -->    
 
<?php 
                        require_once './includes/header.php';
?>
 
		<!-- --------------------------------------------- --> 
	<div id="corps">
	    <div class="gris"></div>
 
	<form method="post" action="news.php?action=insert" id="add_articles">
 
        <p>                                  
            <label for="title">Titre</label> : <input type="text" name="title" id="title" />
 
            <textarea class="ckeditor" name="content" id="content"></textarea>
 
 
        </p>
        <input type="button" value="Ajouter" id="add_chap" name="add_chap" />
 
    </form>       
 
	    <div style="clear:both"></div>     
	</div>
		<!-- --------------------------------------------- --> 
 
<?php 
                        require_once './includes/footer.php';
?>
 
		</div>
	</body>
</html>

et le but est d'ajouter un champ "textearea" à chaque fois que je clique sur le bouton "Ajouter" comme ici : http://jsfiddle.net/XSdR4/

Cependant, mon bouton n'est pas cliquable et ce, sans aucune raison apparente!

Quelqu'un pourrait-il m'aider?

12/09/2013, 17h32
Bovino

Citation:

sans aucune raison apparente

Euh... si quand même ! :aie:

Code:

jQuery("#add_chap").click(...)

quand tu définis l'événement, l'élément auquel il se rattache n'existe pas, ton événement se perd donc dans le vide. ;)

:faq: :fleche: Qu'est-ce que la notion de Ready ?
12/09/2013, 17h35
Uzuke

Euh... J'ai bien lu le message une dizaine de fois, le lien aussi mais je ne vois absolument pas le rapport entre les deux et ne comprends même pas la réponse :/

Il faut prendre en compte que je n'ai jamais fait de cours sur le JS et encore moins sur JS.
12/09/2013, 19h36
NoSmoking

Bonjour,
c'est tout l'inconvénient d'environnement tel que jsfiddle, regarde bien et tu verras que ton code s’exécute sur un onload, donc acte...
:faq: :fleche: Qu'est-ce que la notion de Ready ?
12/09/2013, 19h39
Uzuke

Non, je ne comprends toujours pas.

Je le répète, je n'y connais absolument rien au Javascript et encore moins sa logique de fonctionnement, les seuls que j'ai utilisé c'était des scripts déjà prêts et là c'est pareil.

Personne ne peut simplement me le corriger ? ça fait 3 jours que je suis là-dessus et tout mon temps libre y passe...
12/09/2013, 19h52
NoSmoking

Citation:

ça fait 3 jours que je suis là-dessus et tout mon temps libre y passe...

commence simplement par lire les premiers paragraphes de la :faq: Introduction, rien de bien sorcier...

Citation:

Personne ne peut simplement me le corriger ?

il n'y a pas d'erreur dans ce code, c'est juste l'endroit ou il est placé qui doit te poser un problème.

Je viens de lire la première page de la FAQ, je ne vois toujours pas comment régler le problème...

J'ai placé mon JS dans un fichier un part

Code:

1
2
3
	jQuery("#add_chap").click(function(){
	    $("#add_articles p").append("<textarea name='chapitre[]'></textarea>");
	});

Et comme ceci :

Code:

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
<?php
session_start() ;
 
require_once './includes/database_user.php';
require_once './includes/functions/functions.php';
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="./css/style.css" rel="stylesheet" media="all" type="text/css"  />
		<script src="./javascript/ckeditor/ckeditor.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="./javascript/add_chapter.js"></script>
 
		<title>Bifrost</title>
 
	</head>
 
	<body>
 
<?php 
		require_once './includes/menu.php';
?>
 
		<div id="contener">
 
		<!-- --------------------------------------------- -->    
 
<?php 
			require_once './includes/header.php';
?>
 
		<!-- --------------------------------------------- --> 
	<div id="corps">
	    <div class="gris"></div>
 
	<form method="post" action="news.php?action=insert" id="add_articles">
 
        <p>                                  
            <label for="title">Titre</label> : <input type="text" name="title" id="title" />
 
            <textarea class="ckeditor" name="content" id="content"></textarea>
 
        	<input type="button" value="Ajouter" id="add_chap" name="add_chap" />
        </p>
 
    </form>       
 
	    <div style="clear:both"></div>     
	</div>
		<!-- --------------------------------------------- --> 
 
<?php 
			require_once './includes/footer.php';
?>
 
		</div>
	</body>
</html>

Mais pareil, impossible de cliquer sur le bouton!

12/09/2013, 20h11
NoSmoking
Vu dans la faq
Code:

1 2 3 jQuery(function($){ // ICI ton code });
Citation:

Envoyé par la FAQ

Cette fonction anonyme sera exécutée dès que la structure du DOM de la page web aura été construite. Dans 98 % des cas, c'est le bon endroit pour vos appels de codes jQuery et vos instructions événementielles.
12/09/2013, 20h24
Uzuke

Ah, ça devait se traduire comme ça?

J'attendrais de faire les cours de Javascript pour comprendre le tuto Jquery...

Bref, merci bien, ça marche ENFIN!

Il faut juste que je trouve comment tout récupérer correctement et les traiter.
13/09/2013, 17h32
Uzuke

J'en profite vu que ça va avec mais au niveau de l'insertion de la textarea, le name et la class sont marqués mais il ne prend pas en compte le "ckeditor".

C'est en rapport avec le fait que je l'insère en JS?
13/09/2013, 18h37
NoSmoking

Citation:

C'est en rapport avec le fait que je l'insère en JS?

et surtout le fait que tu n'initialises pas l'élément ajouté comme étant un ckeditor.

Code:

1
2
3
4
5
6
jQuery(function($){
	jQuery("#add_chap").click(function(){
		$("#add_articles p").append("<label for='title'>Titre</label> : <input type='text' name='title[]' /><br />");
		$("#add_articles p").append("<textarea class='ckeditor' name='chapitre[]'></textarea><br />");
	});
});

Je l'ai mis comme ça, oublié de montrer le code avant :/

14/09/2013, 09h46
NoSmoking

:fleche: http://docs.cksource.com/CKEditor_3....jQuery_Adapter

Après lecture, la seule chose que j'ai compris c'est que je devais appeler un autre fichier du dossier ckeditor...

Je suis désolé mais encore une fois, je ne connais pas le Javascript plus que du bidouillage basique de scripts déjà faits.

Mon code d'appel des scripts :

Code:

1
2
3
4
5
<script type="text/javascript" src="./javascript/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./javascript/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="./javascript/add_chapter.js"></script>

Et mon fichier add_chapter.js :

Code:

1
2
3
4
5
6
jQuery(function($){
	jQuery("#add_chap").click(function(){
		$("#add_articles p").append("<label for='title'>Titre</label> : <input type='text' name='title[]' /><br />");
		$("#add_articles p").append("<textarea class='ckeditor' name='chapitre[]'></textarea><br />");
	});
});

Parce que tu crois qu'ajouter une class='ckeditor' suffit à la transformation de ta TEXTAREA en CKEditor instance?

Lorsque ta page est chargée, que le DOM est prêt, alors CKEditor analyse les éléments du DOM et transforme les éléments qu'il y a à transformer et seulement ce qui existe.

Lors de l'ajout, via un clic sur le BUTTON, tu crées un nouvel élément, qui donc n'existait pas au moment du "parsage de CKEditor".

Pour prendre ne compte ton nouvel élément comme nouveau CKEditor il te faut le demander explicitement, et pour cela il existe la méthode .ckeditor().

Il te faut donc écrire au minimum
Code:

1 2 3 4 5 6 $('#add_chap').click(function(){ // création de l'élément $('#add_articles').append('<textarea id="editeur"></textarea>'); // création d'une CKEditor instance $('#editeur').ckeditor(); });

Donc adapté pour mon besoin,
Code:

1 2 3 4 5 6 7 jQuery(function($){ jQuery("#add_chap").click(function(){ $("#add_articles p").append("<label for='title'>Titre</label> : <input type='text' id='title[]'/><br />"); $("#add_articles p").append("<textarea id='chapitre[]'></textarea><br />"); $('#chapitre[]').ckeditor(); }); });
C'est bien cela?

Pareil, il ne le prend pas.

J'ai même tenté en rajoutant la class ckeditor au cas-où, mais pareil.

15/09/2013, 15h25
NoSmoking
J'entrevois pas mal de soucis dans ce que tu essaies de faire.

Une ID doIt UNIQUE dans la page, hors si tu continues à ajouter des TEXTAREAs avec la même ID cela va vite devenir la kata!!!

jQuery m'aime pas le [], entre autres, dans les caractères utilisés pour les ID, il faut dans ce cas les échapper :fleche: ID Selector (“#id”). Tu peux utiliser CKEDITOR.replace pour pallier à cela, mais gare aux IDs identiques.

Tu peux également utiliser la syntaxe suivante
Code:

1 2 $('#add_articles').append('<textarea class="editeur"></textarea>'); $('#add_articles').find( '.editeur').ckeditor();
mais cela générera des IDs identiques.
15/09/2013, 15h33
Uzuke

Bon, je commence vraiment à être perdu avec ce jquery!

Je vais changer de méthode et demander le nombre de chapitres avant la création de l'article.

Merci quand même =)
15/09/2013, 15h38
NoSmoking

Pas nécessairement, tu peux gérer des IDs dynamiques.
15/09/2013, 16h04
Uzuke

Sachant que je ne pige absolument rien à tes messages au niveau javascript/jquery, je préfère passer sur une méthode plus simple et, un jour, revenir sur ça, quand je saurais le faire moi-même, que je comprendrais ce qu'est ce DOM ou encore comment marche le JS tout court =)

Je te soumets quand même une possibilité d'écriture

Code:

1
2
3
4
5
6
7
8
9
10
11
$('#add_chap').click(function(){
  var obj = $('#add_articles');
  // récup du nombre d'éléments ayant la classe éditeur dans "add_articles"
  var nb = obj.find('.editeur').length;
  // création d'une ID unique
  var id = 'editeur_' +nb;
  // création de l'élément
  obj.append('<textarea class="editeur" id="' +id +'" name="chapitre[]"></textarea>');
  // création d'une CKEditor instance
  $('#' +id).ckeditor();
});

16/09/2013, 11h25
Uzuke

ça marche nickel pour l'incrémentation mais le problème principal reste le même : Pas de ckeditor :/
16/09/2013, 18h57
NoSmoking

Citation:

mais le problème principal reste le même : Pas de ckeditor

regarde l'ordre d'insertion de tes fichiers script.
16/09/2013, 22h59
Uzuke

ah ouais, fallait insérer le ckeditor APRES le jquery... Pourquoi? Oo

Cet ordre est également acceptable
Code:

1 2 3 <script src="../ckeditor.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="../adapters/jquery.js"></script>
Le fichier ../adapters/jquery.js utilise jQuery donc il faut déclarer jQuery AVANT.
Code:

1 2 3 (function (a) { // le code de ../adapters/jquery.js })(window.jQuery);