Giusto un breve post su una cosa sulla quale sto giocherellando in questi giorni. Sto scrivendo un’applicazioncina web php/sqlite3 di una paginetta; in questa applicazione appaiono sigle e simboli arcani, che richiedono un help contestuale: io clicco su una stringa (che camuffa un link) e da qualche parte nella pagina una sezione cambia contenuto per andare a contenere il testo di un help. Come fare? Mi servono tre cose:
1) Nella pagina principale dell’applicazione il div che andrà a contenere il testo. Basta una cosa qualunque
<div id="helpdiv">Help in linea</div>
2) Una pagina esterna destinata a creare l’help online a partire da un parametro “codice” fornito mediante GET. La chiameremo “decodifica.php”, e inizierà con qualcosa del tipo:
<!-- pagina decodifica.php -->
<?php
if (!isset($_GET['formula'])) return "Beh?";
else return $_GET['formula'];
?>
Una cosina semplice, che se chiamata senza parametro restituisce un accigliato warning mentre se viene richiamata correttamente con il parametro “formula” fa un echo di quanto passato.. giusto per provare!
3) una funzioncina javascript nella pagina principale.
<script type="text/javascript">
Questa prima funzione viene richiamata dal link con un parametro, l’url della pagina di decodifica. La funzione lancia la richiesta della pagina di decodifica e poi resta in attesa dell’acknowledge, all’arrivo del quale lancerà la funzione “scriviDiv”
function impostaDiv(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = scriviDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = scriviDiv;
req.open("GET", url, true);
req.send();
}
}
}
Questa funzione invece viene richiamata al termine della chiamata alla pagina di decodifica, e scrive il testo restituito nel div di destinazione “helpdiv”.
function scriviDiv() {
if (req.readyState == 4) { // completato
if (req.status == 200) { // risposta affermativa
document.getElementById("helpdiv").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
4) Per concludere, occorrono i link nella pagina principale per richiamare la funzione impostaDiv, una cosa del tipo:
<a href="javascript:impostaDiv('decodifica.php?formula=sorpresa')">Scritta strana</a>
Ecco fatto! A questo punto dovremmo avere un sistema che si comporta così:
- l’utente preme il link “scritta strana”;
- viene chiamata una funzione javascript impostaDiv con parametro formula=sorpresa;
- la funzione impostaDiv richiama la pagina decodifica.php?formula=sorpresa;
- la pagina ritorna la scritta “sorpresa” (la stessa che gli è stata passata!);
- appena la pagina è pronta si attiva la chiamata di ritorno scriviDiv, che va a scrivere l’output di cui sopra (ovvero la scritta “sorpresa”) nel div “helpDiv”, che fino a poso tempo fa conteneva solo il testo “Help in linea”.
Facile, no?
Saluti!
). Si tratta di una web application basata su php e un database SQLite3, con massiccio uso di JQuery, JQuery UI e css e l’ottimo appoggio del framework css Blueprint e di Php Activerecord.
