Purtroppo non riesco a risolvere il problema della formattazione del testo.
Facendo il copia e incolla del codice sorgente che propongo negli articoli, ho riscontrato che i doppi apici apici singoli… e non solo mantengono la formattazione UTF-8 imposta da WordPress. Così, incollando il codice su un file notepad, occorre riscrivere gli apici. Fino ad ora non la consideravo una priorità: pensavo che ci stava bene un piccolo sforzo da parte di chi volesse fare i propri esperimenti utilizzando gli script php4people. Un ragionamento corretto finché si parla di script brevi, ma che cozza contro codice sorgente fatto di decine o centinaia di righe.
Non è mia intenzione almeno per il momento spostare WordPress su piattaforma dedicata in un mio dominio web, cosa che mi permetterebbe di risolvere velocemente il problema. Pertanto il “voler restare” sull’host di WordPress mi costringe a rivedere il template che sto utilizzando, dando la precedenza di scelta a quei template che permettono un copia e incolla non problematico.
Nei prossimi giorni non scriverò molto e mi dedicherò alla scelta del template, al re-edit degli articoli già postati e alla riorganizzazione dei contenuti.
Uno dei visitatori di ieri è arrivato su php4people cercando via motore di ricerca la query “refresh div php”. Leggendo anche le ricerche che hanno portato visite a questo blog, mi è venuta l’idea di postare periodicamente tips che diano risposte veloci alle query “tecniche”. Non sempre queste query sono chiare. Quando non lo sono cercherò d’interpretarle. E’ il caso della query “refresh div php” che interpreto così:
Posso impostare un refresh automatico o manuale di un tag DIV per caricarci dentro il risultato dell’esecuzione di uno script PHP ?
Si. In entrambi i casi (auto o manuale) hai però bisogno d’inserire uno o più script in JavaScript, perché occorre passare informazioni in tempo reale alla pagina web.
- lato-server: utente -> server -> risposta
- lato-client: utente -> server -> risposta <-> utente
PHP è un linguaggio lato-server: c’è una richiesta dell’utente che viene elaborata da uno script che manda su schermo la risposta. Questa risposta è il risultato di una comunicazione unidirezionale e non può essere modificata se non “ricaricando” la pagina o comunque facendo ripartire il ciclo di richiesta.
Un linguaggio lato-client permette invece un’interazione esterna al server: ricevo una risposta eventuale dal server e da questo momento posso interagire con questa risposta senza “parlare” con il server. Impegno delle risorse, immagazzino dei dati che poi utilizzo, utilizzando risorse client (il mio computer) e non server (il mio provider).
Per rispondere alla domanda iniziale sul refresh di un div utilizzando PHP … e supponendo che il contenuto da mandare in output sia il risultato dell’esecuzione di un file PHP:
Mi serve: uno script AJAX che interpreti la richiesta di aggiornamento richiamando il file PHP con cui intendo dare nuovo contenuto al DIV …
 AJAX è acronimo di Asynchronous JavaScript and XML e non ha nulla a che vedere con il PHP. Non è un linguaggio di programmazione, quanto la fusione di richieste JavaScript e XML per il conseguimento di un obiettivo preciso: passare dati ad una pagina web precedentemente chiamata in output sul browser, senza bisogno di dover ricaricare l’intera pagina. |
<script type=”text/javascript”>
url = http://www.urldelsito.ext;
function refreshBrowser(el,nomeFile){
preload = “<p style=’background:#ff0000; color: #ffffff;’>aggiornamento richiesta in corso…</p>”;
if (typeof XMLHttpRequest != “undefined”) { x = new XMLHttpRequest();}else{
try { x = new ActiveXObject(“Msxml2.XMLHTTP”);}
catch (e) { try { x = new ActiveXObject(“Microsoft.XMLHTTP”);} catch (e){x = null;}}
}
if (x) {
el.innerHTML = preload;
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
el.innerHTML = x.responseText;
}
}
x.open(“GET”, url + nomeFile, true);
x.send(null);
}
}
// return false;
}
</script>
Mi serve: un JavaScript che tenga conto del browser in cui il comando passa in esecuzione …
| Quando la concorrenza impone la stupidità come prerequisito per aggredire il mercato: Explorer, FireFox, Opera etc. sono tutti browser concorrenti che hanno pregi e difetti di cui non stò a sindacare. Ognuno di questi browser ha delle regole sintattiche che lo differenziano dagli altri browser concorrenti con il solo risultato di creare problemi a chi sviluppa applicazioni per il web. Troppo semplice utilizzare le stesse regole sintattiche … |
<script type=”text/javascript”>
if (document.getElementById) {
var el=document.getElementById(id);
} else if (document.layers) {
var el=document.layers[id];
} elseif (document.all) {
var el=document.all.id;
}
</script>
Mi serve: un JavaScript per controllare il runtime … i secondi che mancano al prossimo refresh
| Questo è un esempio di script lato-client che una volta chiamato in esecuzione non ha alcun bisogno d’interagire con il server d’origine per le sue successive esecuzioni. Parte da un valore di partenza (5”) per arrivare a 0 e chiamare refresh(id,nomeFile) che recupera il valore del tag con l’id di riferimento facendo partire la chiamata Ajax. |
<script type=”text/javascript”>
function load(){
setTimeout(“refreshBrowser(‘tagDaModificare’,'prova.php?a=1′)”,5000);
}
</script>
Mi serve: un tag div di riferimento su cui è chiamata ad agire la funzione load …
| E’ possibile assegnare un id a qualsiasi tag HTML. Se utilizzi i tag <TABLE> <TR> <TD> per le tue pagine HTML … se utilizzi il tag <P> o il tag <B> … fai delle prove assegnando un id ad uno di essi. Ad esempio: <TABLE id=”nome”> … otterrai lo stesso risultato dell’esempio che propongo in questa pagina. |
<div id=”tagDaModificare”>contenuto iniziale da modificare ogni 5 secondi</div>
Poi, naturalmente, il file PHP da chiamare …
<?php
// mando in stampa il contenuto
echo “DIV aggiornato … tempo Unix: <b>”.time().”</b>”;
exit;
?>
Nota bene: la funzione time() - su cui scriverò presto un post – serve per recuperare data e ora attuale in formato Unix … una sequenza di 11 numeri … ci ritornerò.
Accorpo tutti i “mi serve” in un unico file PHP e questo è il risultato… che prima ”spezzo” per descrivere i passaggi fondamentali necessari per una corretta esecuzione del refresh… e poi propongo integrale per un rapido copia e incolla.
<?php
header (“cache-control: no-cache, must-revalidate”);// mando in stampa il contenuto
if(trim($_GET['a']) == 1){
echo “<h3 style=’background: #000000; color:#FFFFFF; font-weight: normal;’>DIV aggiornato … tempo Unix: <b>”.time().”</b></h3>”;
exit;
};
?>
La chiamata no-cache in header è necessaria per istruire browser “abituati” a memorizzare le pagine caricate. In questo modo s’impedisce il salvataggio in cache della pagina e una corretta esecuzione del refresh. Non è un’istruzione necessaria, ma suggerita ad esempio con le ultime versioni del browser Explorer. In grassetto l’istruzione exit; che interrompe l’esecuzione dello script php impedendo il reload completo dell’HTML. Il blocco di esecuzione è chiamato al primo caricamento del file PHP via AJAX.
<html>
<head>
<title>refresh automatico di un file PHP in un DIV</title>
Dopo aver impostato l’intestazione della pagina HTML inserisco lo script AJAX e JavaScript all’interno dell’ header. Sopra puoi vedere l’apertura del tag evidenziata in grassetto.
<script type=”text/javascript”>
var url = “http://localhost/test/“;
La variabile URL deve contenere l’indirizzo internet o intranet della cartella in cui si trova il file che intendi far chiamare da AJAX.
var preload = “<p style=’background:#ff0000; color: #ffffff;’>aggiornamento richiesta in corso…</p>”;
La variabile preload contiene il testo da far apparire su schermo alla chiamata di reload, in attesa che il file PHP venga ricaricato.
function refreshBrowser(id,nomeFile){
if (document.getElementById) {
var el=document.getElementById(id);
}else if (document.layers) {
var el=document.layers[id];
}else if (document.all) {
var el=document.all.id;
}
if (typeof XMLHttpRequest != “undefined”) {
x = new XMLHttpRequest();
}else {
try {
x = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e) {
try {
x = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e){
x = null;
}
}
}
if (x) {
el.innerHTML = preload;
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
el.innerHTML = x.responseText;
load();
}
}
x.open(“GET”, url + nomeFile, true);
x.send(null);
}
// return false;
}
La funzione refreshBrowser contiene tutte le informazioni necessarie per chiamare il file PHP e riempire il contenitore DIV cercando di soddisfare le sintassi di browser differenti.
function load(){
setTimeout(“refreshBrowser(‘tagDaModificare’,'prova.php?a=1′)”,5000);
}
</script>
La funzione load() è il cuore dello script. Si tratta di una funzione JavaScript che richiama il comando setTimeout che a sua volta richiamerà ogni 5 secondi (5000 millisecondi) la funzione refreshBrowser.
</head>
<body onload=”load()”>
Chiuso l’head apro il <body> della pagina HTML, chiamando la funzione load() a caricamento pagina completato (onload). Quindi inserisco il layout HTML incluso del DIV con il contenuto da modificare. Per finire chiudo </body> e </html>.
— > inizio contenuto
<div id=”tagDaModificare”><h3>contenuto iniziale da modificare ogni 30 secondi</h3></div>
< — fine contenuto
</body>
</html>
e il file refresh.php è pronto per essere eseguito:
<?php
header ("cache-control: no-cache, must-revalidate");
// mando in stampa il contenuto
if(trim($_GET['a']) == 1){
echo "<h3 style='background: #000000; color:#FFFFFF; font-weight: normal;'>DIV aggiornato ... tempo Unix: <b>".time()."</b></h3>";
exit;
};
?>
<html>
<head>
<title>refresh automatico di un file PHP in un DIV</title>
<script type="text/javascript">
var url = "http://localhost/test/";
var preload = "<p style='background:#ff0000; color: #ffffff;'>aggiornamento richiesta in corso...</p>";
function refreshBrowser(id,nomeFile){
if (document.getElementById) {
var el=document.getElementById(id);
}else if (document.layers) {
var el=document.layers[id];
}else if (document.all) {
var el=document.all.id;
}
if (typeof XMLHttpRequest != "undefined") {
x = new XMLHttpRequest();
}else {
try {
x = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
x = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
x = null;
}
}
}
if (x) {
el.innerHTML = preload;
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
el.innerHTML = x.responseText;
load();
}
}
x.open("GET", url + nomeFile, true);
x.send(null);
}
// return false;
}
function load(){
setTimeout("refreshBrowser('tagDaModificare','prova.php?a=1')",5000);
}
</script>
</head>
<body onload="load()">
--- > inizio contenuto
<div id="tagDaModificare"><h3>contenuto iniziale da modificare ogni 30 secondi</h3></div>
< --- fine contenuto
</body>
</html>
