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