IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut Passer un bout de code html en paramètre d'une fonction javascript
    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('"','&quot;',$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

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    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).
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Invité
    Invité(e)
    Par défaut
    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

  4. #4
    Membre émérite
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Points : 2 411
    Points
    2 411
    Par défaut
    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.

  5. #5
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    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("'","&#39;",$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);
    }

  6. #6
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    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?

  7. #7
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    Eric2a Je vais tester ton astuce et voir ce que ça donne.

  8. #8
    Invité
    Invité(e)
    Par défaut
    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

  9. #9
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    unterminated string literal ajouterEtape('etapes', unescape('

    Voila l'erreur que me renvoie firebug

  10. #10
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    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.

  11. #11
    Membre émérite
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Points : 2 411
    Points
    2 411
    Par défaut
    Citation Envoyé par yoshimitsu
    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

  12. #12
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    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

  13. #13
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    voila pour passer le code html il faut faire ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    						<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)

  14. #14
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    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 ?

  15. #15
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 15
    Points : 6
    Points
    6
    Par défaut
    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 : 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
     
    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);

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 30/09/2011, 00h40
  2. Réponses: 6
    Dernier message: 04/04/2011, 22h22
  3. Réponses: 2
    Dernier message: 22/12/2009, 16h01
  4. affichage du code html a partir d'une fonction vb.net
    Par l_achraf dans le forum VB.NET
    Réponses: 1
    Dernier message: 13/05/2009, 17h20
  5. Réponses: 3
    Dernier message: 16/05/2007, 11h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo