Rafraichir une <DIV> pour un calendrier avec jquery
http://www.zonevolley.com/images/calendrier.png
Bonjour! il y a quelques temps déjà, j'avais fait un calendrier d'évènements, lequel apparait sur une page de mon site dans une section donnée mais aussi, je fais apparaitre le calendrier du mois courant sur ma page d'accueil. Si quelqu'un clique sur la fleche de gauche, ca l'envoie sur ma page afficher_calendrier.php avec l'affichage du mois passé et s'il clique sur la fleche de droite, pour le mois prochain....
Bref, j'aimerais qu'à l'aide de jquery, sur le clic d'une de ces 2 flèches, le calendrier qui est dans une <div> se rafraichisse avec le mois passé ou suivant sans rafraichir le reste del a page.
J'ai essayé plusieurs choses avec jquery mais probablement que je fais mal la chose...
Étant donné que j'ai un <form> pour ma fleche de gauche et un autre <form> pour ma fleche de droite, en debut de page, j'avais fait ceci:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mois_passe').live('submit', function() {
$.post('calendrier_accueil.php', $(this).serialize(), function (
data, textStatus) {
$('#calendrier').html(data);
});
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#mois_prochain').live('submit', function() {
$.post('calendrier_accueil.php', $(this).serialize(), function (
data, textStatus) {
$('#calendrier').html(data);
});
return false;
});
});
</script> |
...
Sur ma page d'accueil, le code pour le calendrier:
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
| <div id="calendar">
<?php
define("ADAY", (60*60*24));
$thisYear = date('Y');
$nowArray = getdate();
$month = $nowArray['mon'];
$year_now = $nowArray['year'];
$year = $nowArray['year'];
$start = mktime(12,0,0,$month,1,$year);
$firstDayArray = getdate($start);
echo"<table width=450 bgcolor=#222222 align=center border=0 cellpadding=0 cellspacing=0 class=shadow_noir>
<tr class=titres_bleu height=27>
<td align=left style='padding-left:3px'>";
if($month == "01") { $mois = "Janvier"; $mois_passe = "12"; $year = $year-1; $mois_prochain = "02"; }
elseif($month == "02") { $mois = "Février"; $mois_passe = "01"; $mois_prochain = "03"; }
elseif($month == "03") { $mois = "Mars"; $mois_passe = "02"; $mois_prochain = "04"; }
elseif($month == "04") { $mois = "Avril"; $mois_passe = "03"; $mois_prochain = "05"; }
elseif($month == "05") { $mois = "Mai"; $mois_passe = "04"; $mois_prochain = "06"; }
elseif($month == "06") { $mois = "Juin"; $mois_passe = "05"; $mois_prochain = "07"; }
elseif($month == "07") { $mois = "Juillet"; $mois_passe = "06"; $mois_prochain = "08"; }
elseif($month == "08") { $mois = "Août"; $mois_passe = "07"; $mois_prochain = "09"; }
elseif($month == "09") { $mois = "Septembre"; $mois_passe = "08"; $mois_prochain = "10"; }
elseif($month == "10") { $mois = "Octobre"; $mois_passe = "09"; $mois_prochain = "11"; }
elseif($month == "11") { $mois = "Novembre"; $mois_passe = "10"; $mois_prochain = "12"; }
elseif($month == "12") { $mois = "Décembre"; $mois_passe = "11"; $next_year = $year+1; $mois_prochain = "01"; }
echo"<form id=mois_passe name=cal method=post action=''>
<input type=hidden name=year value=$year>
<input type=hidden name=month value=$mois_passe>
<input border=0 src=../images/previous_mois.png type=image name=month value=''></td>
</form>";
echo"<td valign=middle align=center height=27 valign=top class=titres_bleu>";
echo"<font class=ombre2>$mois $year_now</font></td>
<td align=right style='padding-right:3px'>
<form id=mois_prochain name=cal method=post action=''>
<input type=hidden name=year value=$year>
<input type=hidden name=month value=$mois_prochain>
<input border=0 src=../images/next_mois.png type=image name=month value=''></td>
</form>";
if ($mois_prochain == "01") { $year == $year+1; }
echo"</td></tr>
<tr><td colspan=3>";
$days = Array("DIM", "LUN", "MAR", "MER", "JEU", "VEN", "SAM");
echo "<table border=1 bordercolor=#555555 cellpadding=0 cellspacing=0 align=center><tr>\n";
foreach ($days as $day){
echo "<td bgcolor=#222222 align=center width=61><strong><font color=#FFCC33 size=2>$day</strong></td>\n";
}
for ($count=0; $count < (6*7); $count++){
$dayArray = getdate($start);
if (($count % 7) == 0){
if ($dayArray['mon'] != $month){
break;
} else {
echo "</tr><tr bgcolor=#222222>\n";
}
}
if ($count < $firstDayArray['wday'] || $dayArray['mon'] != $month){
echo "<td bgcolor=#444444 height=50> </td>\n";
} else {
$getEvent_sql = "SELECT event_title, event_shortdesc, date_format(event_start, '%l:%i %p') as fmt_date FROM calendrier WHERE
month(event_start) = '".$month."' AND dayofmonth(event_start) = '".$dayArray['mday']."' AND year(event_start) = '".$year_now."' ORDER BY event_start";
$getEvent_res = mysql_query($getEvent_sql, $mysql) or die(mysql_error($mysql));
if (mysql_num_rows($getEvent_res) > 0){
$event_txt = "";
while($ev = @mysql_fetch_array($getEvent_res)){
$event_title = stripslashes($ev["event_title"]);
$event_shortdesc = stripslashes($ev["event_shortdesc"]);
$fmt_date = $ev["fmt_date"];
$event_txt .= "<font size='1'><a class=tooltip_user_cl2 href=#> <img class=shadow border=0 src=../images/vball.gif height=12><span>
<table height=20 align=center cellpadding=0 cellspacing=0 width=100% border=0>
<tr><td colspan=3 class=titres align=center valign=middle height=27 width=100%><font size=1 color=#ffffff><b>$event_title</b></font></td></tr>
<tr bgcolor=#000000><td class=tooltip_cal style='padding:15px;'>
<table align=center cellpadding=1 cellspacing=0 width=100% border=0>
<tr bgcolor=#000000><td colspan=2><font face=verdana size=1 color=#ffcc33>$event_shortdesc</font></td></tr>
<tr bgcolor=#000000><td align=right><font size=1>Heure: </td><td><font face=verdana size=1 color=#ffcc33><nobr>$fmt_date</nobr></font></td></tr>
</table></td></tr></table></span></a>";
}
$event_txt .= " ";
mysql_free_result($getEvent_res);
} else {
$event_txt = "";
}
$jour_actuel = date("j");
echo "<td valign=top width=25 height=50 id=".$dayArray['mday']." bgcolor=#222222 onMouseOver=\"this.bgColor='#444444'\" onMouseOut=\"this.bgColor='#222222'\">
<table border=0 cellpadding=0 cellspacing=0 width=100% height=25><tr><td height=10 valign=top>";
if ($jour_actuel == $dayArray['mday']) { echo"<b><font color=#FFCC33 size=4>"; }
else { echo"<font color=#FFFFFF size=2>"; }
echo"".$dayArray['mday']."</font></td></tr>
<tr><td valign=middle align=center>";
if ($event_txt != ""){ echo"$event_txt"; }
echo"</td></tr></table></td>";
$start += ADAY;
}
}
echo "</tr></table>
</td></tr></table>";
?>
</div> |
Merci d'avance pour votre aide! :)
PS: Pour comprendre mieux, vous pouvez y accéder ici: http://www.zonevolley.com
