Datemi retta, vale la pena studiarsela!

$().ajaxStop($.unblockUI); 

function test() {
	$.ajax({ url: 'wait.php', cache: false });
} 

$(document).ready(function() {
	$('#pageDemo1').click(function() {
    	$.blockUI();
        test();
}); 

Facile no?

[Via FeedMyApp]

1. How to implement "post to wall" using jQuery and PHP
2. Ajax forms with jQuery
3. Building a jQuery image scroller
4. Tabbed content area with jQuery
5. jQuery tutorials for designers
6. Smooth animated menu with jQuery
7. Create a "mootools homepage" page with jQuery
8. Creating accessible charts with canvas and jQuery
9. CODA popup bubbles
10. Simple tabs with jQuery

Ecco, adesso avete qualcosa da fare per il week-end

Oggi vediamo come fare la stessa cosa con jQuery, utilizzando l'elemento "sortable" di jQuery UI.

Per prima cosa creiamo la tabella di appoggio nel nostro database. Chiamiamola "elementi". Conterrà alcune informazioni e un campo ordine che definirà l'ordine (cosa se no?) degli elementi al suo interno.

CREATE TABLE `elementi` (
`id` bigint(20) unsigned NOT NULL auto_increment,
`elemento` text NOT NULL,
`ordine` int(11) NOT NULL,
PRIMARY KEY  (`id`)
)

Riempiamo la nostra tabella con dei dati di esempio e prepariamo il codice PHP che stamperà la nostra lista: suppongo che sappiate già come connettervi ad un database MySQL da PHP. Se non lo sapete guardate qua.

echo "<ul id='sortable-list'>";

$sql = "SELECT * FROM elementi ORDER BY ordine ASC";
$result = mysql_query($sql,$dbConnessione);

while($row = mysql_fetch_assoc($result))
{
	echo "<li id='item_{$row["id"]}' class='listitem'>{$row["elemento"]}</li>";
}

echo "</ul>";

Passiamo al codice javascript necessario a fare la "magia". Utilizzeremo jQuery 1.2.6 e jQuery UI che ci permette di utilizzare l'elemento sortable. Cosa faremo di preciso? Ad ogni "update" della lista aggiorneremo via AJAX  il campo ordine per ogni elemento nella nostra tabella, in modo da riportare ogni nostra azione all'interno del nostro database.

Abbiamo assegnato alla nostra lista non ordinata l'id "sortable-list" per poterla "agganciare" in jQuery. Il codice utilizzato è molto semplice: lo analizzeremo comunque nei dettagli.

$(document).ready(function() {
	$("#sortable-list").sortable({
		axis:"y",
		cursor:"n-resize",
		stop:function() {
			$.ajax({
			type: "POST",
			url: "ordina-struttura.php",
			data: $("#sortable-list").sortable("serialize")	})
		}
	})
});

Tradotto in prosa: al caricamento della pagina rendiamo l'elemento "sortable-list" ordinabile, con gli elementi trascinabili solo sull'asse Y e all'azione assegnamo un cursore a forma di freccia "nord-sud" (lo vedrete meglio nell'esempio).

Allo "stop" del nostro drag&drop fai una richiesta POST via AJAX alla pagina ordina-struttura.php passando come unico dato la struttura del nostro sortable "serializzata".

Cosa contiene ordina-struttura.php? La query che va ad aggiornare il campo ordine nel nostro database. Stampatevi con un print_r($_POST) l'array per vedere cosa contiene se non capite bene il codice sottostante.

foreach($_POST["item"] as $key=>$value)
{
	$sql = "UPDATE elementi SET ordine = {$key} WHERE id = {$value}";
	$result = mysql_query($sql,$dbConnessione);
}

Ecco qua: la nostra lista sarà salvata nel database pronta per essere utilizzata come più ci piace.

L'esempio come dicevo prima lo trovate a questo indirizzo, se avete domande ci sono i commenti. Sono fatti apposta.

Magari a qualcuno può tornare utile

How to get selected items in a multiple select
Con una semplice funzione potete ottenere un array contenente i valori degli elementi selezionati all'interno di una select con attributo "multiple".

jQuery select box manipulation
Piccolo vademecum sulla gestione delle select con jQuery.

Add/Remove Options Via DOM
Ottimo tutorial (con esempio funzionante) che spiega come aggiungere o eliminare elementi da una select.

Ve li ricordate i tempi in cui c’erano solo prototype e script.aculo.us?

1. jQuery sparklines
2. jGrowl
3. jQuery File Tree
4. 50 jQuery examples
5. Table Sorter
6. jQuery for JavaScript programmers
7. 15 days of jQuery
8. shadowbox.js
9. Masked Input Plugin
10. Improve your jQuery
11. Remy Sharp’s blog
12. Ajax multifile upload
13. jQuery liScroll
14. Password strength indicator and generator
15. Shoutbox with PHP & jQuery
16. The definitive guide to creating a jQuery plugin
17. Photo admin site with jQuery
18. jCarousel
19. jQuery UI
20. jQuery i18n plugin

Vado a creare una categoria “Wordpress” su questo blog, che Wolly pressa

Taffy DB è appunto un qualcosa di molto simile ad un database SQL che gira interamente nel browser (è scritto in JavaScript).

Potete creare "collezioni" (qualcosa di simile alle tabelle di un database) ed eseguire tutte quelle query che di solito si fanno su un DBMS. Selezione, eliminazione, update, inserimento, ecc...

Vediamo qualche esempio, così si capisce meglio.

Poniamo di voler creare una collezione di libri: cominciamo così inserendo 3 libri:

var libri = new TAFFY(
[
{titolo:"IT",
autore:"Stephen King",
letto:"Sì", prezzo:20},
{titolo:"WordPress for dummies",
autore:"Lisa Sabin-Wilson",
letto:"No", prezzo:23},
{titolo:"Va dove ti porta il cuore",
autore:"Susanna Tamaro",
letto:"No", prezzo:12}]
)

Fatto questo possiamo ad esempio cercare i libri che costano più di 13 euro:

libri.find({prezzo:{greaterthan:13}});

Ci verrà ritornato un array contenente gli indici dei libri che "matchano" la nostra query.

Per fare una query basta chiamare il metodo find() e passargli un oggetto contenente i nostri parametri. Un po' come quando includiamo le condizioni in una query aggiungendo la parola chiave WHERE

Trovate un esempio qui, il sorgente è ovviamente di facile interpretazione. Cliccate sui link presenti nel file per eseguire le query. La documentazione ufficiale è come sempre un ottimo punto dai partenza per chi vuole saperne di più...

P.s.
Era un bel po' che non scrivevo qualcosa di serio, no?

Sarà possibile lavorare con JavaScript per interagire con files, database, ecc...

Da tenere d'occhio. Io intanto ve lo butto lì, poi magari ci sarà un bel approfondimento. Interessante anche il post su OSS-Blog.

Perché? Semplice. La "colpa" è tutta della "same origin policy", che per farla breve:

E' stata introdotta come meccanismo di protezione in modo da isolare tra loro aplicazioni web provenienti da domini diversi (assumendo che domini diversi stia per creatori diversi): questo per evitare contatti con domini a noi ignoti e pertanto potenzialmente pericolosi

E-time

La "same origin policy" è un'importantissima misura di sicurezza in ambito web (addirittura risale ai tempi di Netscape 2.0), ma a volte può essere fastidiosa: per aggirarla ultimamente si sono diffusi diversi script (solitamente basati su PHP e librerie cURL) che fanno da "proxy" per il recupero di dati: la richiesta AJAX viene fatta al proxy presente sul nostro stesso dominio che si occuperà di "scaricare" il risultato e rigirarlo al nostro JavaScript.

Uno di questi script (scritto in PERL) è Ajax-Cross-Domain.

ACD (per abbreviare) permette di effettuare chiamate AJAX da un dominio verso un altro, senza doversi preoccupare della "same origin policy". L'installazione è molto semplice e i risultati sono assicurati, l'esempio fornito (che richiamata il sorgente HTML dell'homepage di Google) è facile da capire e riadattare ai nostri progetti.

Aptana, IDE gratuito dedicato allo sviluppo web si aggiorna. Le novità più importanti riguardano il supporto migliorato al PHP: ottime le migliorie apportate per quanto riguarda il "code assist" e la colorazione del codice.

Come sempre è inarrivabile il supporto per i frameworks javascript più utilizzati, ora presenti nelle loro ultimissime versioni. Tra gli altri potete utilizzare: prototype, jquery, mootools, rico, script.aculo.us.

Non conoscete Aptana? Beh, è ora di provarlo!!!

• Figura richiesta: Web Developer (JS & AJAX in primis)
• Paga: Circa 240.000 $ per un anno, esentasse
• Training di 2 settimane in Washington D. C.

C'è un unico piccolo particolare. Il vostro datore di lavoro sarà il Dipartimento Della Difesa USA, mentre il lavoro è in IRAQ. Si tratta di sviluppare una web application su un database pre-esistente, che verrà poi utilizzata in una delle più grosse basi americane su suolo iracheno. Se sapete anche usare un fucile è il lavoro che fa per voi.

Quasi ci avrei fatto un pensierino, peccato, bisogna essere cittadini USA.

[Via Ajaxian]

1. AHAH (Asynchronous HTML and HTTP)
2. 40+ Tooltips Scripts With AJAX, JavaScript & CSS Tooltips per tutti i gusti
3. MiniAJAX Showcase di applicazioni basate su AJAX
4. ForkJavaScript
5. MooTorial Tutorial completo sul framework MooTools
6. Ajax Chat with the Zend Framework Altro completissimo tutorial
7. Database-enabled Ajax with PHP
8. 15 days of jQuery
9. Degradable Ajax Form Validation dagli autori di Wufoo un completissimo articolo sulla validazione di moduli in JavaScript
10. JavaScript SOAP Client (Italiano!)

La documentazione è abbastanza completa, dategli un'occhiata...

Per la serie "Oltre Wordpress"... Ecco Lingua! Lingua è un CMS per blog basato su PHP/MySQL, e AJAX. E' pensato per essere estremamente flessibile, rimanendo allo stesso tempo ultra leggero. L'interfaccia è un po' particolare: i comandi compaiono in alto nella pagina del blog e i post vengono scritti sul blog stesso, praticamente in diretta. Il tutto è condito con abbondati dosi di effetti JavaScript/AJAX.

Non c'è quindi separazione tra pannello admin e blog. La cosa è un po' spiazzante all'inizio, ma la comodità è innegabile. Mancano ancora molte features e migliorie, ma il progetto merita un'occhiatina, Magari è più fuffa che sostanza, ma chissà...