[AJAX] Optimisation d'un calendrier avec Ajax.

Version imprimable

26/10/2008, 16h24
corgato

[AJAX] Optimisation d'un calendrier avec Ajax.

Bonjour à tous,

je ne connais pas du tous AJAX et je voudrais essayer d'optimiser mon calendrier avec un peu d'AJAX :)

C'est à dire que j'ai un calendrier visible ici : Calendrier sur la page d'accueil

Si vous regarder le calendrier vous pouvez voir :

Citation:

<< Octobre 2008 >>

Si vous cliquez sur "<<" ou ">>" ça va recharger la page pour afficher soit le mois suivant soit le mois précédent.

Donc mon but et de ne plus recharger toute la page seulement pour changer de mois grâce à AJAX.

Si quelqu'un pourrais m'aider se serait super sympa !

Merci !
28/10/2008, 00h06
ryan

Yop!

Citation:

C'est à dire que j'ai un calendrier visible ici : Calendrier sur la page d'accueil

Je reçois une erreur 403 quand je clique sur ton lien :(
30/10/2008, 00h12
corgato

Je sais merci à 1and1 de m'avoir bloqué mon compte...

Tu peux le voir en page d'accueil on utilise tous les deux le même script de base.
01/11/2008, 02h32
ryan

Yop!

Tu connais un peu le principe d'AJAX, je suppose?

- Tu places ton calendrier dans un conteneur (une DIV par exemple)

- Tu écris un page PHP ou ASP qui génère le contenu de la DIV (les dates et les << et >> pour la navigation)

- Tu écris la partie javascript qui récupère les paramètres du click sur les << et >>, crée l'objet XMLHttpRequest, POST les paramètres à la page PHP/ASP, lit la réponse envoyée par cette page et la place dans le conteneur.
01/11/2008, 16h14
corgato

Je vais essayer de voir ça.

merci !

Voilà j'ai essayer mais la je bloque...

J'ai fait comme ci-dessous et mon problème c'est que ça ne change rien... les données sont bien changé mais pas l'affichage du calendrier...

Voir le calendrier : ICI

Si vous cliquez sur les "<<" vous verrez :
<a href="#" onclick="calendrier_ajax('10','2008');"><<</a> Novembre 2008 <a href="scriptcalendrier.php?mois=12&annee=2008">>></a>

donc le mois change bien : 10 mais la page ne change pas...

Ma page scriptcalendrier.php

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
 
<?php
// On vérifie si le mois rentré par le visiteur est bien valide, sinon on affiche le mois en cours
    if((empty($_GET["mois"]) || !is_numeric($_GET["mois"]) || $_GET["mois"]<=0 || $_GET["mois"]>12) && !isset($mois))
    {
    	$mois=date('m');
    }
    elseif(!empty($_GET["mois"]) && is_numeric($_GET["mois"]) && $_GET["mois"]>0 && $_GET["mois"]<=12 && !isset($mois))
    {	
    	// On rajoute un zéro devant le nombre du mois si c'est nécessaire
    	if(strlen($_GET["mois"])==1)
    	{
    		$mois='0'.$_GET["mois"];
    	}
    	else
    	{
    		$mois=$_GET["mois"];
    	}
    }
    elseif(isset($mois) && strlen($mois)==1)
    {
    	$mois='0'.$mois;
    }
 
...
?>

J'ai fait une include du formulaire, appeler le formulaire comme ça :

Code:

1
2
3
4
5
6
7
 
<?php
if($mois!=01)
{
echo '<a href="#" onclick="calendrier_ajax(\''.($mois-1).'\',\''.$annee.'\');"><<</a> ';
}
?>

Voici ma page ajax :

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
 
<script>
function calendrier_ajax (mois,annee)
{
alert(mois+annee);
	var xhr;
    try
	{
		xhr = new ActiveXObject('Msxml2.XMLHTTP');
	}
    catch (e)
    {
        try
		{
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
        catch (e2)
        {
          try
		  {
		  	xhr = new XMLHttpRequest();
		  }
          catch (e3)
		  {
		  	xhr = false;
		  }
        }
     }
 
    xhr.onreadystatechange  = function()
    { 
         if(xhr.readyState  == 4)
         {
              if(xhr.status  == 200)
			  { 
				alert(xhr.responseText);
				document.getElementById('box_calendrier').innerHTML=xhr.responseText; // <== tu met ton innerhtml
			}
              else 
                 alert('Erreur'); // <== tu ne fais rien
         }
    }; 
 
   xhr.open("GET", "scriptcalendrier.php",  true);  // <== ta page
   var data = "mois=" + mois +  "&annnee=" + annee;
   xhr.send(data);
}
</script>
</head>
 
<body>
	<div id="box_calendrier">
		<?php include 'scriptcalendrier.php'; ?>
	</div>
</body>

Merci !