Ajax Archives - Page 3 of 3 - Appunti e tutorial su front-end web technology

jQuery: parsing rss

Oct 192012

Questo tutorial è dedicato al parsing di un feed rss tramite jQuery.
Al caricamento del documento andremo a a caricare via ajax il file news.xml
e poi prepareremo la visualizzazione.

Trattandosi di una chiamata ajax useremo la tradizionale icona animata per avvisare del caricamento dati in corso.
Nell html predisponiamo un div nascosto via css:

<div id="loader"><img src=”http://www.lorenzodeambrosis.net/blog/tutorial/images/ajax_loader.gif” alt="" /></div>

Al document assegniamo la gestione della visualizzazione e della scompars del div in oggetto (che poi andrà posizionato al centro della pagina)

$(document)
.ajaxStart(function(){$(‘#loader’).show();})
.ajaxStop(function() {$(‘#loader’).hide();})

al caricamento invece inoltriamo la chiamata con il metodo .ajax():

$.ajax({
type:’GET’,
url:’data/news.xml’,
dataType:’xml’,
success:function(str_xml){

}
})

Per quanto riguarda la parte di visualizzaizone dei dati invece utilizzeremo le funzionalità tradizionali di jQuery di attraversamento del DOM.
Quindi come prima cosa andremo a cercare il tag “item” all’interno della stringa str_xml ottenuta in risposta e per ogni item andremo a caccia delle info contenute

$(str_xml).find(‘item’).each(function(){
…
})

Come prima cosa assegniamo delle variabili ottenute dall’estrazione del contenuto dai tag con il metodo .text(),
quindi $(this) rappresenta l’item sul quale ci troviamo, al suo interno andiamo alla ricerca del tag desisderato (.find())
e infine preleviamo il testo del tag


var titolo=$(this).find(‘title’).text();
var miolink=$(this).find(‘link’).text();
var description=$(this).find(‘description’).text();
var pubDate=$(this).find(‘pubDate’).text();
var category=$(this).find(‘category’).text();

A questo punto possiamo costruire la stringa html da appendere al contenitore target della visualizzazione:

var riga1=”+titolo+”;
var riga2=’<strong>‘+</strong>category<strong>+’</strong> – <em>‘+&lt;/em>pubDate&lt;em>+’</em>‘;
var riga3=”+description+”;

$(‘<div class=”item”></div>’).html(riga1+riga2+riga3).appendTo(‘#contenitore’)

Ecco l’esempio completo

Autocomplete con jquery UI, php e mysql

JQuery No Responses »

Nov 172011

Facciamo in modo che gli utenti non commettano errori nella compilazione dei nostri form. Dove possibile una strada da seguire è quella dell’autocomplete, ovvero forni resu ggerimenti “live” in modo che l’utente possa scegliere l’opzione desiderarata. Per fare quersto useremo jQuery UI, e per la parte server php e mysql.

Il database: una semplice tabella contenente le province italiane, a noi serviranno i campi sigla e nome.

A questo punto abbiamo bisogno di due file, uno sarà quello visualizzato dall’utente, il secondo sarà un file php che pescherà dal database i dati filtrati e li restituirà in formato json.

Il file html: due campi di input, il primo da compilare da parte dell’utente dove noi assoveremo la chiamata al server (quando avrà digitato il secondo carattere) e un campo dove scriveremo la sigla:


<input type=”text” id=”tag” name=”tag” value=”" />
<input type=”text” id=”tagid” name=”tagid” value=”" />

Nel tag head andremo a inserire:

1. il collegamento a jquery (preso dalla CDN di google)


<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js”></script>

2. il collegamento a jquery ui dalla stessa fonte


<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>

3. il tema css che applicheremo al nostro oggetto


<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css” />

A questo punto, al caricamento del DOM, associamo all’elemento che ha id tag la funzione autocomplete:


$().ready(function(){
$(‘#tag’).autocomplete();
})

e andiamo a personalizzarlo specificando:

minLength:2, ovvero almeno due caratteri prima di effettuare la chiamata

source: ‘autocomplete.php’ la nostra fonte di dati

la gestione dell’evento change


change:function(event,ui){
if(!ui.item){
$(this).val(”);
$(‘#tagid’).val(”);
return false;
}
},

e soprattuto la gestione dell’evento select


select:function(event,ui){
$(‘#tagid’).val(ui.item.id);
}

per scrivere il valore dell’id nel secondo campo.

Ultimo passaggio il file php:


error_reporting(0);
require(‘include/mysql.inc.php’);
$return_arr=array();
$nome=$_GET['term'];
$sql=’select nome, sigla from province where nome like “‘.mysql_real_escape_string($nome).’%” order by nome’;
$fetch=mysql_query($sql);
while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
$row_array['value']=$row['nome'];
$row_array['id']=$row['sigla'];
array_push($return_arr,$row_array);
}
mysql_close($conn);
echo json_encode($return_arr);

l’include contiene la connessione al database, dichiariamo l’array che useremo per raccogliere i dati, leggiamo la variabile get passata dal form e la usaimo all’interno della clausola where come filtro.

Mettiamo i risultati in un array che stampiamo nel formato json per inviarli alla pagina che ne ha fatto richiesta.

Ecco l’esempio al lavoro.

Newer Entries