Discussion :

[yoshimitsu]

Bonjour,

J'ai une classe Etape qui me génère le div qui affiche l'étape.
Ensuite je veux dans un fichier html ajouter un lien qui active une fonction javascript ajouter étape qui rajoute dans le code html un div avec une nouvelle étape. Je dois donc passer en paramètre le string $div_etape récupéré de ma fonction getCode().

Code :

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

 <a href = "javascript:ajouterEtape('etapes', '<?php echo $div_etape ?>');" > Ajouter une étape </a>

le problème est que quand il rencontre une " ou une ' il considère que la chaine est finie. Je les ai donc converti et j'ai supprimé aussi les \n, \t et \r.

Code :

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

1
2
3
4
5
6
 
		$div_etape = str_replace("\t",'',$div_etape);
		$div_etape = str_replace(CHR(13),'',$div_etape);
		$div_etape = str_replace(CHR(10),'',$div_etape);
		$div_etape = str_replace('"','"',$div_etape);
		$div_etape = str_replace("'","'",$div_etape);

malgrès tout ça j'ai une erreur affichée sur firebug:

missing ) after argument list
ajouterEtape('etapes', '<div class="su...e la saisie </a> </div></div></div>');

J'ai testé le addslashes et le htmlentities sans succès.

J'aimerai donc savoir si il y a un moyen de résoudre ce problème. Sinon, est-ce qu'il y a une façon plus judicieuse d'afficher dynamiquement le code html des étapes ? merci d'avance

[Bovino]

J'aimerai donc savoir si il y a un moyen de résoudre ce problème.

Oui, probablement, mais tant que tu ne donneras que des miettes de code et des miettes d'explications, tu n'obtiendras que des miettes de réponse

est-ce qu'il y a une façon plus judicieuse d'afficher dynamiquement le code html des étapes ?

Certainement, en utilisant les méthodes du DOM, notamment createElement(), createTextNode(), append() (et bien d'autres).

[Invité]

salut,

oui ya plus judicieux.
tu output ton div genre

Code :

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

<div id="etapeDuCol" class="hidden">blabla</div>

Dans ton css, tu mets un ptit .hidden{display:none;}, pour cacher tes étapes par défaut.

Et dans ton lien, tu fais pointer le href vers ton div caché :

Code :

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

 <a href = "#etapeDuCol" onclick="ajouterEtape(this.href);" > Ajouter une étape </a>

Quand on clique dessus, tu récupère l'id du div à afficher, et tu l'affiches

Code :

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

1
2
3
4
 
function ajouterEtape(href){
  document.getElementById(href.split('#')[1]).style.display='';
}

edit : au moins 7minutes pour écrire un message

[Eric2a]

Salut,

Pour ne pas obtenir d'erreurs lors de l'interpretation du code JS à cause de données placées dynamiquement, il est bon d'encoder ces dernières avec la fonction PHP rawurlencode()...

Code php :

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

$div_etape=rawurlencode($div_etape);

Et de les décoder ensuite à l'aide de la fonction JS unescape().

Code js :

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

ajouterEtape('etapes', unescape('<?php echo $div_etape ?>'));

Sinon, la technique de galerien69 est très propre en effet.

[yoshimitsu]

Voila le code Bovino je m'excuse.
donc le div dois être ajouté à un div d'id 'div_etapes'

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
 
			<div>
<?php 
		$et2 = new Etape(2, $this->id);
		ob_start();
		$et2->getFormulaire();
		$div_etape = ob_get_clean();
		//$div_etape = str_replace("\r\n",'',$div_etape);
		$div_etape = str_replace("\t",'',$div_etape);
		$div_etape = str_replace(CHR(13),'',$div_etape);
		$div_etape = str_replace(CHR(10),'',$div_etape);
		$div_etape = str_replace('"','&quot;',$div_etape);
		//$div_etape = '\"'.$div_etape.'\"';
		$div_etape = str_replace("'","'",$div_etape);
		//$div_etape = htmlentities($div_etape);
 
?>
				<a href = "javascript:ajouterEtape('etapes', '<?php echo $div_etape ?>');" > Ajouter une étape </a>
			</div>

le javascript

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
 
//create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
	//target is what you want it to go after. Look for this elements parent.
	var parent = targetElement.parentNode;
 
	//if the parents lastchild is the targetElement...
	if(parent.lastchild == targetElement) {
		//add the newElement after the target element.
		parent.appendChild(newElement);
	} else {
		// else the target has siblings, insert the new element between the target and it's next sibling.
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}
 
function ajouterEtape(div_etapes,contenu){
	var dern_etape = document.getElementById(div_etapes).lastchild;
	var id_dern_etape = dern_etape.id;
	var num_dern_etape = charAt(id_dern_etape.lenght -1);
	var newdiv = document.createElement('div');
	newdiv.setAttribute("id","etape_num_"+num_dern_etape);
	newdiv.setAttribute("class","sub_etape");
	newdiv.innerHTML += contenu;
	insertAfter(newdiv,targetElement);
}

[yoshimitsu]

J'aurai aussi tendance à faire comme tu dis galerien69 mais le problème c'est que avec mon code d'avant la page prenait trop de temps pour ce charger c'est pour cela que j'ai pensé à les créer dynamiquement. Sinon le fait de passer du html comme ça dans une fonction javascript: est-ce que c'est souvent fait ou il vaudrait mieux faire autrement?

[yoshimitsu]

Eric2a Je vais tester ton astuce et voir ce que ça donne.

[Invité]

ben c'est normalement méga crado de faire comme tu fais...

Normalement, tu fais du js non intrusif, cad tu es pas censé avoir de onclick="machin" dans tes balises.
Le js est dans un fichier à part.

Si tu veux afficher un truc, soit tu le planques dans le dom et tu l'affiches, ce qui peut effectivement prendre du temps si ya plein de html.
Soit tu fais une requête ajax pour récupérer le contenu que si c'est nécessaire.

Cela dit, ici, que tu output ton html dans tes balises ou ailleurs, ca prendra le même temps

[yoshimitsu]

unterminated string literal ajouterEtape('etapes', unescape('

Voila l'erreur que me renvoie firebug

[yoshimitsu]

Sinon avec AJAX comment pourrai-je faire ? Et surtout est-ce que ce sera plus rapide que de tout mettre dans le html et de les cacher. J'en ai jamais fait. Je vous remercie d'avance.

[Eric2a]

unterminated string literal

En supprimant les sauts de ligne et tabulations avant appel à la fonction rawurlencode() ?

Code php :

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

$div_etape=str_replace(array("\r","\n","\t"),'',$div_etape);

Ceci dit, je reste convaincu que la technique de galerien69 est de loin la meilleure.

1. Javascript non intrusif
2. Pas de delai d'attente supplémentaire au chargement
3. Le contenu placé "en dur" dans la page HTML est accessible aux lecteurs d'écran et aux moteurs de recherche