Initialisation script Javascript

Version imprimable

26/08/2013, 14h44
Zombee

Initialisation script Javascript
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:

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 :D !!

Merci d'avance !
26/08/2013, 15h11
Kaamo

:salut:
ç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
26/08/2013, 15h23
beekeep

Bonjour,

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

Bonjour !

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

26/08/2013, 15h31
beekeep

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

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:

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

26/08/2013, 16h40
Bovino

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...
27/08/2013, 08h30
Enjoydnb

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:

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 :D !!

Merci !

Ps : C'est si grave que ça que l'insertion de script javascript se fait dans le BODY ?
27/08/2013, 10h48
Kaamo
:salut:
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:

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:

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

Citation:

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

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:

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 !

27/08/2013, 18h30
Kaamo

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.