|
Programmazione & Co.
|
|
Martedì 21 Febbraio 2012 19:57 |
|
Se avete letto questo articolo su AJAX avete visto come sia possibile creare codice cross-borwser e in parte riutilizzabile per effettuare chiamate AJAX attraverso Javascript e PHP.
Se vedete però il codice scritto non è proprio poco per delle semplici chiamate.
Se già utilizzate jQuery per altre cose vale di sicuro la pena usare le funzioni AJAX integrate.
Questo soprattutto perchè possiamo scrivere codice cross-browser con molte meno righe.
E non è poco....
Una descrizione delle API AJAX di jQuery le trovate qua.
Le opzioni più utili e importanti sono:
- type -> indica il tipo di richiesta (GET o POST)
- dataType -> il tipo di risposta che ci aspettiamo (HTML, XML, JSON.....)
- url -> del file lato server da interrogare
- data -> eventuali valori da passare in querystring
- success -> cosa fare in caso di richiesta eseguita con successo
Io ho messo su una funzione che poi richiamo tramite link:
<a href="javascript:creaStorico('2012-02-20 14:22:17')">2012-02-20 14:22:17</a>
Richiamo la funzione creaStorico passandogli una data.
|
|
Ultimo aggiornamento Martedì 21 Febbraio 2012 20:14 |
|
|
Programmazione & Co.
|
|
Lunedì 16 Gennaio 2012 10:38 |
|
Come si può evincere dal nome jQuery Mobile è un framewrok basato su jQuery indirizzato al mobile.
Molto semplice da usare, ha già a disposizione alcuni temi che comunque possiamo modificare.
Le pagine sono scritte in semplice HTML.
Per cominciare scaricate jQuery e la relativa libreria mobile.
La pagina base è questa:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Anatomy of a Page</title>
<link rel="stylesheet" href="/site/<a href="view-source:http:/code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">jquery.mobile-1.0.min.css</a>" />
<script src="/site/<a href="view-source:http:/code.jquery.com/jquery-1.6.4.js">/jquery-1.7.1.js</a>"></script>
<script src="/site/<a href="view-source:http:/code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">jquery.mobile-1.0.min.js</a>"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
</body>
</html>
Questa è una struttura base; come vedete quello che cambia rispetto a una pagina classica sono gli attirbuti specifi dei vari div.
Il data-role page è obbligatorio; gli altri no in quanto se non vi servono header e footer potete anche ometterli.
Una cosa bella è che una semplice pagina può contenere più pagine navigabili.
|
|
Ultimo aggiornamento Lunedì 16 Gennaio 2012 11:05 |
|
Programmazione & Co.
|
|
Giovedì 29 Dicembre 2011 11:30 |
|
La necessità è questa: nelle input di un form permettere la scrittura solo dei numeri.
La cosa però è un pò diversa dalla classica validazione di un form.
Cioè, non deve comparire un messaggio di errore quando si fa il submit del form, ma non deve essere possibile scrivere dentro alla input nient'altro che un numero.
Dentro alla nostra/e input richiamiamo l'evento onkeypress:
<input type="text" name="qt_rigord" value="" onkeypress="return soloNumeri(event);" />
Qualsiasi nome, id o class mettiate non importa perchè noi passeremo alla funzione solo l'evento; ci penserà la funzione a prendere il tipo di tasto digitato e interrompere o meno l'esecuzione.
|
|
Ultimo aggiornamento Giovedì 29 Dicembre 2011 11:43 |
|
Programmazione & Co.
|
|
Domenica 20 Novembre 2011 16:28 |
|
Mi sono acorto che quando apri alcuno form la prima casella di testo è selezionata; in altri no.
Girovagando ho capito che la cosa è facilmente ottenibile usando la funzione focus() di Javascript.
Vediamo quindi di mettere su una piccola funzione che imposta il focus sul componente che gli dite voi.
Prima di tutto nell'header create una funzione che richiede un parametro:
<script type="text/javascript">
function setFocus(id) {
document.getElementById(id).focus();
}
</script>
La funzione cerca semplicemente l'ID che gli passiamo tramite parametro.
|
|
Ultimo aggiornamento Domenica 20 Novembre 2011 16:35 |
|
Programmazione & Co.
|
|
Domenica 13 Novembre 2011 15:04 |
|
Mi sto dedicando un pò più approfindatemente ad AJAX in quanto mi servirà per un lavoro che sto facendo per un'azienda.
Qui vediamo un semplce script facilmente realizzabile e soprattutto multi-borwser.
Prima di tutto create un file js; io l'ho chiamato ajax.js (che fantasia eh?).
Includetelo nell'head della pagina a cominciamo a scrivere.
Il file si comporrà di varie funzioni.
var xmlHttpObj = createXmlHtttpRequest();
function createXmlHtttpRequest() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
var XmlHttpVersions = new Array(
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActivexObject(XmlHttpVersions[i]);
} catch(e) {}
}
}
if(!xmlHttp) {
alert("Errore durante la creazione dell'oggetto XMLHttpRequest");
} else {
return xmlHttp;
}
}
Prima di tutto memoriziamo in una variabile, visibile a tutto il file, un oggetto di tipo XMLHttpRequest o ActivexObject.
Nella funzione sottostante creiamo appunto l'oggetto a seconda che sia un browser Internet Explorer (ActivexObject) o no (XMLHttpRequest).
|
|
Ultimo aggiornamento Domenica 13 Novembre 2011 15:22 |
|
Programmazione & Co.
|
|
Sabato 12 Novembre 2011 11:53 |
|
Dopo aver visto come implementare il Facebook Like vediamo come commentare su FB direttamente dal vostro sito.
Cominciamo inserendo questo (che se avete implentato il like dovreste gia avere):
http://connect.facebook.net/en_US/all.js#xfbml=1</a>">
A questo punto scegliete una posto nella pagina dove mettere il box dei commenti e aggiungete questo:
|
|
Ultimo aggiornamento Sabato 12 Novembre 2011 12:00 |
|
Programmazione & Co.
|
|
Martedì 08 Novembre 2011 14:46 |
|
Ormai quasi tutti i siti hanno il cosidetto Facebook Like Button, piccolo tasto che permette di fare il like delle pagine direttamente dal sito.
Ci sono parecchi modo per aggiungere il like:
Io ho scelto il secondo.
xfbml è un linguaggio di markup creato dagli sviluppatori di Facebook.
E' molto semplice da usare.
Prima di tutto richiamiamo le librerie Javascript nell'head della pagina:
<script type="text/javascript" src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
Volendo possiamo usare un'altra lingua; ad esempio l'inglese mettendo en_US al posto di it_IT.
Come vede alla fine richiamiamo anche xfbml.
|
|
Ultimo aggiornamento Martedì 08 Novembre 2011 15:01 |
|
Programmazione & Co.
|
|
Martedì 18 Ottobre 2011 11:53 |
|
Stampare una pagina con Javascript è molto semplice: basta mettere un link del genere:
<a href="javascript:window.print();">PRINT</a>
Il problema però è che così ti stampa sempre tutta la pagina!
Nel mio caso invece volevo stampare una cosa precisa: una foto.
Nello specifico la foto che stavo visualizzando in overlay usando la galleria Lightbox.
Usando quel link mi stampava sia l'immagine che tutto ciò che compariva sotto all'overlay.
Come fare?
Usando i CSS.
In pratica dovete creare un CSS da includere usando come media="print".
Quindi nell'head della pagina:
<head>
<link type="text/css" rel="stylesheet" href="/site/template/css/style.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/site/template/css/print.css" media="print" />
</head>
Nel foglio andrete a decidere cosa stampare.
|
|
Ultimo aggiornamento Domenica 23 Ottobre 2011 10:33 |
|
Programmazione & Co.
|
|
Venerdì 05 Agosto 2011 08:59 |
|
In più articoli ho menzionato a come fare per selezionare tutte le checkbox di un form contemporanemante usando Javascript.
Oggi vi spiego come fare.
Prima di tutto guardatevi questo esempio:
<?php
echo '<table id="example" class="display"><thead>';
echo '<th><a href="javascript:selectAll();">Select All</a></th>';
echo '<th>NOME</th>';
echo '<th>COGNOME</th>';
echo '<th>EMAIL</th>';
echo '<th>DATA DI REGISTRAZIONE</th>';
echo '<th>DATA DI NASCITA</th>';
echo '<th>NOTE</th>';
echo '<th></th></thead>';
echo '<tfoot>';
echo '<th><a href="javascript:selectAll();">Select All</a></th>';
echo '<th>NOME</th>';
echo '<th>COGNOME</th>';
echo '<th>EMAIL</th>';
echo '<th>DATA DI REGISTRAZIONE</th>';
echo '<th>DATA DI NASCITA</th>';
echo '<th>NOTE</th>';
echo '<th></th></tfoot>';
foreach (showUtenti() as $row) {
echo '<tr><td><input type="checkbox" name="check[]" value="' . $row['utente_email'] . '" /></td>';
echo '<td>' . $row['utente_nome'] . '</td>';
echo '<td>' . $row['utente_cognome'] . '</td>';
echo '<td>' . $row['utente_email'] . '</td>';
echo '<td>' . $row['utente_reg'] . '</td>';
echo '<td>' . $row['utente_data'] . '</td>';
echo '<td>' . $row['note'] . '</td>';
}
echo '</table>';
?>
</form>
Questo scriptino PHP estrapola i dati da un db eseguendo una query con la funzione showUtenti(), e mette i dati in tabella.
|
|
Ultimo aggiornamento Domenica 23 Ottobre 2011 10:38 |
|
Programmazione & Co.
|
|
Lunedì 04 Luglio 2011 13:32 |
|
jQuery UI è la libreria jQuery per la gestione della User Interface (UI).
Ha molti componenti interessanti, e di uno ho già parlato.
Oggi invece affrontiamo il Datepicker, che ci aiuta a inserire la data.
Questo può essere molto utile per il formato giusto, che deve essere allineato a quello del db dove salviamo la data.
Nel mio caso uso un db MySQL con un campo Date che ha questa forma: yyyy-mm-dd.
Prima di tutto dobbiamo scaricare jQuery e jQuery UI.
Sul secondo possiamo anche sceglliere il colore della grafica e verrà scaricato anche un CSS.
Poi dobbiamo richiamare le librerie e il CSS:
<link rel="stylesheet" href="/site/../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="/site/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/site/lib/jquery-ui-1.8.14.custom.min.js"></script>
Una volta fatto questo la pagina dovrà sarà simile a questa:
|
|
Ultimo aggiornamento Domenica 23 Ottobre 2011 10:39 |
|
Programmazione & Co.
|
|
Venerdì 17 Giugno 2011 14:28 |
|
LiveValidation libreria Javascript che serve per validare i form in tempo reale.
Può essere usato in modalità stand-alone o come plugin di Prototype.
Io ho optato per la prima soluzione.
Scaricate la libreriria da qua e aggiungetela alla pagina:
<script type="text/javascript" src="/site/lib/livevalidation.js"></script>
Le opzioni che ha sono molte, come anche i validatori:
- campo vuoto
- email
- numeri
- ecc
Qui trovate vari esempi.
Io vi mostro quelli che ho usato io nel mio form:
<form name="comments-form" action="">
<p>
<label>Email</label>
<input type="text" name="email" value="" size="22" id="com_email" />
<script type="text/javascript">
var campo = new LiveValidation('com_email', { validMessage: "\u221a" });
campo.add(Validate.Presence);
campo.add(Validate.Email);
</script>
</p>
<p>
<textarea name="text" cols="40" rows="8" id="com_text"></textarea>
<script type="text/javascript">
var campo = new LiveValidation('com_text', { validMessage: "\u221a" });
campo.add(Validate.Presence);
</script>
</p>
<div>
<input type="submit" value="Invia il tuo commento" name="sumbit-comment" />
</div>
</form>
Prendiamo il campo email:
|
|
Ultimo aggiornamento Domenica 23 Ottobre 2011 10:40 |
|
|
<< Inizio < Prec. 1 2 Succ. > Fine >>
|
|
Pagina 1 di 2 |
RSS | matteo.ferrone@yahoo.it | Your IP Address is: 38.107.179.206 |
Javascript - AJAX
