Appel de fonction javascript dans innerHtml

Version imprimable

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;

dans mon 1er code cal est une variable locale de ScriptJS et donc cal n'existe pas dans la fonction MonCodeJS. J'ai donc déclaré VarCal, un tableau comme une variable globale :

Dans l'exemple ci-dessous, j'ai créé (à ma sauce :wink: ) également calendar1 en m'inspirant légèrement de ton code (j'ai juste enlévé les paramètres).

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
 
var VarCal=new Array();
 
function calendar1(){
this.year_scroll=false;
this.time_comp=false;
this.year_comp=false;
this.popup=new Function("n","alert('Coucou '+n);");
}
 
function insert(i)
{
 ScriptJS(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;
 
}
 
function ScriptJS(i)
{
 var inst="";
 
 inst  = "var cal"+i+" = new calendar1();";
 inst += "cal"+i+".year_scroll = false;";
 inst += "cal"+i+".time_comp = false;";
 inst += "cal"+i+".year_comp = true;";
 inst += "return cal"+i+";";
 
 var Fct=new Function("",inst);
 VarCal[i] = Fct();
 
}
 
function MonCodeJS(numCal)
{
 var inst="";
 VarCal[numCal].popup(numCal);
}

et le code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title></title>
 
<script type="text/javascript" src="aaa.js">
</script>
 
</head>
 
<body onload="insert(0);insert(1);">
 
<div id="outputZone0">&nbsp;</div>
<div id="outputZone1">&nbsp;</div>
 
 
</body>
 
</html>

cela fonctionne sous IE et FF.

13/03/2006, 14h47
Empty_body

Matthieu2000, il persiste une erreur mais ça doit plus être trop loin... l'erreur est "error calling the calendar : no target control specified"...

Salut et merci à tous, je vais tester le tout...

Citation:

Dans l'exemple ci-dessous, j'ai créé (à ma sauce ) également calendar1 en m'inspirant légèrement de ton code (j'ai juste enlévé les paramètres).

Je te propose ma source pour calendar1...

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
// if two digit year input dates after this year considered 20 century.
var NUM_CENTYEAR = 30;
// is time input control required by default
var BUL_TIMECOMPONENT = false;
// is year input control required by default
var BUL_YEARCOMPONENT = false;
// are year scrolling buttons required by default
var BUL_YEARSCROLL = true;
 
var calendars = [];
var RE_NUM = /^\-?\d+$/;
 
function calendar1(obj_target) {
 
	// assigning methods
	this.gen_date = cal_gen_date1;
	this.gen_time = cal_gen_time1;
	this.gen_tsmp = cal_gen_tsmp1;
	this.prs_date = cal_prs_date1;
	this.prs_time = cal_prs_time1;
	this.prs_tsmp = cal_prs_tsmp1;
	this.popup    = cal_popup1;
 
	// validate input parameters
	if (!obj_target)
		return cal_error("Error calling the calendar: no target control specified");
	if (obj_target.value == null)
		return cal_error("Error calling the calendar: parameter specified is not valid target control");
	this.target = obj_target;
	this.time_comp = BUL_TIMECOMPONENT;
	this.year_comp = BUL_YEARCOMPONENT;	
	this.year_scroll = BUL_YEARSCROLL;
 
	// register in global collections
	this.id = calendars.length;
	calendars[this.id] = this;
}
 
function cal_popup1 (str_datetime) {
	this.dt_current = this.prs_tsmp(str_datetime ? str_datetime : this.target.value);
	if (!this.dt_current) return;
 
	var obj_calwindow = window.open(
		'calendar/calendar.htmlcalendar.html?datetime=' + this.dt_current.valueOf()+ '&id=' + this.id,
		'Calendar', 'width=200,height='+(this.time_comp ? 215 : 190)+
		',status=no,resizable=no,top=200,left=200,dependent=yes,alwaysRaised=yes'
	);
	obj_calwindow.opener = window;
	obj_calwindow.focus();
}
 
// timestamp generating function
function cal_gen_tsmp1 (dt_datetime) {
	return(this.gen_date(dt_datetime) + ' ' + this.gen_time(dt_datetime));
}
 
// date generating function
function cal_gen_date1 (dt_datetime) {
  alert(this.year_comp);
	return (
		(dt_datetime.getDate() < 10 ? '0' : '') + dt_datetime.getDate() + "-"
		+ (dt_datetime.getMonth() < 9 ? '0' : '') + (dt_datetime.getMonth() + 1) + 
		(this.year_comp ? "-" : "") 
		+ (this.year_comp ? dt_datetime.getFullYear() : "") 
	);
}
// time generating function
function cal_gen_time1 (dt_datetime) {
	return (
		(dt_datetime.getHours() < 10 ? '0' : '') + dt_datetime.getHours() + ":"
		+ (dt_datetime.getMinutes() < 10 ? '0' : '') + (dt_datetime.getMinutes()) + ":"
		+ (dt_datetime.getSeconds() < 10 ? '0' : '') + (dt_datetime.getSeconds())
	);
}
 
// timestamp parsing function
function cal_prs_tsmp1 (str_datetime) {
	// if no parameter specified return current timestamp
	if (!str_datetime)
		return (new Date());
 
	// if positive integer treat as milliseconds from epoch
	if (RE_NUM.exec(str_datetime))
		return new Date(str_datetime);
 
	// else treat as date in string format
	var arr_datetime = str_datetime.split(' ');
	return this.prs_time(arr_datetime[1], this.prs_date(arr_datetime[0]));
}
 
// date parsing function
function cal_prs_date1 (str_date) {
 
	var arr_date = str_date.split('-');
 
	if (arr_date.length != 3) return cal_error ("Invalid date format: '" + str_date + "'.\nFormat accepted is dd-mm-yyyy.");
	if (!arr_date[0]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo day of month value can be found.");
	if (!RE_NUM.exec(arr_date[0])) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed values are unsigned integers.");
	if (!arr_date[1]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo month value can be found.");
	if (!RE_NUM.exec(arr_date[1])) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed values are unsigned integers.");
	if (!arr_date[2]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo year value can be found.");
	if (!RE_NUM.exec(arr_date[2])) return cal_error ("Invalid year value: '" + arr_date[2] + "'.\nAllowed values are unsigned integers.");
 
	var dt_date = new Date();
	dt_date.setDate(1);
 
	if (arr_date[1] < 1 || arr_date[1] > 12) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed range is 01-12.");
	dt_date.setMonth(arr_date[1]-1);
 
	if (arr_date[2] < 100) arr_date[2] = Number(arr_date[2]) + (arr_date[2] < NUM_CENTYEAR ? 2000 : 1900);
	dt_date.setFullYear(arr_date[2]);
 
	var dt_numdays = new Date(arr_date[2], arr_date[1], 0);
	dt_date.setDate(arr_date[0]);
	if (dt_date.getMonth() != (arr_date[1]-1)) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed range is 01-"+dt_numdays.getDate()+".");
 
	return (dt_date)
}
 
// time parsing function
function cal_prs_time1 (str_time, dt_date) {
 
	if (!dt_date) return null;
	var arr_time = String(str_time ? str_time : '').split(':');
 
	if (!arr_time[0]) dt_date.setHours(0);
	else if (RE_NUM.exec(arr_time[0]))
		if (arr_time[0] < 24) dt_date.setHours(arr_time[0]);
		else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed range is 00-23.");
	else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed values are unsigned integers.");
 
	if (!arr_time[1]) dt_date.setMinutes(0);
	else if (RE_NUM.exec(arr_time[1]))
		if (arr_time[1] < 60) dt_date.setMinutes(arr_time[1]);
		else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed range is 00-59.");
	else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed values are unsigned integers.");
 
	if (!arr_time[2]) dt_date.setSeconds(0);
	else if (RE_NUM.exec(arr_time[2]))
		if (arr_time[2] < 60) dt_date.setSeconds(arr_time[2]);
		else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed range is 00-59.");
	else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed values are unsigned integers.");
 
	dt_date.setMilliseconds(0);
	return dt_date;
}
 
function cal_error (str_message) {
	alert (str_message);
	return null;
}

14/03/2006, 12h41
Matthieu2000

Le champ créé est

Citation:

UMPlannedDateX

Le champ pour l'appel est

Citation:

UMDateOfAccomplishmentX

.
Est ce que ce dernier existe?