Initialisation script Javascript

**Zombee** · 26/08/2013, 14h44

Bonjour tout le monde !

Je viens � vous car je suis bloqu� lors de l'initialisation de mon script Javascript. Je m'explique :

Je d�veloppe actuellement une application qui n�cessite un calendrier. J'ai donc prit DHTMLX-Scheduler qui est libre.

Or pour initialiser le calendrier je dois utiliser la fonction "onload" dans le body et comme mon application est d�velopp� en MVC je n'ai pas acc�s directement au body. Il est g�n�r� automatiquement et je ne peux donc pas charger ma fonction init() qui me permet d'initialiser le calendrier.

J'ai essay� diff�rentes possibilit�s avec :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
<script>
  function init()
  {
   //Mon code
  }
  window.onload=init;
</script>

et cela n'initialise pas mon calendrier, j'ai tout essay� je pense je ne trouve pas de solution, un peu d'aide serait g�nial

!!

Merci d'avance !

**Kaamo** · 26/08/2013, 15h11

�a m'a l'air tout bon, du moins pour ce qui est expliqu�.
Des pistes :
- le script DHTMLX-Scheduler est il bien inclus avant ?
- window.onload ne serait-il pas red�fini par la suite ?

Consulte le code source de ta page pour en �tre s�r. Constate les messages d'erreur dans la console du navigateur

**beekeep** · 26/08/2013, 15h23

Bonjour,

pour info il vaut mieux utiliser window.addEventListener('load', ..., false); que window.onload = ...;

**Zombee** · 26/08/2013, 15h24

Bonjour !

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
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
<html>
<head>
        ...	
<style type="text/css">
html, body{
	margin:0px;
	padding:0px;
	height:100%;
	overflow:hidden;
}
</style>
 
</head>
<body>
     ...
   <script src="/test/js/dhtmlxscheduler.js" type="text/javascript"></script>
   <script src="/test/js/connector.js" type="text/javascript"></script>
   <link rel="stylesheet" href="/test/style/dhtmlxscheduler.css" type="text/css">
 
 
	<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>	
		<script type="text/javascript">window.onload=function(){
			//Config
			scheduler.config.xml_date="%Y-%m-%d %H:%i";
			scheduler.config.first_hour=8;
			scheduler.config.last_hour=20;
			scheduler.config.start_on_monday=true;
 
 
			//Création des paramètres pour l'enregistrement des données 
			scheduler.locale.labels.section_site = "Site";
			scheduler.locale.labels.section_technicien= "Technicien";
			scheduler.config.lightbox.sections=[	
				{name:"site", height:21, type:"select", map_to:"rec_type", options:[
					                                                                         {key:"", label:"Site 1"},
					                                                                         {key:"day", label:"Site 2"},
					                                                                         {key:"week", label:"Site 3"},
					                                                                         {key:"month", label:"Site 4"}
					                                                                 ]},
				{name:"time", height:72, type:"time", map_to:"auto"},
				{name:"technicien", height:21, type:"select", map_to:"rec_type", options:[
				                                                                         {key:"", label:"Technicien 1"},
				                                                                         {key:"day", label:"Technicien 2"},
				                                                                         {key:"week", label:"Technicien 3"},
				                                                                         {key:"month", label:"Technicien 4"}
				                                                                 ]}	]
 
			//Affichage du nom de l'intervention sur le calendrier
			scheduler.locale.labels.section_location="Location";
			scheduler.config.details_on_create=true;
			scheduler.config.details_on_dblclick=false;
 
 
			//Initialisation du calendrier 
			scheduler.init('scheduler_here',new Date(),"week");
			scheduler.setLoadMode("month");
 
			//Affichage
			var dp = new dataProcessor();
			dp.init(scheduler);
		}</script>	
</div>
</body>
</html>

Voici le code source de ma page. On voit bien que le Javascript DHTMLXscheduler.js est bien charg� et le window.onload n'a pas l'air d'�tre red�fini ^^ !
Je regarde bien mais je ne pense pas ! Il n'y a rien du tout qui appara�t lors du chargement de la page. Les DIV sont cr��s ( On peut les voir en surbrillance gr�ce � firebug avec l'outil "�l�ment" mais ils ne sont pas visibles ).

Merci d'avance chef !

**beekeep** · 26/08/2013, 15h31

L'insertion des scripts et des feuilles de style se fait dans le <head>!

**Kaamo** · 26/08/2013, 15h40

En effet, si tu souhaites ajouter plusieurs traitements (comprendre function) lors de l'�v�nement load, il est pr�f�rable de passer par la proposition de @beekeep.

Mais il faut alors faire attention. addEventListener ne suffit pas pour des raisons de comptabilit� entre navigateur :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
var bindEvent = function( element, type, eventHandler ) {
  if ( element.addEventListener ) {
    element.addEventListener( type, eventHandler, false );
  } else if ( element.attachEvent ) {
    element.attachEvent( "on" + type, eventHandler );    
  }
};
 
bindEvent(window, 'load', function () {
  alert('onload event !');
});

A toi de voir si �a en vaut la peine.

ps : Que dit la console du navigateur ? C'est l� que se trouvera la clef

**Bovino** · 26/08/2013, 16h40

Autant utiliser dhtmlxEvent...
Quitte � int�grer un framework, autant profiter de ses gestionnaires d'�v�nements suppos�s cross-browser plut�t que de dupliquer du code...

**Enjoydnb** · 27/08/2013, 08h30

Bonjour et merci pour toutes ces r�ponses.

Je suis en coop�ration sur ce projet avec Zombee !

J'ai d�j� essay� le :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

dhtmlxEvent()

Et celui ne ne fonctionne tout simplement pas ! Lorsque je charge la page concern� qui devrait afficher un calendrier un page html vide appara�t mais le code source est bien le bon !!

Je vais essay� avec bindEvent et addEventListener et je reviens vers vous

!!

Merci !

Ps : C'est si grave que �a que l'insertion de script javascript se fait dans le BODY ?

**Kaamo** · 27/08/2013, 10h48

Vous avez d� mal essayer alors. Si on fouille dans le code de la lib, la fonction dhtmlxEvent est exactement la m�me que j'ai post� ci - dessus, je cite :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function dhtmlxEvent(el, event, handler){
	if (el.addEventListener)
		el.addEventListener(event, handler, false);
 
	else if (el.attachEvent)
		el.attachEvent("on"+event, handler);
}

Il suffit donc de l'utiliser ainsi :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
dhtmlxEvent(window, 'load', function () {
  alert('onload event !');
});

Si vous embarquez toute la lib dhtmlx, alors oui, autant utiliser celle-ci que de mettre un autre code similaire

C'est si grave que �a que l'insertion de script javascript se fait dans le BODY ?

Techniquement, tu peux placer les scripts n'importe o� dans la page. Cependant, une bonne pratique consiste � les placer dans les balises <head>. Si cette r�gle est bien suivie, alors :
- Les prochains d�veloppeurs sauront o� aller chercher les scripts sans se demander s'il y en a ailleurs
- Les scripts sont bien charg�s et ex�cut�s avant que le document soit affich�

Par contre, les points n�gatifs sont nombreux en suivants cette m�thode :
- Le chargement d'un script bloque litt�ralement le chargement d'autres ressources en parall�le
- Tant que le script n'est pas charg�/ex�cut�, cela bloque l'interface, l'utilisateur doit attendre ..
- Parfois, le script a besoin d'acc�der � certains �l�ments de la page. Or, il se peut qu'ils ne soient pas encore cr��s, du coup le script peut planter. Cela oblige donc le d�veloppeur d'attendre que le document soit pr�t (en utilisant les bonnes vieilles techniques onload, DOMready, etc

Du coup, une autre bonne (meilleure) pratique est de placer les scripts � la fin du <body>, juste avant la balise fermante </body> donc.

Par contre, encore une fois cela vient avec ses inconv�nients. Il faut en avoir conscience :
- cela peut porter � confusion d'avoir des scripts � la fin du document. Les nouveaux d�v. sur le projet doivent en avoir conscience (c'�tait vrai il y a quelques temps, mais cela est une technique de plus en plus r�pandue)
- le HTML est donc potentiellement affich� � l'utilisateur avant que les scripts ne soient compl�tement charg�s/ex�cut�s. (attention pour les contr�les de formulaire, il faut en avoir conscience. Donc par exemple mettre les boutons en "disabled" par d�faut, et les activer en fin de script)

Mieux vaut utiliser la deuxi�me technique. Le plus important, c'est que les scripts soient inclus dans le bon ordre, quand les �l�ments impliqu�s sont accessibles et pr�ts � �tre manipul�s.

Sources :
- W3C
- Best Practices (Yahoo!)

**Enjoydnb** · 27/08/2013, 17h54

Bonjour Kaamo !!

J'avais d�j� essay� toutes les possibilit�s et dhtmlEvent ne fonctionne toujours pas !
Vous allez crier que ce n'est pas normal.. Cela fonctionne lorsque j'essaye de g�n�rer le calendrier dans un .html ! De toutes les mani�res �nonc� sur ce topic en d�coule une application fonctionnelle. Mais lorsque je retourne sous Eclipse sur mon Dynamic Web Project ( java ) avec le m�me code, le calendrier n'est plus g�n�r�/initialis�.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
dhtmlxEvent(window, 'load', function () {
	//Config
	scheduler.config.xml_date="%Y-%m-%d %H:%i";
	scheduler.config.first_hour=8;
	scheduler.config.last_hour=20;
	scheduler.config.start_on_monday=true;
(..)
	//Initialisation du calendrier 
	scheduler.init('scheduler_here',new Date(),"week");
	scheduler.setLoadMode("month");
	//Affichage
	var dp = new dataProcessor();
	dp.init(scheduler);
}

Cela fait une semaine que je trifouille la documentation et je ne comprends pas pourquoi dans un .html cela marche niquel et pas dans mes .jsp !

**Kaamo** · 27/08/2013, 18h30

Au final, c'est une page html qui est g�n�r�e ! Donc ce qui est affich�e lors de l'affichage de la source via le navigateur est le r�sultat de la construction par la jsp !

Il faut analyser la page g�n�r�e, gr�ce � la console par exemple, afin de voir ce qui ne va pas.

Initialisation script Javascript

JavaScript

Discussions similaires

Partager

Partager