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

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

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

Initialisation script Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager