Appel de fonction javascript dans innerHtml

**Empty_body** · 10/03/2006, 14h51

Salut et bon apétit pour ceux qui n'ont pa encore fini...
J'ai un léger souci avec du javascript et la fonction innerHtml... Lorsque je fais ceci dans mon code html, ça fonctionne sans problème:

Code :

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

1
2
3
4
5
6
7
8
9
10
			<td width=15%>
				<input type="text" name="UMDateOfAccomplishment" size="10" value="" id="UMDateOfAccomplishment">
				<a href="javascript:cal2.popup();"><img src="/AHEM/scripts/calendar/img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick the date"></a>			
				<script language="JavaScript">
					var cal2 = new calendar1(document.forms['commit'].elements['UMDateOfAccomplishment']);
					cal2.year_scroll = false;
					cal2.time_comp = false;
					cal2.year_comp = true;
				</script>
			</td>

Mais lorsque j'essaie de le placer dans mon innerHtml, ca me dit que call2 est indéfini (à la ligne call2.popup()), le i vaut 2...

Code :

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

1
2
3
4
5
6
var inputHtml = "";
		inputHtml = inputHtml + "<td width=15%><input type=text name=\"UMPlannedDate"+i+"\" size=10 id=\"UMPlannedDate"+i+"\">";
		inputHtml = inputHtml + "<a href=javascript:cal"+i+".popup();><img src=/AHEM/scripts/calendar/img/cal.gif width=16 height=16 border=0 alt=Click Here to Pick the date></a><br>";
		inputHtml = inputHtml + "<script language='JavaScript'>var cal"+i+" = new calendar1(document.forms['commit'].elements['UMDateOfAccomplishment"+i+"']);cal"+i+".year_scroll = false;cal"+i+".time_comp = false;cal"+i+".year_comp = true;<\/script>";
		var tempo = "outputZone"+i;
		document.getElementById(tempo).innerHTML = inputHtml;

Pour ceux qui se demanderait à quoi sert ce joyeux code, il permet de générer une ligne avec un champ date et un champ texte.

**XristofGreek** · 10/03/2006, 15h13

inputHtml = inputHtml + "<a href=javascript:cal"+i+".popup();><img src=/AHEM/scripts/calendar/img/cal.gif width=16 height=16 border=0 alt=Click Here to Pick the date></a><br>";

il te manque les guillemets après href=

**Empty_body** · 10/03/2006, 15h24

Si je mets les guillemets tout court, ça foire et si je les mets comme ceci,

Code :

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

<a href=\"javascript:cal"+i+".popup();\">

Ca ne donne rien...

**Empty_body** · 10/03/2006, 16h24

Ce qui est assez étrange, c'est que lorsque je fais un alert de inputHtml, j'ai exactement le même code que dans le code html...

**Auteur** · 10/03/2006, 16h46

bonjour,

Code :

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

<a href=javascript:cal"+i+".popup();

cal2.popup() consitue un ensemble. En intégrant i tu "casses" cet ensemble. Tu ne donc peux pas créer dynamiquement ton code.
En tout cas pas de cette manière.

voici un exemple : étudie le bien....

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function test(code)
{
 var elMsg = document.getElementById("msg");
 var instructions="";
 
//création dynamique du code :
 instruction  = "var data = DivTest."+code+";";
 instruction += "Message.innerHTML = data;";
 
 //definition de la fonction, definition de ses arguments et transmission des instructions
 var ff = new Function("Message",instruction);
 //appel de la fonction
 ff(elMsg);
 
}
 
//-->
</script>
 
</head>
 
<body>
<input type="button" value="backgroundColor" name="B1" onclick="test('style.backgroundColor')">
<input type="button" value="color" name="B2" onclick="test('style.color')">
<input type="button" value="width" name="B1" onclick="test('style.width')">
<input type="button" value="height" name="B2" onclick="test('style.height')">
<br><br><br>
 
<div id="DivTest" style=" height: 50px; width: 100px;background-color: #B3C2A1; color: #000000;">Ceci est un test</div>
<br><br>
<div id="msg">&nbsp;</div>
 
</body>
 
</html>

**Empty_body** · 10/03/2006, 16h51

J'ai aussi pensez à l'aspect "casser un ensemble", c'est pourquoi j'ai testé en notant directement cal1 dans le code au lieu de cal+i+ mais le résultat en reste le même...
Merci quand même

**Auteur** · 10/03/2006, 17h21

essaye ceci :

Code :

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

1
2
3
4
5
6
7
8
 
inputHtml  = "<input type=\"text\" name=\"UMPlannedDate"+i+"\" size=10 id=\"UMPlannedDate"+i+"\">";
inputHtml += "<a href=\"javascript:cal"+i+".popup();\"><img src=\"/AHEM/scripts/calendar/img/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Click Here to Pick the date\"></a><br>";
inputHtml += "<script language=\"JavaScript\" type=\"text/javascript\">";
inputHtml += "var cal"+i+" = new calendar1(document.forms['commit'].elements['UMDateOfAccomplishment"+i+"']);";
inputHtml += "cal"+i+".year_scroll = false;";
inputHtml += "cal"+i+".time_comp = false;";
inputHtml += "cal"+i+".year_comp = true;<\/script>";

j'ai supprimé le "<td width=15%>" car il n'a pas lieu d'être. J'ai rajouté des guillemets dans la balise <a> et ailleurs ainsi que type="text/javascript" dans la balise script.

**XristofGreek** · 10/03/2006, 17h49

Si je mets les guillemets tout court, ça foire et si je les mets comme ceci, Code:
<a href=\"javascript:cal"+i+".popup();\">
Ca ne donne rien...

et avec ' au lieu de \"

**javatwister** · 10/03/2006, 19h45

mis à part les problèmes de quotes, jamais très difficiles à résoudre, l'expression:

Code :

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

var cal"+i+" = ...

n'est pas comprise par javascript;

vois ce que tu peux faire avec la méthode eval;

par ailleurs, jamais vu de génération d'une balise script par innerHTML

utilité?

**Empty_body** · 13/03/2006, 10h37

Salut, merci pour les idées proposées, j'ai testé le tout, et rien ne change, sauf avec eval... lorsque je test ceci, le href ne m'ouvre pas de popup mais il place EVAL("javascript:cal1.popup()

" dans l'url... Quelqu'un sait me dire pourquoi...

Code :

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

inputHtml = inputHtml + "<a EVAL(href=\"javascript:cal"+i+".popup();)\"><img src=/AHEM/scripts/calendar/img/cal.gif width=16 height=16 border=0 alt=Click Here to Pick the date></a><br>";

même résultat pour ceci :

Code :

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

inputHtml = inputHtml + "<a href=\"javascript:EVAL(cal"+i+".popup());\"><img src=/AHEM/scripts/calendar/img/cal.gif width=16 height=16 border=0 alt=Click Here to Pick the date></a><br>";

**Empty_body** · 13/03/2006, 12h05

Suite à une recherche sur eval, j'en suis arrivé à ceci, mais ça ne fonctionne toujours pas...

Code :

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

1
2
3
4
5
6
7
8
9
function insert(i){
		inputHtml = inputHtml + "<td width=15%><input type=text name=\"UMPlannedDate"+i+"\" size=10 id=\"UMPlannedDate"+i+"\">";
		inputHtml = inputHtml + "<a href=\"javascript:cal"+i+".popup();\"><img src=/AHEM/scripts/calendar/img/cal.gif width=16 height=16 border=0 alt=Click Here to Pick the date></a><br>";
		inputHtml = inputHtml + "<script language=\"JavaScript\">var cal"+i+" = new calendar1(document.forms['commit'].elements['UMDateOfAccomplishment"+i+"']);cal"+i+".year_scroll = false;cal"+i+".time_comp = false;cal"+i+".year_comp = true;<\/script></td>";
		var tempo = "outputZone"+i;
		document.getElementById(tempo).innerHTML = inputHtml;
 
		execJS(document.getElementById(tempo));
	}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	function execJS(node) {
		 var st = node.getElementsByTagName('SCRIPT');
 		 var strExec;
 		 for(var i=0;i<st.length; i++) {     
      			strExec = st[i].text;
   		 try {
      			eval(strExec);
				alert(strExec);
    		} catch(e) {
      			alert(e);
    		}
  		}
	}

Quelqu'un sait-il m'aider???

**Empty_body** · 13/03/2006, 12h58

Lors de mes recherches, j'ai lu deux ou trois lignes à propos d'un truc qui s'appelle DOM, est-ce que quelqu'un connait??? Est-ce que ça pourrait être une solution??? Si oui, quelqu'un aurait une piste???

**Auteur** · 13/03/2006, 13h36

je crois qu'"eval()" ne fonctionne pas sur tout les navigateurs.

essaye ce 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
 
function insert(i)
{
var inputHTML="";
inputHTML  = "<input type=text name=\"UMPlannedDate"+i+"\" size=\"10\" id=\"UMPlannedDate"+i+"\">";
inputHTML += "<a href=\"javascript:MonCodeJS(i)\">";
inputHTML += "<img src=\"/AHEM/scripts/calendar/img/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Click Here to Pick the date\">";
inputHTML += "</a><br>";
 
var tempo = "outputZone"+i;
document.getElementById(tempo).innerHTML = inputHtml;
ScriptJS(i);
}
 
function ScriptJS(i)
{
 var inst="";
 inst  = "var cal"+i+" = new calendar1(document.forms['commit'].elements['UMDateOfAccomplishment"+i+"']);";
 ints += "cal"+i+".year_scroll = false;";
 ints += "cal"+i+".time_comp = false;";
 ints += "cal"+i+".year_comp = true;";
 
 var Fct("",inst);
 Fct();
}
 
function MonCodeJS(i)
{
 var inst="";
 inst = "cal"+i+".popup();";
 var Fct("",inst);
 Fct();
}

et dans ton code HTML déclare :

Code :

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

<div id="outputZone2">&nbsp; </div>

et appelle la fonction insert(2);
j'ai supprimé le TD car on ne peut pas insérer des lignes dans un tableau. (il faut utiliser insertRow() )

**javatwister** · 13/03/2006, 13h51

eval, c'est du javascript natif pur jus! si le navigateur dispose d'un interpréteur javascript, ça marchera toujours;

**Empty_body** · 13/03/2006, 13h51

Auteur, j'ai testé ton code mais il en ressort 2 erreurs :
un problème d'objet non défini et un ";" manquant...

**Auteur** · 13/03/2006, 14h12

Auteur, j'ai testé ton code mais il en ressort 2 erreurs :
un problème d'objet non défini et un ";" manquant...

je sais

je suis allé un peu vite en besogne. Je le corrige et je te tiens au courant. Désolé

**Matthieu2000** · 13/03/2006, 14h15

document.getElementById(tempo).innerHTML = inputHtml;

je ne pense pas que les scripts dans inputHtml soient excécutés!

-> crée des fonctions avec des paramètres et utilise des tableaux!

**Empty_body** · 13/03/2006, 14h25

Chose encore plus étrange, lorsque je replace mon formulaire dans un div dans l'html, que j'utilise outterhtml, je n'ai pas le moindre problème, ça affiche correctement le fomulaire dans un div suivant, mais je peux me brosser pour l'implémentation des i...

**Empty_body** · 13/03/2006, 14h30

Merci Auteur...
Matthieu2000, je pense pas que ce soit lié à ça car si je reprends la div avec outerhtml, que je la ré-injecte dans un autre div avec innerhtml, ce div aura toute les fonctionnalité de son parent mais malheureusement, les même noms de variables aussi...

**Matthieu2000** · 13/03/2006, 15h03

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="JavaScript"> 
cal=new Array();
 
 
function popupcal(i){
 
	cal[i] = new calendar1(document.forms['commit'].elements['UMDateOfAccomplishment'+i]); 
	cal[i].year_scroll = false; 
	cal[i].time_comp = false; 
	cal[i].year_comp = true; 
	cal[i].popup();
}
</script>

Code :

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

1
2
3
4
5
var inputHtml = ""; 
      inputHtml = inputHtml + "<td width=15%><input type=text name=\"UMPlannedDate"+i+"\" size=10 id=\"UMPlannedDate"+i+"\">"; 
      inputHtml = inputHtml + "<a href=javascript:popupcal("+i+");><img src=/AHEM/scripts/calendar/img/cal.gif width=16 height=16 border=0 alt=Click Here to Pick the date></a><br>";  
      var tempo = "outputZone"+i; 
      document.getElementById(tempo).innerHTML = inputHtml;

Appel de fonction javascript dans innerHtml

JavaScript

Vue hybride

Discussions similaires

Partager

Partager