Passer un bout de code html en paramètre d'une fonction javascript

Version imprimable

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:

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

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

28/07/2011, 14h55
Bovino

Citation:

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

Citation:

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).
28/07/2011, 15h02
Invité
salut,

oui ya plus judicieux.
tu output ton div genre

Code:

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

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

1 2 3 4 function ajouterEtape(href){ document.getElementById(href.split('#')[1]).style.display=''; }
edit : au moins 7minutes pour écrire un message :aie:
28/07/2011, 15h14
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:

$div_etape=rawurlencode($div_etape);

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

Code:

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

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

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

Code:

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:

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

28/07/2011, 15h19
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?
28/07/2011, 15h20
yoshimitsu

Eric2a Je vais tester ton astuce et voir ce que ça donne.
28/07/2011, 15h26
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 :mrgreen:
28/07/2011, 15h27
yoshimitsu

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

Voila l'erreur que me renvoie firebug :?
28/07/2011, 15h32
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.
28/07/2011, 15h54
Eric2a
Citation:

Envoyé par yoshimitsu

unterminated string literal

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

Code:

$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
28/07/2011, 16h51
yoshimitsu

En enlevant \n et \r ça marche. Après je n'arrive pas à récupérer le lastchild de div_etape avec la fonction spécifiée précédemment :s

voila pour passer le code html il faut faire ça:

Code:

1
2
3
4
 
$div_etape = preg_replace("/\r?\n/", "\\n", addslashes($div_etape));
$div_etape = rawurlencode($div_etape);
<a href = "javascript:ajouterEtape('div_etapes', unescape('<?php echo $div_etape ?>'));" > Ajouter une étape </a>

Après quand je crée le div qui contient le code en question, j'ai mon menu qui est fait en javascript qui ne marche pas :( alors que qu'avec firebug le html c'est bien affiché sans problème. Est-ce qu'il y a un lien entre le fait de rajouter du html dynamiquement et ll'activation de mon menu?

voila le code du menu:

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
 
var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();
 
function creerMenu(num){
	var menu_type_et = new menu.dd("menu_type_et_"+num);
	menu_type_et.init("menu_type_etape_"+num,"menuhover");
	return	menu_type_et;
}

et dans le html ça donne ça

Code:

1
2
3
4
 
<script type="text/javascript">
	var menu_type_et_<?php echo $this->pos_etape; ?> = creerMenu(<?php echo $this->pos_etape; ?>);						
</script>

et un exemple de menu:

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
 
						<ul class="menu" id="menu_etat_1">
							<li>
								<a href="#" class="menulink" onclick= "return false">Etat</a>
								<ul>																							
									<li>						
										<a href="javascript:remplirChamp('inputetat1','à planifier');">à planifier</a>
 
									</li>								
									<li>						
										<a href="javascript:remplirChamp('inputetat1','à venir');">à venir</a>
									</li>								
									<li>						
										<a href="javascript:remplirChamp('inputetat1','en attente');">en attente</a>
									</li>								
									<li>						
										<a href="javascript:remplirChamp('inputetat1','en cours');">en cours</a>
									</li>								
									<li>						
										<a href="javascript:remplirChamp('inputetat1','pas d\'état défini');">pas d'état défini</a>
 
									</li>								
									<li>						
										<a href="javascript:remplirChamp('inputetat1','terminé');">terminé</a>
									</li>								
								</ul>
							</li>
						</ul>

Pouvez-vous m'aidez svp ?
(je vais quand même rester sur de l'affichage dynamique parce que en affichant tous les div en caché, la page devient trop lourde et lente au chargement)

29/07/2011, 14h37
yoshimitsu

en fait, à partir du deuxième ul du menu, tout est grisé sur fire bug :s quelqu'un a déjà eu un problème pareil ?

J'ai trouvé la solution. Une fois le code html inséré dynamiquement. Il faut forcer le déclenchement des fonctions javascripts voici le code :

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
 
function ajouterEtape(nom_div_etapes,id_pole, id_etape, inputNbEtapes){
 
	function request(callback) {
		var xhr = getXMLHttpRequest();
 
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				callback(unescape(xhr.responseText));
			}
		};
 
		xhr.open("GET", "recuperer_html_etape.php?id_etape="+id_etape+"&id_pole="+id_pole, false);
		xhr.send(null);
	}
 
	function creerDiv(contenu) {
		var div_etape = document.getElementById(nom_div_etapes);
		var newdiv = document.createElement('div');
		newdiv.setAttribute("id","etape_num_" + id_etape);
		newdiv.setAttribute("class","sub_etape");
		newdiv.innerHTML = contenu;
		/*On évalue le javascript contenu dans les dom*/
		var scripts = newdiv.getElementsByTagName('script');
		div_etape.appendChild(newdiv);
		for(var i=0; i < scripts.length;i++)
		{
			/*Sous IE il faut faire un execScript pour que les fonctions soient définie en globale*/
			if (window.execScript)
			{
				/*On replace les éventuels com' html car IE n'aime pas ça*/
				window.execScript(scripts[i].text.replace('<!--',''));
			}
			/*Sous les autres navigateurs on fait un window.eval*/
			else
			{
				window.eval(scripts[i].text);
			}
		}
		document.getElementById('href_ajouter_etape').href = "javascript:ajouterEtape('" + nom_div_etapes+"'," + id_pole +", "+(id_etape+1)+",'"+inputNbEtapes+"');";
		var nbActuel = parseInt(document.getElementById(inputNbEtapes).value);
		document.getElementById(inputNbEtapes).value = nbActuel + 1;
	}
 
	request(creerDiv);