JQuery Archives - Page 4 of 6 - Appunti e tutorial su front-end web technology

jQuery: upload file + php

Feb 032013

Siamo oggi di fronte all’annosa questione: come fare l’apload di un file usando un sisstema un po’ moderno e intelligente ma facilemente integrabile nei binari gà noti della programmazione php.

La soluzione proporsta prevede l’uso del celebre plugin di jQuery uploadify

Da questo sito scaricheremo i files che ci servono dalla pagina di download, ovvero il plugin, il suo css, un file swf per la realizzazione della prgogress bar e, già che ci siamo, il file php per spostare il file nella cartella di destinazione finale. Il nostro scopo sarà consentire all’utente la scelta e l’upload del file prima e indipendetemente dall’invio del form, gestiremo la risposta per sapere il nome del file caricato.

Partiamo quindi dalle intestazioni del file html:


<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="js/jquery.uploadify.min.js"></script>

Proseguiamo con il form:


<form>
<fieldset>
<legend>File upload</legend>
<label for="file_upload_1">File</label><br>
<input type="hidden" id="file_upload" name="file_upload">
<input type="file" id="file_upload_1" name="file_upload_1"><br><br>
<input type="submit">
</fieldset>
</form>

Useremo il campo nascosto per memorizzare il nome del file così come verrà salvato.

Per attivare il controllo sull’input file procederemo in questo modo:


$(function() {
$("#file_upload_1").uploadify({
height        : 30,
swf           : 'uploadify.swf',
uploader      : 'uploadify.php',
width         : 120,
onUploadSuccess : function(file, data, response) {$('#file_upload').val(data);}
});
});

La maggiorn parte delle informazioni dovrebbero essere evidenti, la parte forse pià interessante è l’onUploadSuccess che scrive nell’input hidden, per il resto sono i percorsi dei due file scaricati.

Per quanto rigarda il file php, il codice è il seguene e l’unica personalizzazione riguarda il path di destinazione dei files, poi lo si potrà personalizzare e integrare con gli opportuni controlli come meglio si crede:


$targetFolder = '/blog/tutorial/upload'; // Relative to the root
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo $_FILES['Filedata']['name'];
} else {
echo 'Invalid file type.';
}
}

L’esempio

jQuery: filtrare elementi con filter

JQuery No Responses »

Feb 012013

Un metodo molto rapido per filtrare elementi presenti nella nostra pagine è usare filter()

Se nella nostra pagina abbiamo una lista di elementi, possiamo filtrare gli elementi pari per esempio

e poi applicare un attributo di stile oppure realizzare qualsiasi operazione sulla selezione:


<script>
$(document).ready(function(e) {
$('li').filter(':odd').css({'background-color':'#FF0000'})
});
</script>
</head>
<body>
<ul>
<li>Primo</li>
<li>Secondo</li>
<li>Terzo</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sesto</li>
<li>Settimo</li>
</ul>

L’esempio

jQuery: add, aggiungere elementi alla selezione

JQuery No Responses »

Jan 302013

Quando dobbimao selezionare più elementi in una pagina possiamo procedre con la lista dei selettori oppure usare il metodo add fi jQuery che combina i risultati delle singole query.

Se prendiamo questa pagina html


<body>
<div>Testo del div</div>
<p>Testo del p</p>
<span>Testo del span</span>
<div>Testo del div</div>
<p>Testo del p</p>
<span>Testo del span</span>
</body>

per fare blu lo sfondo ai tag p e span possiamo procedere selezionandoli in questo modo:


$(document).ready(function(e) {
$('p').add('span').css({'background-color':'#FF0000'})
});

Il risultato

jQuery UI: spinner

Google Maps, JQuery No Responses »

Jan 212013

Che cos’è uno spinner? Uno spinner è una funzione che migliora un input di testo per l’immissione di valori numerici, con l’aggiunta della gestione dei tasti su / giù e il tasto di gestione freccia.

In questo breve esempio predisporremo due campi di input che conterranno le coordinate in cui centrare un google maps, modificanto le coordinate dall’input migliorato dallo spinner sposteremo la mappa.

Iniziamo ad inserire nel nostro file html tutte le librerie di cui abbiamo bisogno, jquery, jquery ui, il suo css, google maps, il plugin di jquery mousewheel:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Poi passiamo ad inserire nell’html della pagina i due campi di input e il div che ospiterà la mappa:


<label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797">
<br />
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="9" >
<div id="map"></div>

Lo stile della mappa, giusto le dimensioni:


#map {width:500px;height:500px;}

Ora entriamo nel vivo: come prima cosa al document ready prepariamo una funzione che restituisca latitudine e longitudine prese dai dui input


function latlong() {
return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
}

Come secondo step creiamo una funzione per centrare la mappa in base al valore restituito dalla funzione precedente:


function position() {
map.setCenter( latlong() );
}

Creiamo la mappa nel modo consueto


var map = new google.maps.Map( $("#map")[0], {
zoom: 8,
center: latlong(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

E l’ultimo elemento cruciale: trasformiamo i due campi di input con lo spinner e predisponiamo l’incremento con il parametro step e poi agli eventi change e stop riposizioniamo la mappa con la funzione position()

$( "#lat, #lng" ).spinner({
step: .001,
change: position,
stop: position
});

L’esempio

jQuery: store data

HTML5, JQuery No Responses »

Jan 132013

Come abbiamo visto nel post precedente possiamo leggere il contenuto di un attributo data-introdotto da html5.

Possiamo, ovviamente, anche scrivere i nostri contenuti tramite jQuery.

Partiamo dall’html del post precedente leggermente modificato:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Using data() for HTML5 data- attributes</title>
</head>
<body>
<p id="test-data">Paragrafo contenitore</p>
<button id="scrivi">Scrivi</button>
<button id="leggi">Leggi</button>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
...
</script>
</body>
</html>

La funzione per leggere è la medesima del post precedente, per scrivere invece useremo sempre il metodo data e passeremo due valori separati da virgola, il primo sarà il nome dell’attributo da aggiungere a data- e il secondo il valore:


$(document).ready(function() {
$('#leggi').click(function() {
alert('Contenuto: ' + $('#test-data').data('mioattributo'));
});
$('#scrivi').click(function() {
$('#test-data').data('mioattributo','prova');
});
});

L’esempio

" data-image="" data-button=""> Share

jQuery data

HTML5, JQuery No Responses »

Jan 112013

Uno degli aspetti interessanti di HTML5 è l’introduzione dell’attributo data- che può essere personalizzato dallo sviluppatore, Un’opzione interessante potrebbe essere quella di inserire delle informazioni in questo attributo che possono essere ripescate in un dato momento tramite jQuery. Prepariamo l’html:


<p data-myattribute="alcune parole a caso" id="test-data">
Fai click sul bottone per leggere il contenuto dell'attributo data.</p>
<button>Get data attribute</button>

Quello che ci interessa è andare a leggere il contenuto dell’attributo data-myattribute, che ovviamnete possiamo chiamare a piacere mantenendo il prefisso data-

Ora intercettiamo il click e procediamo con la lettura:


$(document).ready(function() {
$('button').click(function() {
alert('The data is: ' + $('#test-data').data('myattribute'));
});
});

Il metodo data quindi ci permette di accedere al contenuto del nostro attributo.

L’esempio

jQuery length

JQuery No Responses »

Jan 092013

Quanti saranno i paragrafi presenti nella nostra pagina? O in generale quanti elementi di un determinato tipo abbiamo nella nostra selezione? Per rispondere al quesito useremo la funzione length di jQuery.

Prepariamo l’html:


<h2>Fai click sul bottone per avere il numero degli elementi.</h2>
<p>Primo</p>
<p>Secondo</p>
<p>Terzo</p>
<button id="get-length">Get length</button>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

Quindi intercettiamo il click sul bottone e facciamo restituire da un alert il valore che ci interessa:


$(document).ready(function() {
$('#get-length').click(function() {
alert('Length = ' + $('p').length);
});
});

L’esempio

jquery grep()

JQuery No Responses »

Jan 072013

In questo post cercheremo di illustrare la funzione grep() di jQuery che serve per fare delle ricerche all’interno di un array avendo come risultato un nuovo array.
Nell’html della pagina prepareremo due semplici contenitori, uno per il primo array e uno per il secondo array che contiene i nomi dei mesi che al loro interno hanno la lettera r.


La funzione grep()
 <h2>I mesi</h2>
 <h2>Mesi che nel nome contengono la lettera r</h2>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
 ...
</script>

La parte centrale del nostro esercizio è costituita dallo script dove abbiamo la definizione dell’array dei mesi, la funzione grep che creerà l’array rInMonth andando a cercare dentro l’array arr i nomi che hanno almeno una r, il risultato sarà un altro array.
A questo punto sarà sufficiente iniettare nei due contenitori con il metodo html gli elementi dell’array uniti a un br

 $(document).ready(function() {
 var arr = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre',  'Novembre', 'Dicembre'];
 var rInMonth = $.grep(arr, function(value, index) {return value.indexOf('r') >= 0;});
 $('#all-months').html(arr.join('
 '));
 $('#vitamin').html(rInMonth.join('
 '));
 });

L’esempio

jQuery index

JQuery No Responses »

Jan 042013

In questo breve post vedremo la funzione index che useremo per farci restituire l’indice dell’elemento su cui faremo click. Prepareremo quindi una pagina html con 5 paragrafi:


<!DOCTYPE html>
<html lang="en">
<head>
<title>La funzione index()</title>
</head>
<body>
<h1>Fai click sul paragrafo per vedere l'indice dell'elemento</h1>
<p>Primo</p>
<p>Secondo</p>
<p>Terzo</p>
<p>Quarto</p>
<p>Quinto</p>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
...
</body>
</html>

Tramite il nostro jQuery andremo ad associare il click sui paragrafi alla visualizzazione di un alert che mostrerà l’indice dell’elemento su cui abbiamo cliccato (this)


<script>
$(document).ready(function() {
$('p').click(function() {
alert('L\'Indice del paragrafo clickato: ' + $(this).index())
});
});
</script>

L’esempio

La funzione index()" data-image="" data-button=""> Share

jQuery array con map()

JQuery No Responses »

Jan 022013

Una funzione di jQuery per manipolare gli array è map().

map() dovrebbe essere utilizzato al posto di each ogni volta che vogliamo restituire un array, per esempio per convertirlo in una stringa JSON.

Iniziamo dall’html:

<!DOCTYPE html>
<html lang="it">
<head>
<title>La funzione map()</title>
</head>
<body>
<h2>Esempio d'uso della funzione map()</h2>
<p id="before">Prima di map():</p>
<p id="after">Dopo map():</p>
</body>
</html>

Nel codice javascript prepariamo un array e lo stampiamo come JSON,

successivamente lo manipoliamo con map() e lo ristampiamo sempre con JSON


<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
var arr = [1, 2, 3, 4, 5];
$('#before').append(JSON.stringify(arr));
arr = $.map(arr, function(value, index) {
return 'fai qualcosa con ' + value;
});
$('#after').append(JSON.stringify(arr));
});
</script>

L’esempio

" data-image="" data-button=""> Share

Older Entries Newer Entries