Purtroppo su IE ogni volta che inviamo un form le gif animate vengono fermate.

Ecco uno scenario tipico per questo errore: una form per inviare una foto dove si vuole fare attendere l’utente che finisca l’upload dandogli la sensazione, tramite una gif animata, che la pagina web stia lavorando.

<form onSubmit="gif()" name="myform" action="#" method="post" enctype="multipart/form-data">
<p id="wait">
<img id="WaitImage" src="images/loadingAnimation.gif"/><br />
<strong>È in corso l'invio ...<br />
L'operazione potrebbe richiedere qualche minuto, attendi senza chiudere questa finestra.
</strong>
</p>
</form>


Visto che su IE la gif che era nascosta, quando invio la form smette di essere animata, bisogna trovare un modo per farla ripartire.

Tutto si può fare dando l’impressione ad IE di aver modificato l’immagine con Javascript un tempo successivo all’invio della form, tramite questa istruzione:

setTimeout('document.getElementById("WaitImage").src = "images/loadingAnimation.gif"', 200);



<script type="text/javascript">
function gif()
{
if (document.forms["myform"]["file"].value != "")
{
document.getElementById(\'bottone_carica\').style.display = \'none\';
document.getElementById(\'wait\').style.display = \'block\';
setTimeout(\'document.getElementById("WaitImage").src = "images/loadingAnimation.gif"\', 200);
}
}
</script>


Così la gif bloccata ripartirà a eseguire la sua animazione.

Come ho già avuto occasione di dire, mi piacciono molto le finestre modali per la visualizzazione delle immagini e dove potevo le ho sempre inserite.
Fino ad ora ho utilizzato in particolare lightbox, ma ovviamente ho testato anche altre soluzioni. Ultimamente però ho preso la decisione di utilizzare principalmente mootools come framework javascript quindi, visto che è più funzionale caricare solo una libreria per non appesantire troppo i client, ho deciso di sostituire lightbox con slimbox utilizzando il plugin relativo anche sul blog:

slimbox wordpress plugin/

Eccone alcuni esempi con immagini che già sono state usate nel mio blog.

Sequenza

il codice è questo:

Single example:
<a href=”img1.jpg” rel=”lightbox” title=”my caption”>thumbnail1</a>
Image set example:
<a href=”img1.jpg” rel=”lightbox[roadtrip]”>thumbnail1</a>
<a href=”img2.jpg” rel=”lightbox[roadtrip]”>thumbnail2</a>
<a href=”img3.jpg” rel=”lightbox[roadtrip]”>thumbnail3</a>

Ogni volta che si inserisce una immagine bisogna aggiungere l’attributo rel, lightbox se è solo una immagine o lightbox[roadtrip] se si vuole creare una sequenza.

Gabba Gabba Hey
Bonzo

Json è un formato di testo indipendente dal linguaggio che usa convenzioni simili a quelle della famiglia dei linguaggi C.

Si basa su due strutture di dati supportate praticamente da tutti i linguaggi di programmazione moderni:

• una raccolta di coppie nome/valore [oggetti, record, dizionari...]
• una raccolta ordinata di valori [array...]

Inoltre Json è basato su un sottoinsieme di Javascript Standard, quindi non ci dovrebbero essere problemi di compatibilità con i vari browser.

Oggetto json
insieme ordinato di coppie nome/valore. inizia e termina con una parentesi graffa{};

Array Json
raccolta ordinata di valori che inizia e termina con le parentesi quadre [];

Valore Json
Vengono separati da una virgola e possono essere: Stringa, numero, true e false, oggetto, array, null

In particolare il vanto di Json è di essere un formato di scambio molto più leggero di xml.

Esempio di utilizzo Json

File Json
json.js

File html con i form da cui far partire il nostro esempio

json_first.html

function doJSON() {
var user = getUserObject();
var userAsJSON = JSON.stringify(user);
alert("ecco l'oggetto User di Json :\n " + userAsJSON);
var url = "json_first.php?timeStamp=" + new Date().getTime();
var postVar= 'user_data='+encodeURIComponent(userAsJSON);
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(postVar);
}
La funzione crea un oggetto User con i valori della form,

function getUserObject() {
return new User(document.dati.username.value, document.dati.mail.value);
}
function User(username, mail) {
this.username = username;
this.mail = mail;
}

e lo invia via Post in formato Json al server sotto forma d querystring:

Ecco il post della pagina:

user_data {“username”:”bonzo”,”mail”:”ilbonzo.org@gmail.com”}

La pagina php processa i dati e li rimanda alla prima pagina

json_first.php

$jsonString= stripslashes($_POST['user_data']);
var_dump(json_decode($jsonString));
$jsonPost=json_decode($jsonString);
echo 'username: ';
echo $jsonPost->username;
echo ' mail: ';
echo $jsonPost->mail;

L’esempio è molto semplice, ma serve solo per capire le potenzialità di Json e Ajax.
Scarica esempio

Nota:
Json su PHP si può usare dalla versione 5.2, prima serviva il repository PECL.

Gabba Gabba Hey

Bonzo

Continuo il mio viaggio nello studio di Ajax.
Oggi ho guardato come comunicare con il server, via GET o POST, ottenendo il risultato senza dover ricaricare la pagina dando all’applicazione un forte effetto web 2.0.

L’esempio è fatto di una pagina getpost.html nella quale c’è un form in cui inserire il nome ed il cognome. Dopo di ciò facendo click su invia i parametri con GET si vedrà il risultato della pagina get.php nella parte Risposta Server senza avere un ricaricamento della pagina.La stessa cosa si ottiene con Invia i parametri via POST, con la differenza che questa volta il colloquio con il server avverrà via POST.

Vediamo un attimo il codice Javascript:

Il bottone GET chiama la funzione doRequestUsingGET();

function doRequestUsingGET()
{
createXMLHttpRequest();
var queryString = "get.php?";
queryString = queryString + createQueryString()
+ "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}


La funzione crea un oggetto XMLHttpRequest, poi costruisce la stringa della Chiamata GET con i valori inseriti dall’utente utilizzando la funzione createQueryString():


function createQueryString()
{
var nome = document.getElementById("nome").value;
var cognome = document.getElementById("cognome").value;
var queryString = "nome=" + nome + "&cognome=" + cognome;
return queryString;
}


Si continua impostando la proprietà onreadystatechange dell’oggetto XMLHttpRequest per l’uo della funzione handleStateChange. il metodo open() dice che la richiestà è di tipo GET, l’URL della richiesta con i valori e il metodo send() invia la richiesta al server. La risposta sarà gestita dalla funzione handleStateChange:


function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
parseResults();
}
}
}


Quest’ultima chiama la funzione parseResult():

function parseResults()
{
var responseDiv = document.getElementById("rispostaServer");
if(responseDiv.hasChildNodes())
{
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}

Tale funzione usando il DOM rimuove i risultati precedenti del server dal DIV “rispostaServer” e ci va a mettere quelli nuovi.

Se invece si effettua tutto via POST, la differenza sta nella modalità in cui si inviano i parametri al server.


function doRequestUsingPOST()
{
createXMLHttpRequest();
var url = "post.php";
var queryString = createQueryString();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}

La differenza è che i parametri andranno cercati all’interno del corpo della richiesta e non nell’url.
Per questo si usa il metodo setRequestHeader(), per dire al server che cerchi li i parametri.

Per completezza metto pure il codice delle pagine PHP:

get.php


echo 'Ciao';
echo ' Il tuo nome è: '.$_GET['nome'];
echo ', il tuo cognome è: '.$_GET['cognome'];
echo ' [Metodo GET]';


post.php

echo 'Ciao';
echo ' Il tuo nome è: '.$_POST['nome'];
echo ', il tuo cognome è: '.$_POST['cognome'];
echo ' [Metodo POST]';


L’esempio è molto semplice, ma si può fare la stessa cosa, avendo un parte lato serve molto più complicata, il tutto mantenedo questo aspetto di applicazione Desktop per una applicazione Web.

codice completo

Gabba Gabba Hey
Bonzo

XMLHttpRequest è l’oggetto che forse ha permesso a sistemi come Google Suggest e Ta-da-List di esistere nella maniera in cui li conosciamo attualmente.

Inizialmente implementato da IE 5 come componente ActiveX, La maggior parte degli sviluppatori non usava XMLHttpRequest perché funzionava solo in Iternet Explorer fino a che, recentemente, non è stato adottato come standard in Mozilla 1.0 e Safari 1.2. Per ora però non è standard W3c, però la maggior parte dei browser implementano il funzionamento degli oggetti XMLHttpRequest in modo molto simile.

Esempio:
provarequest.html

C’è una form con un solo bottone su quale faccio click per far partire la richiesta di