Optimisation d'un calendrier avec Ajax.

Sujet résolu

Anonyme

26 octobre 2008 à 18:14:37

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 :

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

sexyprout

26 octobre 2008 à 19:49:20

La recherche ça existe.
Sinon, en théorie : t'as une page qui contient uniquement ton calendrier et tu appelles une fonction js qui retourne cette page avec les bons params.

Timot

26 octobre 2008 à 20:15:45

Structure de ton machin :
[ precedent Mois suivant ]
[ Calendrier ]

Tu vas demander a une page PHP de te dire qu'est ce qu'il faut mettre dans la partie [Calendrier] pour le mois suivant.
Elle te renvoie la réponse, tu modife le mois en cours, et tu met la réponse dans la partie [Calendrier].
Fait quelques recherches sur google, tu devrais trouver, c'est pas super compliqué

Anonyme

29 octobre 2008 à 18:16:11

Ok merci je vais voir.

Anonyme

11 novembre 2008 à 22:07:30

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

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

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

Voici ma page ajax :

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

SRWieZ

11 novembre 2008 à 22:39:52

Salut, je vois ça :

xhr.open("POST", "scriptcalendrier.php",  true);  // <== ta page

Est-tu sur que ton code recoi des donnees POST, car se script le connais et c'est des GET il me semble mais peut-être que tu l'a modifier...

Anonyme

12 novembre 2008 à 16:26:11

J'ai remplacer toute les GET du script par des POST car avec l'ajax je voyais pas comment utiliser la méthode GET enfin j'ai essayer mais ça ne fonctionner pas... donc si tu sais l'utiliser avec la méthode GET...

Timot

12 novembre 2008 à 21:22:46

Ta structure xHTML n'est pas superbe, voila comment je concevrais la chose :

<table>
   <caption id="titre"><a href="#" onclick="calendrier_ajax('10','2008');"> << </a> Novembre 2008 <a href="#" onclick="calendrier_ajax('12','2008');"> >> </a></caption>

   <thead>
       <tr>
           <th>Lu</th>
           <th>Ma</th>
           <th>Me</th>
           <th>Je</th>
           <th>Ve</th>
           <th>Sa</th>
           <th>Di</th>
       </tr>
   </thead>
   <tbody id="content">
       Le contenu de ton calendrier avec lignes et cellules
   </tbody>
</table>

Et le js :

function calendrier_ajax (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 && xhr.status  == 200)
         document.getElementById('content').innerHTML = xhr.responseText;
   };

   xhr.open("GET", "scriptcalendrier.php",  true);
   xhr.send("mois=" + mois +  "&annnee=" + annee);
   document.getElementById('titre').innerHTML = " le code avec le nouveau mois";
}

Et la page ajax ne renvoie que le contenu des jours du mois

Anonyme

13 novembre 2008 à 20:48:27

Voilà ce que j'ai fait ça fonctionne mais je ne sais pas si c'est du code vraiment correct.

xhr.open("GET", "scriptcalendrier.php?mois="+mois+"&annee="+annee,  true);  // <== ta page !!!
   // var data = "mois=" + mois +  "&annnee=" + annee;
   xhr.send(null);

<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('coucou'); // <== tu ne fais rien à supprimer
         }
    }; 

   xhr.open("GET", "scriptcalendrier.php?mois="+mois+"&annee="+annee,  true);  // <== ta page !!!
   // var data = "mois=" + mois +  "&annnee=" + annee;
   xhr.send(null);
}
</script>

Je pense que c'est mieux de tout mettre dans le même bloc que de le diviser en deux partis !