Passare variabili GET senza ricaricare la pagina php

[ecmedia]

Ciao geniacci di ajax!!

Io conosco poco o nulla questo linguaggio, a parte personalizzare gli script gratuiti ^_^

Il mio problema è questo, in un mio sito ho un calendario in php che funziona molto bene.
Si può cambiare il mese cliccando sulla freccia destra e sinistra, che non sono altro se non dei link che aggiungono le variabili $_GET['aa'] per l'anno e $_GET['mm'] per il mese (index.php?aa=2008&mm=12).
Il problema è che ho molte altre variabili nelle pagine e a volte mi si incasina un po' tutto, quindi ho pensato che ajax potrebbe fare al caso mio.
In pratica io vorrei richiamare tramite ajax la pagina calendar.php, e al click sulla freccia dx o sx passare alla pagina calendar.php le variabili aa e mm, senza ricaricare la pagina.

Ho visto un esempio: http://web-developer.sitecritic.net/...ndar_demo2.php
ma io non vorrei cambiare tutto il calendario, ma solo fare questa piccola aggiunta ajax (senza altri effetti / effettini vari).

Grazie!

[artorius]

devi spostare la parte che si occupa di generare il calendario in un file a parte che se lo chiami nel browser funziona a se stante. Quando avrai fatto questo, ti potrò dare una mano.

[ecmedia]

Ho fatto: http://www.localando.it/inc/calendario.php

[artorius]

perfetto comincia a scaricarti prototypejs ed a leggerti un po' di documentazione ( http://www.prototypejs.org/learn ) , appena arrivo a casa ti posto un paio di idee

[artorius]

allora, nel punto dove prima inserivi il calendario devi mettere l'elemento html (un div di solito) che farà da wrapper (cornice) al valore ottenuto con Ajax.
Ora metti di avere il tuo div: <div id="CalendarWrapper"></div>

con prototype.js puoi facilmente chiamare la pagina con una semplice istruzione:

new Ajax.Updater('CalendarWrapper', 'inc/calendario.php', {method: 'get', parameters : {aa : anno, mm: mese}, onComplete: function(){...}});

dove anno e mese saranno l'anno ed il mese da visualizzare.

Una cosa dovresti ancora fare con il calendario: devi mettere un id ai link che conducono al mese successivo ed a quello precendente e togliere gli href corrispondenti (lascia solo # nel href), metti che siano id="PrevMonth" e id="NextMonth"

per prima cosa creiamo una funzione per fare questo facilmente:

function updateCalendar(anno, mese)
{
   new Ajax.Updater('CalendarWrapper', 'inc/calendario.php', {method: 'get', parameters : {aa : anno, mm: mese}, onComplete : function()
      {
          $('PrevMonth').observe('click', prevMonth);
          $('NextMonth').observe('click', nextMonth);
      }
   });
} 

Questa funzione prende in ingresso due interi che sono il mese e l'anno da passare come argomenti, effettua l'update e poi associa gli eventi corrispondenti ai pulsanti per mostrare il mese precendente e successivo (definirò dopo queste funzioni).

Ora, all'apertura della pagina, tu vorrai mostrare il calendario con il mese e anno corrente, o, in caso di passaggio dei valori aa e mm in GET, il mese per i dati indicati.

Allora fai:

var currentMonth, currentYear;
Event.observe(window, 'load', function(){
   currentMonth = <?=$_GET['mm'] ? $_GET['mm'] : 'null'?>;
   currentYear = <?=$_GET['aa'] ? $_GET['aa'] : 'null'?>;
   if(!currentMonth || !currentYear)
   {
      var d = new Date();
      currentMonth = !currentMonth ? d.getMonth() + 1 : currentMonth;
      currentYear = !currentYear ? d.getFullYear() : currentYear;
   }

   updateCalendar(currentMonth, currentYear);
})

Questo caricherà il calendario all'apertura della pagina.

Ora non ci resta che creare due funzioni, quella per mostrare il mese successivo e quella per mostrare il mese precendente (quelle che nella funzione updateCalendar vengono associate ai link con gli id)

function prevMonth(){
   currentMonth = currentMonth == 1 ? 12 : currentMonth - 1;
   currentYear = currentMonth == 12 ? currentYear - 1 : currentYear;
   updateCalendar(currentMonth, currentYear);
}

function nextMonth(){
   currentMonth = currentMonth == 12 ? 1 : currentMonth + 1;
   currentYear = currentMonth == 1 ? currentYear + 1 : currentYear;
   updateCalendar(currentMonth, currentYear);
} 

Questo dovrebbe essere sufficiente a fare quello di cui hai bisogno, se non funziona qualcosa dimmelo e ci do un'occhiata al link.

[ecmedia]

Ciao artorius, sei stato gentilissimo, ma non c'è modo di farlo senza prototype?
Ho scaricato il js e pesa 168kb.. considerando che la mia pagina è già pesantina, preferivo utilizzare qualcosa di più leggero...
Nel sito utilizzo già per altre cose mootools v.1.1, c'è modo di utilizzare questo framework al posto del prototype?
Ti ringrazio moltissimo.

[artorius]

meglio ancora:

function updateCalendar(anno, mese)
{
   new Ajax('inc/calendario.php', {method: 'get', data : {'aa' : anno, 'mm': mese}, onComplete : function(obj)
      {
          $('CalendarWrapper').setHTML(obj);
          $('PrevMonth').observe('click', prevMonth);
          $('NextMonth').observe('click', nextMonth);
      }
   });
} 

poi

var currentMonth, currentYear;
window.addEvent('load', function(){
   currentMonth = <?=$_GET['mm'] ? $_GET['mm'] : 'null'?>;
   currentYear = <?=$_GET['aa'] ? $_GET['aa'] : 'null'?>;
   if(!currentMonth || !currentYear)
   {
      var d = new Date();
      currentMonth = !currentMonth ? d.getMonth() + 1 : currentMonth;
      currentYear = !currentYear ? d.getFullYear() : currentYear;
   }

   updateCalendar(currentMonth, currentYear);
})

Le altre vanno bene

[ecmedia]

Ciao.. purtroppo non sono riuscita a farlo funzionare!
Ho creato la pagina http://www.localando.it/prova2.php , inserendo il codice che mi hai postato per mootools.. ma non carica il calendario!
Ti posto il codice completo della pagina:

<!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=utf-8" />
<title>Documento senza titolo</title>
<link href="css/shared.css" rel="stylesheet" type="text/css" />
<script src="js/mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    function updateCalendar(anno, mese)
{
   new Ajax('inc/calendario.php', {method: 'get', data : {'aa' : anno, 'mm': mese}, onComplete : function(obj)
      {
          $('CalendarWrapper').setHTML(obj);
          $('PrevMonth').observe('click', prevMonth);
          $('NextMonth').observe('click', nextMonth);
      }
   });
}

var currentMonth, currentYear;
window.addEvent('load', function(){
   currentMonth = <?=$_GET['mm'] ? $_GET['mm'] : 'null'?>;
   currentYear = <?=$_GET['aa'] ? $_GET['aa'] : 'null'?>;
   if(!currentMonth || !currentYear)
   {
      var d = new Date();
      currentMonth = !currentMonth ? d.getMonth() + 1 : currentMonth;
      currentYear = !currentYear ? d.getFullYear() : currentYear;
   }

   updateCalendar(currentMonth, currentYear);
}) 
    
function prevMonth(){
   currentMonth = currentMonth == 1 ? 12 : currentMonth - 1;
   currentYear = currentMonth == 12 ? currentYear - 1 : currentYear;
   updateCalendar(currentMonth, currentYear);
}

function nextMonth(){
   currentMonth = currentMonth == 12 ? 1 : currentMonth + 1;
   currentYear = currentMonth == 1 ? currentYear + 1 : currentYear;
   updateCalendar(currentMonth, currentYear);
}
</script>
</head>
<body>
<div id="CalendarWrapper"></div>
</body>
</html>

Può essere che il js di mootools non sia completo? Ti posto il link diretto: http://www.localando.it/js/mootools.v1.11.js


Nel frattempo ho trovato uno script in rete per creare un calendario con php e ajax, però prototype. Siccome il codice php mi sembra fatto molto bene, meglio di quello che sto usando io, secondo te si riesce a modificarlo per mootools? Nella mia ignoranza suppongo bisognerebbe cambiare solo la request...
Ti posto il link (si vede solo il codice): http://www.ryboe.com/tutorial-exampl...dar_part1.phps

[artorius]

guarda, il mootools che hai è solo la versione per gli effetti Fx con le dipendenze. Non saprei proprio dove cercare quella vecchia, non puoi aggiornarti a quella nuova? http://mootools.net/download

basta che cambi:

function updateCalendar(anno, mese)
{
   new Request('inc/calendario.php', {method: 'get', onSuccess : function(responseText, responseXML)
      {
          $('CalendarWrapper').set('html', obj);
          $('PrevMonth').addEvent('click', prevMonth);
          $('NextMonth').addEvent('click', nextMonth);
      }
   }).send('aa='+anno+'&mm='+mese});
} 

[ecmedia]

Riciao!

Ho trovato la release 1.11 a questo link: http://download2us.softpedia.com/dl/...elease-1.11.js
Ma per sicurezza ho scaricato la 1.2 (speriamo poi che tutto il resto funzioni!).

Comunque, ho modificato il codice così come mi hai detto:

<!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=utf-8" />
<title>Documento senza titolo</title>
<link href="css/shared.css" rel="stylesheet" type="text/css" />
<script src="js/mootools-1.2-core-nc.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    function updateCalendar(anno, mese)
{
   new Request('inc/calendario.php', {method: 'get', onSuccess : function(responseText, responseXML)
      {
          $('CalendarWrapper').set('html', obj);
          $('PrevMonth').addEvent('click', prevMonth);
          $('NextMonth').addEvent('click', nextMonth);
      }
   }).send('aa='+anno+'&mm='+mese});
}

var currentMonth, currentYear;
window.addEvent('load', function(){
   currentMonth = <?=$_GET['mm'] ? $_GET['mm'] : 'null'?>;
   currentYear = <?=$_GET['aa'] ? $_GET['aa'] : 'null'?>;
   if(!currentMonth || !currentYear)
   {
      var d = new Date();
      currentMonth = !currentMonth ? d.getMonth() + 1 : currentMonth;
      currentYear = !currentYear ? d.getFullYear() : currentYear;
   }

   updateCalendar(currentMonth, currentYear);
})
    
function prevMonth(){
   currentMonth = currentMonth == 1 ? 12 : currentMonth - 1;
   currentYear = currentMonth == 12 ? currentYear - 1 : currentYear;
   updateCalendar(currentMonth, currentYear);
}

function nextMonth(){
   currentMonth = currentMonth == 12 ? 1 : currentMonth + 1;
   currentYear = currentMonth == 1 ? currentYear + 1 : currentYear;
   updateCalendar(currentMonth, currentYear);
}
</script>
</head>
<body>
<div id="CalendarWrapper"></div>
</body>
</html>

Ma non funziona! http://www.localando.it/prova2.php

...mi sfugge qualcosa?