Rafraichir une <DIV> pour un calendrier avec jquery

**DoumCSS** · 18/07/2013, 12h34

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 :

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
<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 php :

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
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>&nbsp;</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=#>&nbsp;<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:&nbsp;</td><td><font face=verdana size=1 color=#ffcc33><nobr>$fmt_date</nobr></font></td></tr>
    </table></td></tr></table></span></a>"; 
 
}
$event_txt .= "&nbsp;";
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

**v1cent** · 18/07/2013, 13h42

pourquoi ne remplace tu pas tes formulaires par des liens, ce serait plus simple (il ne te resterait plus qu'à utiliser onclick et la fonction ajax)

sinon ton problème viens peut être de live qui est déprécié et pour lequel je ne suis pas certain que return false annule la validation du formulaire... Ou d'autre chose je ne sais pas

Mais je pense qu'en simplifiant, tu as des chances de te faciliter la vie en enlevant des sources de bug potentiel

PS : tu as des erreurs qui tournent en boucle et m'empêchent de debugguer le javascript, déjà si tu les corrigeais ce serait plus facile de t'aider

**DoumCSS** · 18/07/2013, 22h09

Tu aurais la gentillesse de me dire de quelles erreurs tu parles? Étant donné que mon calendrier fonctionne bien, je ne vois pas de quoi tu parles! Merci!

**danielhagnoul** · 18/07/2013, 22h59

Je viens d'ouvrir la page avec Chrome, je confirme qu'il signale une foule d'erreurs. Voir dans la console, touche F12.

**DoumCSS** · 19/07/2013, 07h02

Les erreurs n'ont pas rapport avec ma question. Pourriez-vous essayer de m'aider sur ma question sans vous occuper de mon lien? lol

Je vous montrais ce lien pour que vous compreniez rapidement...

**DoumCSS** · 20/07/2013, 20h48

Et pour votre info, l'erreur qui tourne en boucle, c'est une fonction javascript qui roule en arrière-plan qui fait un affichage du genre "cacher/montrer" clignotant d'une message non-lu par un membre. Alors rien de grave!

**NoSmoking** · 20/07/2013, 23h28

Lorsque l'on ~~veux~~ souhaite de l'aide la moindre des choses est de ne pas noyer les intervenants sous des monceaux d'erreurs dont on ne sait si elles agissent ou non sur les scripts.

Je pense qu'il serait intéressant que tu précises clairement quel est ton problème car ce que j'ai pu voir est un rechargement de la DIV uniquement.

**DoumCSS** · 21/07/2013, 05h09

C'est effectivement ce que je voulais faire mais j'ai décidé de faire autrement étant donné que je ne recevais pas de réponse en ce sens. J'ai donc opté pour un <iframe> tout simple pour mon petit calendrier. Ça fonctionne comme je le souhaite mais pas de la façon dont j'espérais au début.

Vous pouvez d'ailleurs aller voir sur ce même lien sans les erreurs, bien sûr!

:
http://www.zonevolley.com

Peut-on dire "RÉSOLU" ?