Besoin d'aide Javascript et Php

Fermé
fab53 Messages postés 1 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 8 janvier 2007 - 8 janv. 2007 à 17:23
kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 - 8 janv. 2007 à 17:58
Bonjour à tous,

J'ai besoin d'un coup de main.
Voila, je veux réaliser un calendrier qui s'adapte à la date du jour avec des liens sur chaque jour.
Ensuite, lorsque les visiteurs de mon site clique ou passe la souris sur un jour, je voudrais que les évènements liés à cette date apparaissent en dessous du calendrier.
Les évènements sont intégrés dans des bases MySQL avec accès par php.

je n'arrive pas à passer la date du jour en variable dans le lien. Ensuite, comment faire pour que le texte apparaissent en dessous après avoir été chercher les données dans MySQL ?
Voici le code de mon fichier :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>

<SCRIPT language=javascript>
// Script réalisé par https://www.toutjavascript.com/main/index.php3
// Reproduction gratuite à condition de laisser ce commentaire

var ferie=new Array("01/01","01/05","08/05","14/07","15/08","01/11","11/11","25/12");
var mois=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");

function disp(txt) { document.write(txt) }
function estFerie(j,m) {
var nb=ferie.length;
var test=false;
for(var i=0;i<nb;i++) {
if ((ferie[i].substring(0,2)==j)&&(ferie[i].substring(3,5)==m)) return true;
}
return false;
}
function calendar(colFond,colTitre,colTexte,colFerie,colOn,color_titre) {
var d_jour=new Date();
var a=d_jour.getYear(); if (a<1970) {a=1900+a}
var m=d_jour.getMonth()+1;
var d=new Date(a,m-1,1);
var dfin=new Date(a,m-1,1);
var nb_jour=31;
var aff_j="";
for(var k=32;k>27;k--) {
dfin.setMonth(m-1);
dfin.setDate(k);
if (dfin.getMonth()!=m-1) {nb_jour=k-1;}
}

var j1=d.getDay(); if (j1==0) j1=7;
var jour=0;
disp("<FONT FACE='Arial' size='2'><CENTER><B>"+mois[m-1]+" "+a+"</B></CENTER></FONT>");
disp("<TABLE width='10%' border=0 cellspacing=0 cellpadding='2' align='center'>");
disp("<TR align='center' bgcolor='"+colTitre+"'> <TD width='8'><font FACE='Arial' size='2' color='"+color_titre+"'><B>L</B></font></TD><TD width='10'><font FACE='Arial' size='2' color='"+color_titre+"'><B>M</font></TD><TD width='10'><font FACE='Arial' size='2' color='"+color_titre+"'><B>M</B></font></TD><TD width='10'><font FACE='Arial' size='2' color='"+color_titre+"'><B>J</B></font></TD><TD width='10'><font FACE='Arial' size='2' color='"+color_titre+"'><B>V</B></font></TD><TD width='10'><font FACE='Arial' size='2' color='"+color_titre+"'><B>S</B></font></TD><TD width='10'><font FACE='Arial' size='2' color='"+color_titre+"'><B>D</B></font></TD></TR>");
for(var i=0;i<6;i++) {
disp("<TR>");
for (j=0;j<7;j++) {
jour=7*i+j-j1+2;
aff_j=jour;
if ((jour==d_jour.getDate())&&(m==d_jour.getMonth()+1)) {aff_j="<FONT size='2' color='"+colOn+"' face='Arial'><I><B>"+jour+"</B></I></FONT>";}
if ((7*i+j>=j1-1)&&(jour<=nb_jour)) {
if ((j==6)||(estFerie(jour,m))) disp("<TD width='10' bgcolor='"+colFerie+"' align='center'><FONT face='Arial' size='1' color='"+colTexte+"'><a href='#'>"+aff_j+"</a></FONT></TD>");
else disp("<TD width='10' bgcolor='"+colFond+"' align='center'><FONT face='Arial' size='1' color='"+colTexte+"'><a href='#'>"+aff_j+"</a></FONT></TD>");
}
else disp("<TD width='10' bgcolor='"+colFond+"'><FONT size=-1>  </TD>");
}
disp("</TR>");
}
disp("</TABLE>");
}


</SCRIPT>

<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
-->
</style>

<SCRIPT LANGUAGE="JavaScript">
//D'autres scripts sur http://www.multimania.com/jscript
//Si vous utilisez ce script, merci de m'avertir !
function changer(txt) {
document.forms[0].elements[0].value=txt
}
</SCRIPT>


</head>

<body>

<SCRIPT type='text/javascript'>
// Affiche le calendrier
// calendar(colFond,colTitre,colTexte,colFerie,colOn,color_titre)
calendar("#FFFFFF","#000000","#333333","#F68C30","red", "#FFFFFF")
</SCRIPT>


</body>
</html>

Merci de votre grande aide !!

@ Bientôt,
A voir également:

1 réponse

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
8 janv. 2007 à 17:58
Je te donne une piste pour ce que tu souhaite faire : les object XHR de javascript.
Quoi qu'est ce ?
Ce sont des objets javascript donc, qui te permettent de faire appel à un fichier script (ici php) et qui peuvent interpréter le retour de ce script.
Ce qui dans ton cas est utile puisqu'il te suffit de faire :

- dans ta page html, une <div> qui contiendra les info à afficher lorsque la souris passe sur le lien. Cette div doit avoir un identifiant bien défini.
- un fichier php qui prend pour parametre la date pour aller chercher les évenements liés à cette date dans la base de donnée et qui, pour chaque retour, modifie directement (en javascript) le contenu de ta <div>.
- une fonction javascript qui prends en param la date du lien, qui appelle le fichier php via un objet XHR.

Et voilou :)

Peut pas t'aider plus j'ai pas trop de temps, mais cherche coté objets XHR :)
0