Una pagina dinamica

Usiamo ora jQuery per creare una pagina dinamica in cui visualizzare il nostro "stato", tipo come fanno Facebook e Twitter.

Provate qui la pagina prima di realizzarla:

1. Inserite un messaggio nel box e notate che man mano che scrivete l'indicazione con il numero di caratteri rimanenti diminuisce.
2. Cliccate sul bottone post per pubblicare il vostro status. Qusto verrà aggiunto subito sotto il box.

Partiamo ora dall'esempio senza Javascript e scriviamo il nostro codice.

Creiamo un nuovo post

Ecco cosa troviamo nel codice HTML:

• Il box corrisponde ad un selettore '.status-box'
• Il bottone per sottomettere il post corrisponde ad un selettore '.btn'
• I nuovi post verranno aggiunti all'elemento <ul class="posts">..</ul>

Ora scriviamo il codice per:

• Selezionate il bottone Post tramite il selettore .btn $('.btn')
• Invocate su di esso il metodo .click() con all'interno il codice di una funzione function() { .. }

All'interno di tale funzione

• Creiamo una variabile var denominata post per memorizzare il messaggio che viene scritto, messaggio a cui possiamo accedere andando a recuperare il contenuto dell'elemento $('.status-box) con il metodo .val()

La riga di codice risulta quindi var post = $('.status-box').val();

• Creiamo ora un elemento li $('<li>')
• Ed eseguendo su di esso il metodo .text(post) copiamoci all'interno il testo del messaggio scritto nel box.
• Ora, per inserire l'elemento li che abbiamo creato all'interno della pagina utilizziamo (in catena) il metodo .prependTo('.posts') per inserirlo come primo elemento del blocco <ul class="posts">..</ul>

La riga di codice risulta quindi $('<li>').text(post).prependTo('.posts');

Ancora una cosa, dopo che il messaggio è stato aggiunto alla pagina, occorre cancellare il box:

• Aggiungiamo quindi un'ultima riga di codice in cui impostiamo il contenuto dell'elemento di classe status-box $('.status-box) alla stringa vuota con il metodo .val('') (attenzione notate i doppi apici singoli).

La riga di codice risulta quindi $('.status-box').val('');

Alla fine il codice risultante dovrebbe essere come indicato qui.

Contiamo i caratteri rimasti

Ora pensiamo a come contare il numero di caratteri rimanenti mentre digitiamo il testo:

1. Dobbiamo contare i caratteri immessi ogni volta che viene premuto un tasto e si è all'interno del box
2. Dobbiamo sottrarre tale valore al valore massimo 140 per trovare il numero di caratteri rimanenti
3. Dobbiamo aggiornare l'etichetta che visualizza nella pagina questa informazione, l'elemento con selettore '.counter'

Procediamo a realizzare il nostro codice, sempre aggiungendo del codice nella funzione main:

1. Selezioniamo l'elemento $('.status-box')
2. Richiamiamo su di esso il metodo .keyup(), che si attiva ogni volta che viene rilasciato un tasto
3. All'interno delle parentesi del metodo keyup inseriamo una funzione function() { .. }

4. Ai puntini sotituiamo il codice per:

   a. Creare una variabile var postLength che memorizzi la lunghezza del messaggio scritto nel box $(this).val().length. b. Creare una variabile var charactersLeft che memorizzi il calcolo dei caratteri rimanenti 140 - postLength c. Aggiornare l'elemento $('.conunter') per visualizzare il numero di caratteri rimanenti .text(charactersLeft)

Anche in questo caso ci serve fare una azione aggiuntiva quando il messaggio viene aggiunto alla pagina: resettare l'etichetta che visualizza il numero di caratteri rimanenti a 140.

• • Nella funzione che gestisce la pressione del bottone post (quella scritta in precedenza)
• Recuperiamo l'elemento $('.counter') e impostiamo il suo contenuto testuale alla stringa 140 .text('140')

Alla fine di questo passo il codice che dovrebbe risultare come indicato qui.

Disabilitiamo il bottone

Nota: (per programmatori avanzati)

Il bottone per aggiungere un nuovo post deve essere abilitato solo in alcuni casi:

• quando il box non è vuoto
• quando i caratteri inseriti sono meno di 140

in caso contrario deve essere abilitato.

Le istruzioni per abilitarlo e disabilitarlo sono le seguenti:

• abilitarlo $('.btn').removeClass('disabled');
• disabilitarlo $('.btn').addClass('disabled');

Inserite all'interno del gestore dell'evento keyup il codice con la catena di if (..) { .. } else if (..) { .. } else { .. } per gestirne il funzionamento.

Ricordatevi di aggiungere alla fine della funzione main l'istruzione $('.btn').addClass('disabled'); affinchè all'inizio il bottone appaia disabilitato.

C'è ancora un caso in cui il bottone appare abilitato, ma non dovrebbe. Trovatelo e correggetelo.

Il codice completo dovrebbe risultare come indicato qui.

Soluzioni

Creiamo un nuovo post (soluzione)

var main = function() {
  $('.btn').click(function() {
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    $('.status-box').val('');
  });

}

Contiamo i caratteri rimasti (soluzione)

var main = function() {
$('.btn').click(function() {
  var post = $('.status-box').val();
  $('<li>').text(post).prependTo('.posts');
  $('.status-box').val('');
  $('.counter').text('140');
});
    $('.status-box').keyup(function() {
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);
  });
};

Disabilitiamo il bottone (soluzione)

var main = function() {
$('.btn').click(function() {
  var post = $('.status-box').val();
  $('<li>').text(post).prependTo('.posts');
  $('.status-box').val('');
  $('.counter').text('140');
  $('.btn').addClass('disabled'); 
});
$('.status-box').keyup(function() {
  var postLength = $(this).val().length;
  var charactersLeft = 140 - postLength;
  $('.counter').text(charactersLeft);

  if(charactersLeft < 0) {
    $('.btn').addClass('disabled'); 
  }
  else if(charactersLeft == 140) {
    $('.btn').addClass('disabled');
  }
  else {
    $('.btn').removeClass('disabled');
  }
});
$('.btn').addClass('disabled');

};

Il risultato completo

Lo potete trovare online su jsbin