mercoledì 28 settembre 2011

jQuery-AJAX con $.get() e $.post()

Pagina in aggiornamento

$.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url: stringa contenente l'url verso il quele è inviata la richiesta.
data: stringa o array chiave:valore contenente i dati da inviare al server insieme alla richiesta.
success(data, textStatus, jqXHR): callback function che viene eseguita se la richiesta ha avuto successo.
dataType: Tipo di dato in risposta alla richiesta. Default: Intelligent Guess (xml, json, script, text, html).

martedì 27 settembre 2011

jQuery-AJAX con $.load()

La chiamata AJAX con il metodo $.load() carica codice HTML contenuto o generato da un file remoto in un elemento (solitamente un "div") della pagina HTML.
La richiesta è di default di tipo GET ma è possibile utilizzare il POST impostando i dati della chiamata con il formato coppia chiave/valore.

La sintassi è la seguente:
$(document).ready(function(){  
  $("a#link_che_attiva_la_chiamata_ajax").click(function(){   
    $("div#dove_inserisco_il_codice_ricevuto").load(
      url,    
      {data},    
      function(){     
        // funzione callback da eseguire alla fine    
      });    
    });   
});
I parametri che possono essere gestiti sono:
Nome OpzioneTipo DefaultDescrizione
urlStringL'URL della pagina contenente l'HTML da caricare.
data (opzionale)Map, StringCoppia di dati in formato chiave/valore. Sono i dati da inviare al server. Può essere anche passata una stringa come dato. Quando è utilizzata una stringa i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST.
callback (opzionale)CallbackFunzione richiamata quando la chiamata AJAX è completata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l'oggetto XMLHttpRequest.
La callback può anche essere utilizzata senza paramentri se questi non servono.
Es: function (responseText, textStatus, XMLHttpRequest).

Vediamo un esempio costituito dal file HTML contenente la chiamata "chiamante.html" e il file chiamato "remoto.php".

File "chiamante.html":
<!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>jQuery - Test funzione load()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  $("a#ancoraAjax").click(function(){
   $("div#contenutoAjax").load(
    "remoto.php",
    {numero: 10, stringa: 'pippo'},
    function(){
     alert('dati caricati');
    });
    });
   });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>

Il file "chiamante.html", attraverso la funzione $(...).load(...) effettua una chiamata ajax al file "remoto.php" passandogli due valori (in formato chiave/valore), inserisce nel div "contenutoAjax" il contenuto html che riceve in risposta e alla fine esegue la funzione "alert" che avverte che i dati sono stati inseriti.
File remoto.php:
<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>
Il file "remoto.php", una volta chiamato legge i parametri passati in modalità post (in quanto passati in formato chiave/valore) e crea il codice html da restituire alla chiamata.

La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax

lunedì 26 settembre 2011

jQuery-AJAX con $.ajax()

Il framework jQuery mette a disposizione diversi metodi per implementare AJAX.

Incominciamo dal metodo più articolato $.ajax(options) che restituisce XMLHttpRequest e presenta la seguente implementazione:

$.ajax({
  nome_opzione1: valore_opzione1, 
  nome_opzione2: valore_opzione1, 
  ... 
  nome_opzioneN: valore_opzioneN
  })

Ecco di seguito una tabella delle principali options che possono essere utilizzate:
Nome OpzioneTipo DefaultDescrizione
asyncBooleantrueImposta se la chiamata deve essere asincrona (default) o sincrona.
beforSend Function Modificare XMLHttpRequest, passato come argomento, prima che sia inviato.
Es: function (XMLHttpRequest){....}
cacheBooleantrue (false per dataType "script" e "jsonp")Se settato su false forza la pagina a non utilizzare la cache del browser
complete Function Funzione da eseguire dopo che la richiesta è finita. Tale funzione è eseguita dopo che le funzioni di successo e errore sono eseguite.
Es: function (XMLHttpRequest, textStatus){.....}
contentTypeString "application/x-www-form-urlencoded" Imposta il conten-type dei dati inviati al server. Il valore di default va bene quasi in ogni caso.
dataObject, StringDati inviati al server. L'oggetto deve essere una coppia chiave/valore. Essi sono convertiti in stringhe se non lo sono già. I dati sono inseriti nell'URL e possono essere prelevati tramite il metodo GET. Si possono passare anche array.
dataTypeStringxml o htmlTipo di dato che ci si aspetti ritorni il server. Se non è specificato si basa sul MIME type della risposta.
Tipi ammessi: "xml", "html", "script", "json", "jsonp" e "text".
errorFunctionLa funzione da eseguire nel caso la richiesta fallisse. La funzione ha 3 argomenti: l'oggetto XMLHttpRequest, una stringa che descrive l'errore e un'exception object.
Es: function (XMLHttpRequest, textStatus, errorThrown){.....}
ifModified Boolean falseLa richiesta ha successo solo se la risposta è cambiata dall'ultima richiesta, controllando tale informazione nell'header. Normalmente questo non è così, perciò di default il valore è false e si ignora l'header.
passwordString Password da usare in risposta ad una richiesta di autenticazione HTTP.
success FunctionLa funzione da eseguire quando la chiamata ha successo. La funzione ha due argomenti: i dati ritornati dal server formattati in accordo con il dataType; e una stringa che descrive lo stato.
Es: function (data, textStatus) {....}
timeout NumberTimeout locale in millisecondi per la richiesta. Questo sovrascrive il valore globale settato tramite $.ajaxSetup(). Questa funzione è molto utile per differenziare i timeout delle varie richieste
typeString "GET"Il tipo di richiesta ("POST" o "GET"). Anche altri metodi HTTP sono utilizzabili (PUT, DELETE, ...) ma non tutti i browser li supportano.
urlStringpagina correnteL'URL da chiedere. Esso deve essere una stringa e NON un Location Objec.
SI: document.location.href
NO: document.location
usernameString Username da usere in risposta ad una richiesta di autenticazione HTTP.

Vediamo un esempio in cui il file "chiamante.html" effettua una chiamata ajax al file "remoto.php" passandogli due parametri; il file "remoto.php" crea il codice html con i parametri passati e lo restituisce al file "chiamante.html"; al ricevimento del codice il file chiamante lo inserisce nel div "contenutoAjax" e avverte che il compito è stato fatto.

File chiamante.html
<!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>jQuery - Test funzione ajax()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
   $("a#ancoraAjax").click(function(){
    $.ajax({
     type: "POST", 
     url: "remoto.php",
     data: "numero=10&stringa=Boston",
     success: function(html){    
      $("#contenutoAjax").append(html);
      alert('fatto');  
      }
     });    
    });
    });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>
File remoto.php
<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>
La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax

venerdì 23 settembre 2011

jQuery - Effetti fading

Con effetto fading si intende quella trasformazione di un elemento della pagina HTML che, lavorando sull'opacità (che varia da 0 a 1), prococa la sua scomparsa o apparizione senza modificarne posizione e dimensione.

I metodi che jQuery mette a disposizione per effettuare il fading di un oggetto sono fadeIn(), fadeOut() e fadeTo().

Anche in questo caso come per i metodi relativi agli effetti grafici è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.
$("#div_fade").fadeIn(); // aumento dell'opacità dell'elemento con id "div_fade" fino alla sua visibilità totale

$("#div_fade").fadeOut("fast"); // diminuzione dell'opacità dell'elemento con id "div_fade" fino alla sua scomparsa totale con durata "fast" dell'effetto

$("#div_fade").fadeTo(1000, 0.50); // modifica dell'opacità dell'elemento con id "div_fade" fino al 50% in un tempo di 1 secondo

giovedì 22 settembre 2011

jQuery - Effetti di sliding

Gli effetti di sliding offrono la possibilità di muovere un elemento della pagina HTML a cascata verso l'alto, verso il basso o in modo "toogle".
I metodi che il framework mette a disposizione sono slideDown(), slideUp() e slideToogle().

Anche in questo caso come per i metodi show(). hide() e toogle() è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.

$("#div_mobile").slideDown(); // slide verso il basso dell'elemento con id "div_mobile"
$("#div_mobile").slideUp("fast"); // slide verso l'alto dell'elemento con id "div_mobile" con durata "fast"
$("#div_mobile").slideToogle(2000); // slide in modo alternato verso l'alto e verso il basso dell'elemento con id "div_mobile" con durata 2 secondi

mercoledì 21 settembre 2011

jQuery - Mostra e nascondi

Tra gli effetti grafici che il framework jQuery mette a disposizione dello sviluppatore i primi che troviamo danno la possibilità di mostrare, nascondere o l'alternare dei due effetti di un elemento strutturale della pagina.

Per mostrare un elemento viene utilizzato il metodo show().

$("p").show(); // mostra gli elementi "p" nascosti delle pagina

Per nascondere un elemento viene utilizzato l metodo hide().

$("p").hide(); // nasconde gli elementi "p" della pagina

Per alternare mostra e nascondi vine eutilizzato il metodo toggle().

$("p").toggle(); // mostra e nasconde in successione gli elementi "p" della pagina.

E possibile manipolare la durata temporale dell'effetto mostra o nascondi fornendo all'effetto i valori predefiniti "slow", "normal" e "fast" o il valore di durata in millisecondi.

$("p").show("slow"); // mostra gli elementi "p" nascosti delle pagina con durata slow
$("p").toggle(1000); // mostra o nasconde gli elementi "p" nascosti delle pagina con durata 1 secondo

Altri esempi

I esempio: cliccando sull'elemento con id "pulsante" modifica la visibilità dell'elemento "mostranascondi" con una durata dell'effetto di 2 secondi.
$("#pulsante").click(function () {
     $("#mostranascondi").toggle(2000); //2 secondi
});

venerdì 16 settembre 2011

jQuery - I filtri

Oltre ai selettori già visti jQuery mette a disposizione altri strumenti per migliorare e semplificare le operazione di ricerca degli elementi su cui operare; questi elementi sono detti filtri e possiamo in base all'oggetto del filtraggio:

Filtri tramite parole chiave e contenuti
Le parole chiave che possiamo utilizzare sono:
  • odd o even per selezionare gli elementi pari o dispari
  • first o last per lesezionare il primo o l'ultimo elemento
  • lt(n), gt(n) o eq(n) se si volgiono selezionare tutti gli elementi rispettivamente presecenti successivi o uguali all'ennesimo (n) elemento.
  • first-child o last-child seleziona il primo o l'ultimo figlio di un elemento
  • only-child seleziona gli elementi singoli
  • nth-child seleziona elementi figli in base al contenuto tra parentesi
  • not() seleziona elementi in base all'assenza di contenuti 
  • has(), contain(), hidden seleziona elementi in base a contenuti o attributi
Ogni parola chiave deve essere preceduta dal tag di riferimento e dal carattere ":"
// Seleziono l'ultima riga della tabella
$("tr:last"); 

// seleziona i figli dispari degli elementi "li" 
// contenuti nell'elemento "ul" con id "navglob"
$("ul#navglob li:nth-child(odd)");

// seleziono tutti gli elementi "li" che contengono 
// un link all'interno del'elemento con id "elenco"
$("#elenco li:has(a)");

// selezioni tutti i div nascosti
$("div:hidden");

// seleziono tutti i div che non appartengono alla 
// classe "commento"
$("div:not(.commento)"); 

Filtri tramite attributi
La selezione degli elementi viene basata sul valore degli attributi:
// seleziono gli elementi "a" con title "icona"
$("a[title='icona']");

// seleziono gli elementi "a" con title che inizia 
// con "icona"
$("a[title^='icona']"); 

// seleziono gli elementi "a" con title che 
// finisce con "icona"
$("a[title$='icona']"); 

// seleziono i link che non aprono nuove finestre
$("a[target!='_self']"); 

// seleziono i link che hanno un attributo "target" 
// impostato
$("a[target]"); 

// seleziono i link con title "icona" e contemporaneamente 
// con target "_blank" (selettori concatenati)
$("a[title='icona'][target='_blank']"); 

Filtri per elementi form
// seleziono tutti gli elementi password del form
$("input[type='password']"); 

// seleziono tutti gli elementi password del form
$(":password") 

venerdì 9 settembre 2011

jQuery - I selettori

Nel framework jQuery i selettori degli elementi del codice HTML possono per comodità essere suddivisi in due gruppi.
selettori di base utlizzano il tag name, l'id o la classe per individuare gli elementi.
I selettori gerarchici utilizzano l'organizzazione gerrchica delle pagina per individuare gli elementi.

Esempio di selettore di base:
$("a"); // selezione tutti i tag "a" della pagina;
$("#id_elemento"); // seleziono l'elemento con id "id_elemento";
$(".classe_elemento"); // seleziono gli elementi con classe "classe_elemento";

Esempio di selettori gerarchici:
$("#header a"); // seleziono tutti i tag a interni al div con id "header";
$("ul#navglob > li"); // seleziono tutti gli elementi li direttamente discendenti dal tag ul con id "navglob";
$("h1 + h2"); // seleziono tutti i tag h2 preceduti da h1:
$("id_elemento ~ div") // seleziono tutti i div adiacenti all'elemento con id "id_elemento"

In considerazione del fatto che il selettore più interno viene attivato prima e quindi che la selezione avviene da destra verso sinistra (scartando dall'insieme trovato con il primo criterio gli elementi che non soddisfano il secondo criterio) è bene impostare i selettori più significativi all'interno o a destra in modo da velocizzare le operazioni di selezione.

$("p#header strong"); // NO - Seleziono prima tutti gli elementi "strong" della pagina e poi li scarto tutti ad eccezione di "p#header".
$("strong ", $("p#header")); // SI - Seleziono l'elemento "p#header" e scarto tutti gli elementi interni non racchiusi in tag "strong".
$("p#header").find("strong"); // SI -

lunedì 5 settembre 2011

Codice su blogger con SyntaxHighlighter

SyntaxHighlighter è un plugin in javascript che consente di evidenziare porzioni di codice inserite in un una documento HTML o in un post.

L'inserimento di SyntaxHighlighter in un documento HTML richiede le seguenti operazioni:
  1. Scaricare i file dal sito http://alexgorbatchev.com/SyntaxHighlighter/ e caricarli sul web server.
  2. Linkare al documento i file principali shCore.js e shCore.css
  3. Linkare al documento i file relativi ai linguaggi utilizzati "brushes" (qui si trova la lista dei file-linguaggio disponibili)
  4. Includere i fogli di stile shCore.css e shThemeDefault.css
  5. Creare un tag con <pre> o <script> per ogni porzione di codice da evidenziare.
  6. Richiamare il metodo SyntaxHighlighter.all()
Vediamo più nel dettagio l'inserimento di SyntaxHighlighter nei post di Blogger:
  1. Accedere al pannello di gestione del blog, selezionare la voce "Modello" e quindi "Personalizza HTML"
  2. Una volta avuto accesso al codice HTML del modello, appena prima del tag "</head>" inserire il seguente codice:

  3.  
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
  4. Salvare quindi il codice HTML del modello personalizzato
  5. Inserire ora nel post la porzione di codice racchiusa dai tag <pre> e </pre> specificando il linguaggio usato nell'attributo di classe (in caso di codice html lo inseriremo tra i tag <pre class="brush:js"> e </pre> ).
Il sito di riferimento è http://alexgorbatchev.com/SyntaxHighlighter/ dove è possibile trovare anche le istruzioni di installazione in altre applicazioni.