Discussion :

[Guillean]

Bonjour à tous,

Je suis bien conscient qu'il existe plusieurs sujets sur la question mais aucun de ceux que j'ai pu trouver au cours de mes recherches ne répondait à mes questions avec les contraintes qui y sont liées.

Je suis donc actuellement en stage, étant étudiant en informatique et mon sujet de stage était "correction de bugs et complément d'applications au site existant"

Il se trouve que sur ce site, une des choses qui m'a été demandée est de faire changer l'heure de début et l'heure de fin de travail d'un employé sur le planning en fonction de l'endroit ou l'on clique sur le tableau du planning (image en PJ) qui est séparé selon les divs suivants :

Code html :

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
 
<table id="planning">
	<thead>
		<tr>
			<th class="first">Agent</th>
			<th class="last" style="width:1040px">
				<div class="info_horaire deuxheures" style="border:none">6h - 8h</div>
				<div class="info_horaire deuxheures" >8h - 10h</div>
				<div class="info_horaire deuxheures">10h - 12h</div>
				<div class="info_horaire heuredemi">12h - 13h30</div>
				<div class="info_horaire deuxheures">13h30 - 15h30</div>
				<div class="info_horaire deuxheures">15h30 - 17h30</div>
				<div class="info_horaire heuredemi">17h30 - 19h</div>
			</th>
		</tr>
	</thead>
	<tbody>
		<?php
                        echo $this->tab;
                ?>
	</tbody>
</table>

De plus, lors d'un double click n'importe ou sur la ligne d'un agent(sauf sur une tache déjà existante évidemment), cela ouvre un formulaire ( aussi en pièce jointe) dont les champs d'horaires sont déjà préremplis grace à un script que voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function initPause() {
	$("#debutTache").val("08:00");
	$("#finTache").val("17:15");
	$("#pause").attr('checked' , 'checked');
 
 
	$("[id$=Pause-label]").css('margin-left', '50px');
	$("#debutPause").val("12:00");
	$("#finPause").val("13:30");
 
	$("[id^=debutPause] , [id^=finPause]").show();
}

Ma principale difficulté étant que je souhaiterai que si je clique sur le nom de l'agent, la pause soit activée et l'agent commencerai à 8h pour finir à 17h15, que si je clique sur le div 6h-8h, l'agent commence à 6h et finit à 8h et la pause du midi est désactivée, que si je clique sur un div entre 8h et 12h la pause soit désactivée et qu'il travaille de 8h a 12h et ainsi de suite...
ps : un agent peut avoir plusieurs taches par jour.

j'ai déjà essayé de corriger ce problème en faisant comme suit, mais vous vous apercevrez très rapidement que je suis un novice dans tout domaine impliquant du javascript...

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
function initPause() {
 
	if($("#info_horaire deuxheures").value="1"){
//pour chaque div, j'attribuais une valeur comme ceci : <div class="info_horaire deuxheures" style="border:none" value="1">6h - 8h</div>
		$("#debutTache").val("6:00");
		$("#finTache").val("8:00");
		$("#pause").attr('checked' , 'unchecked');
	}else if($("#info_horaire deuxheures").value="2"){
		$("#debutTache").val("8:00");
		$("#finTache").val("12:00");
		$("#pause").attr('checked' , 'unchecked');
	}else if($("#info_horaire deuxheures").value="3"){
		$("#debutTache").val("13:30");
		$("#finTache").val("17:15");
		$("#pause").attr('checked' , 'unchecked');
	}else if($("#info_horaire heuredemi").value="4"){
		$("#debutTache").val("17:15");
		$("#finTache").val("19:00");
		$("#pause").attr('checked' , 'unchecked');
	}else{
		$("#debutTache").val("08:00");
		$("#finTache").val("17:15");
		$("#pause").attr('checked' , 'checked');
	}
 
	$("[id$=Pause-label]").css('margin-left', '50px');
	$("#debutPause").val("12:00");
	$("#finPause").val("13:30");
 
	$("#debutTache").onChange=togglePause();
	$("#finTache").onChange=togglePause();
	$("[id^=debutPause] , [id^=finPause]").show();
}
 
function togglePause(){
	if($("#finTache").val("8:00")||$("#finTache").val("12:00")||$("#debutTache").val("13:30")||$("#debutTache").val("17:15")) {
		$("#pause").attr('checked' , 'unchecked');
	}else{
		$("#pause").attr('checked' , 'checked');
	}
};

merci de votre attention

[NoSmoking]

Bonjour,

$("#info_horaire deuxheures").value

regarde du coté de .val(), profite pour regarder le reste

[Guillean]

Merci, mais comment attribuer une val au div? dans le html je veux dire

[Bovino]

.val() en jQuery correspond à l'attribut value, or une div n'a pas de value.

Si tu veux modifier le contenu, tu peux utiliser .html() ou .text(), si tu veux attacher à ta div une valeur particulière, il faut passer par .data().

[Guillean]

Ce que je veux exactement, c'est que lorsqu'on double clique sur une ligne particulière du tableau, cela créé une nouvelle tache pour l'agent associé à cette ligne (pas de problème de ce côté la) et ensuite, lorsque l'on clique sur une cellule particulière appartenant a une colonne identifiée par un div dans le <thead>, ceci modifie les horaires de début et de fin de tache préremplies dans le formulaire, activant ou désactivant la pause du midi en conséquence.

Le soucis étant donc qu'il faudrait créer une variable changeant en fonction du div sélectionné...

[Guillean]

Bonjour, grâce à notre cher Spaffy, ma fonction togglePause est enfin corrigée et je m'en suis inspiré pour la fonction initPause, cependant je me demande si le if ne retournerait pas toujours True...

Voici le code des fonctions concernées :

Code javascript :

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
function initPause() {
 
	tabhours = new Array("6h - 8h");
	tabhours2 = new Array("8h - 10h","10h - 12h");
	tabhours3 = new Array("13h30 - 15h30","15h30 - 17h30");
	tabhours4 = new Array("17h30 - 19h");
 
	if($.inArray($("#info_horaire deuxheures").text(),tabhours)>-1){
		$("#debutTache").val("6:00");
		$("#finTache").val("8:00");
		$("#pause").attr('checked' , 'unchecked');
	}else if($.inArray($("#info_horaire deuxheures").text(),tabhours2)>-1){
		$("#debutTache").val("8:00");
		$("#finTache").val("12:00");
		$("#pause").attr('checked' , 'unchecked');
	}else if($.inArray($("#info_horaire deuxheures").text(),tabhours3)>-1){
		$("#debutTache").val("13:30");
		$("#finTache").val("17:15");
		$("#pause").attr('checked' , 'unchecked');
	}else if($.inArray($("#info_horaire heuredemi").text(),tabhours4)>-1){
		$("#debutTache").val("17:15");
		$("#finTache").val("19:00");
		$("#pause").attr('checked' , 'unchecked');
	}else{
		$("#debutTache").val("08:00");
		$("#finTache").val("17:15");
		$("#pause").attr('checked' , 'checked');
	}
 
	$("[id$=Pause-label]").css('margin-left', '50px');
	$("#debutPause").val("12:00");
	$("#finPause").val("13:30");
 
	$("#debutTache").onChange=togglePause();
	$("#finTache").onChange=togglePause();
	$("[id^=debutPause] , [id^=finPause]").show();
}
 
function togglePause(){
        tabhours = new Array("08:00","12:00");
        tabhours2 = new Array("13:30","17:15");
	if(($.inArray($("#finTache").val(),tabhours)>-1)||($.inArray($("#debutTache").val(),tabhours2)>-1)) {
		$("#pause").attr('checked' , 'unchecked');
	}else{
		$("#pause").attr('checked' , 'checked');
	}
};
 
$("#pause").change(changePause);
 
function changePause() {
	if($("#pause").attr('checked') == 'checked') {
		//On affiche
		$("[id^=debutPause] , [id^=finPause]").fadeIn('slow');
	}else{
		//On cache
		$("[id^=debutPause] , [id^=finPause]").fadeOut('slow');
	}
}