Appel de fonction javascript dans innerHtml

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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.

10/03/2006, 14h13
XristofGreek

Citation:

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=
10/03/2006, 14h24
Empty_body

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...
10/03/2006, 15h24
Empty_body

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

bonjour,

Code:

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

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

10/03/2006, 15h51
Empty_body

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

essaye ceci :

Code:

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.

10/03/2006, 16h49
XristofGreek

Citation:

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 \"
10/03/2006, 18h45
javatwister

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

Code:

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 8O
utilité?
13/03/2006, 09h37
Empty_body

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:

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:

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

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

Code:

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:

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

13/03/2006, 11h58
Empty_body

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

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

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

<div id="outputZone2">  </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() )

13/03/2006, 12h51
javatwister

eval, c'est du javascript natif pur jus! si le navigateur dispose d'un interpréteur javascript, ça marchera toujours;
13/03/2006, 12h51
Empty_body

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

Citation:

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 :oops: je suis allé un peu vite en besogne. Je le corrige et je te tiens au courant. Désolé :oops:
13/03/2006, 13h15
Matthieu2000

Citation:

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!
13/03/2006, 13h25
Empty_body

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...
13/03/2006, 13h30
Empty_body

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

Code:

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:

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;

Voir 40 message(s) de cette discussion en une page