Formulaire HTML de taille variable

**Uzuke** · 12/09/2013, 17h25

Bonjour,

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

au final, j'ai ce code-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Bovino** · 12/09/2013, 17h32

sans aucune raison apparente

Euh... si quand même !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Qu'est-ce que la notion de Ready ?

**Uzuke** · 12/09/2013, 17h35

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.

**NoSmoking** · 12/09/2013, 19h36

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...

Qu'est-ce que la notion de Ready ?

**Uzuke** · 12/09/2013, 19h39

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...

**NoSmoking** · 12/09/2013, 19h52

ç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

Introduction, rien de bien sorcier...

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.

**Uzuke** · 12/09/2013, 20h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et comme ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**NoSmoking** · 12/09/2013, 20h11

Vu dans la faq

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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.

**Uzuke** · 12/09/2013, 20h24

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.

**Uzuke** · 13/09/2013, 17h32

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?

**NoSmoking** · 13/09/2013, 18h37

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.

**Uzuke** · 13/09/2013, 19h24

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :/

**NoSmoking** · 14/09/2013, 09h46

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

**Uzuke** · 14/09/2013, 13h45

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 />");
	});
});

**NoSmoking** · 15/09/2013, 09h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
});

**Uzuke** · 15/09/2013, 13h08

Donc adapté pour mon besoin,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 15/09/2013, 15h25

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

ID Selector (“#id”). Tu peux utiliser CKEDITOR.replace pour pallier à cela, mais gare aux IDs identiques.

Tu peux également utiliser la syntaxe suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('#add_articles').append('<textarea class="editeur"></textarea>');
$('#add_articles').find( '.editeur').ckeditor();

mais cela générera des IDs identiques.

**Uzuke** · 15/09/2013, 15h33

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 =)

**NoSmoking** · 15/09/2013, 15h38

Pas nécessairement, tu peux gérer des IDs dynamiques.

**Uzuke** · 15/09/2013, 16h04

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 =)

Formulaire HTML de taille variable

jQuery

Discussions similaires

Partager

Partager