icagenda guide e tutorial per joomla

multiple select dropdown list with AJAX

multiple select dropdown list with AJAX

È molto tempo che ho in mente di scrivere un tutorial sulla creazione di Select dinamiche usando chronoforms V5, ma ho sempre rimandato, non solo per mancanza di tempo, ma anche perchè un argomento su questo articolo merita un poco di approfondimento.

Regioni, Province, Comuni: Caselle dropdown collegate fra loro in Chronoforms V5

Prova il form select list dinamica con regioni province e comuni

{chronoforms5}regioni_province_comuni_1{/chronoforms5}

Creare una dropdownlist dinamica con chronoforms di per sè non è molto difficile a patto di avere un minimo di conoscenze e sapere cosa si sta facendo, ma non sempre è così, quindi cercherò di essere il più dettagliato possibile.

Una DropDown dinamica non è altro che una serie di menù a tendina dove si effettua una scelta nella prima combobox, e in base a questa scelta nella seguente si avranno ulteriori scelte collegate e così di seguito: il classico esempio lo abbiamo quando inserimo i nostri dati anagrafici in un form; scegliendo la provincia di residenza nella prima select, nella seconda visualizzeremo le province di quella regione e nella terza select i comuni. Un altro esempio è quello che potremmo trovare in un sito di automobili; scegliendo la marca dell'auto nella prima casella, nella seconda avremmo proposti i modelli di auto appartenenti alla marca scelta.

In questo tutorial spiegherò come realizzare una serie di 3 dropdownlist dinamiche collegate fra loro e recuperando i dati via AJAX dalle rispettive tabelle di un database. Quindi in assoluto mi accingerò a creare il primo tutorial del genere "Dropdown dinamici: regione, provincia, comune" per chronoforms V5.

Come sempre alla fine di questo tutorial troverete il file backup del form da scaricare, utile per poterlo confrontare o studiare. Troverete anche i file SQL con le tabelle per le regioni, province e comuni, pronti per essere installati, il file è zippato e non dovrete scompattarlo, ma dovrete semplicemente importarlo nel vostro database usando phpmyadmin. Potrete inoltre provare una demo del form cliccando QUI.

Voglio anche ricordare che questo tutorial, creare dei menù a cascata collegati fra loro, benchè è scritto per Joomla e Chronoforms, è possibile utilizzarlo anche su Chronoforms per Wordpress.

Vediamo come sono strutturate le tabelle che contengono le informazioni necessarie a far popolare una tripla DropDown List a cascata:

  • la tabella delle Regioni si chiama aaa_regioni e contiene 2 campi, idRegione e nomeRegione;
  • la tabella delle Province si chiama aaa_province e contiene 3 campi, idProvincia, nomeProvincia, idRegione;
  • la tabella dei Comuni si chiama aaa_comuni e contiene 3 campi, idComune, nomeComune, idProvincia.

I nomi delle tabelle, così come i nomi dei campi devono essere scritti esattamente come li ho proposti, questo per non inficiare sul buon esito nella costruzione di questa serie di "Select dinamiche con ajax per Comuni Province Regioni", in particolar modo il nome idRegione della tabella aaa_regioni e idRegione della tabella aaa_province deve essere lo stesso, come lo stesso dovrà essere il nome idProvincia della tabella aaa_province e idProvincia della tabella aaa_comuni. Sarà inoltre importante rispettare le maiuscole e minuscole di questi nomi.

L'importazione delle tabelle nel vostro database è un operazione rapida e semplice: accedete alla vostra interfaccia phpmyadmin e scegliere il menù importa, prelevate dal vostro computer il file zippato e caricatelo. Un breve messaggio vi indicherà che l'importazione è andata a buon fine e potrete trovare le tabelle in alto nel vostro database in quanto avendo scelto di nominarle con 3 aaa_  iniziali, queste verranno collocate all'inizio perchè la vista rispetta un ordine alfabetico.

Per chi non avesse accesso all'interfaccia di phpmyadmin si rivolga al suo servizio di hosting.

Il form che stiamo creando conterrà solo le 3 caselle dropdown collegate fra loro, nessuna altra funzione verrà integrata, quindi nessun altro tipo di campo, nessun pulsante e nessun invio. naturalmente sarà possibile integrare altre funzionalità presenti negli altri forms che sono a disposizione nell'area download.

Portatevi adesso all'interno del pannello di controllo di chronoforms V5 e cliccate su NEW (lasciate perdere new simple che serve per altro). Inserite in Form name il titolo del vostro form, questo non dovra avere spazi vuoti, quindi usate un UNDERSCORE (il meno/trattino basso) se ve ne fosse bisogno. Ad esempio: form_dropdownlist, salvate premendo SAVE.

Portatevi nel menù DESIGNER di chronoforms all'interno del vostro form e nell'area azzurra trascinatevi 3 elementi DROPDOWN che troverete alla vostra sinistra nella sezione BASIC.

Impostazioni del dropdown Regioni

Inseriamo le seguenti informazioni nella tabs GENERAL nel primo DROPDOW destinato alla scelta della regione

  • Field name: regioni
  • Field ID: regioni
  • Empty Option: Seleziona una Regione
  • Label: Regione:

Inseriamo le seguenti informazioni nella tabs DYNAMIC DATA nel primo DROPDOWN destinato alla scelta della regione

  • Enabled: Yes
  • Data Path: Elenco_Regioni
  • Value Key: idRegione
  • Text Key: nomeRegione

 Inseriamo le seguenti informazioni nella tabs EVENTS nel primo DROPDOWN destinato alla scelta della regione

PRIMO EVENTO

  • On: =
  • Value selected: '' (sono due apici singoli, il simbolo usato comunemente per l'apostrofo)
  • Action: Set Options
  • Element ID/fn()/Event: province
  • Options list/AJAX event: =Scegli una Provincia

SECONDO EVENTO

  • On: !=
  • Value selected: '' (sono due apici singoli, il simbolo usato comunemente per l'apostrofo)
  • Action: Set dynamic Options
  • Element ID/fn()/Event: province
  • Options list/AJAX event: ajax_province

Al termine premete SAVE AND CLOSE la finestra modal si chiuderà. Salvare premendo SAVE

Impostazioni del dropdown Province

Inseriamo le seguenti informazioni nella tabs GENERAL del secondo DROPDOWN destinato alla scelta della provincia

  • Field name: province
  • Field ID: province
  • Empty Option: (in questo caso lasciare vuoto)
  • Label: provincia:

Inseriamo le seguenti informazioni nella tabs DYNAMIC DATA nel primo DROPDOWN destinato alla scelta della provincia

  • Enabled: No
  • Data Path: ajax_province
  • Value Key: idProvincia
  • Text Key: nomeProvincia

 Inseriamo le seguenti informazioni nella tabs EVENTS nel primo DROPDOWN destinato alla scelta della provincia

PRIMO EVENTO

  • On: =
  • Value selected: '' (sono due apici singoli, il simbolo usato comunemente per l'apostrofo)
  • Action: Set Options
  • Element ID/fn()/Event: comuni
  • Options list/AJAX event: =Scegli una Comune

SECONDO EVENTO

  • On: !=
  • Value selected: '' (sono due apici singoli, il simbolo usato comunemente per l'apostrofo)
  • Action: Set dynamic Options
  • Element ID/fn()/Event: comuni
  • Options list/AJAX event: ajax_comuni

Al termine premete SAVE AND CLOSE la finestra modal si chiuderà. Salvare premendo SAVE

Impostazioni del dropdown Comuni

Inseriamo le seguenti informazioni nella tabs GENERAL del terzo DROPDOWN destinato alla scelta del comune

  • Field name: comuni
  • Field ID: comuni
  • Empty Option: (in questo caso lasciare vuoto)
  • Label: comune:

Inseriamo le seguenti informazioni nella tabs DYNAMIC DATA del terzo DROPDOWN destinato alla scelta del comune

  • Enabled: No
  • Data Path: (in questo caso lasciare vuoto)
  • Value Key: (in questo caso lasciare vuoto)
  • Text Key: (in questo caso lasciare vuoto)

 Nella tabs EVENTS del terzo DROPDOWN destinato alla scelta del comune nessun evento deve essere impostato

Al termine premete SAVE AND CLOSE la finestra modal si chiuderà. Salvare premendo SAVE

Portatevi nel menù SETUP di chronoforms all'interno del vostro form.

Come prima operazione andiamo ad aggiungere 2 "zone verdi" alle già presenti On load e On submit, quindi premendo il pulsante ADD NEW EVENT alla base delle esistenti "zone verdi" aggiungete la prima zona nominandola ajax_province (prenderà il automatico il prefisso On diventando On ajax_province).

Aggiungete la seconda zona nominandola ajax_comuni (prenderà il automatico il prefisso On diventando On ajax_comuni).

 Trascinate adesso un DB Read dalla sezione DATA MANAGEMENT alla vostra sinistra, dentro:

  • On load
  • On ajax_province
  • On ajax_comuni

Trascinate adesso un HTML (Render Form) dalla sezione BASIC alla vostra sinistra, dentro On load, posizionandolo sotto il DB Read

Infine trascinate un Custom Code dalla sezione BASIC alla vostra sinistra, dentro:

  • On ajax_province
  • On ajax_comuni

Posizionandoli ognuno sotto il rispettivo DB Read

Iniziamo la configurazione dei DB Read

DB Read su On load tabs Basic:

  • Action label: drop_regioni
  • Enabled: Yes
  • Table name: aaa_regioni
  • Multi read: Yes
  • Enable Model ID: Yes
  • Model ID: Elenco_Regioni
  • Fields: idRegione,nomeRegione
  • Order: nomeRegione

Nessuna impostazione andrà inserita nella tabs Relations e External Database

DB Read su ON ajax_province tabs Basic:

  • Action label: drop_province
  • Enabled: Yes
  • Table name: aaa_province
  • Multi read: Yes
  • Enable Model ID: Yes
  • Model ID: ajax_province
  • Fields: idProvincia,nomeProvincia
  • Order: idProvincia
  • Conditions: il codice sottostante 
    <?php
    return array('idRegione'=> $form->data['regioni']);
    ?>

Nessuna impostazione andrà inserita nella tabs Relations e External Database

DB Read su ON ajax_comuni tabs Basic:

  • Action label: drop_comuni
  • Enabled: Yes
  • Table name: aaa_comuni
  • Multi read: Yes
  • Enable Model ID: Yes
  • Model ID: ajax_comuni
  • Fields: idComune,nomeComune
  • Order: idComune
  • Conditions: il codice sottostante 
    <?php
    return array('idProvincia'=> $form->data['province']);
    ?>

Nessuna impostazione andrà inserita nella tabs Relations e External Database

Inseriamo nei custom code il codice php necessario

Il codice seguente andrà inserito nel Custom Code all'interno do On ajax_province nel campo Content

<?php
$options = array();
if ( !$form->data['ajax_province'] || count($form->data['ajax_province']) < 1 ) {
  // no result was found
  $options[] = 'Selezion una Provincia';
} else {
  foreach ( $form->data['ajax_province'] as $d ) {
    $options[$d['idProvincia']] =  $d['nomeProvincia'];
  }
}
echo json_encode($options);
?>

Mentre nel campo Action Label inserite codice php per ajax_province

Il codice seguente andrà inserito nel Custom Code all'interno do On ajax_province nel campo Content

<?php
$options = array();
if ( !$form->data['ajax_comuni'] || count($form->data['ajax_comuni']) < 1 ) {
  // no result was found
  $options[] = 'Selezion un Comune';
} else {
  foreach ( $form->data['ajax_comuni'] as $d ) {
    $options[$d['idComune']] =  $d['nomeComune'];
  }
}
echo json_encode($options);
?>

Mentre nel campo Action Label inserite codice php per ajax_comuni

Il tutorial su Joomla e Chronoforms, creare dei menù a cascata collegati fra loro finisce qui, spero di aver accontentato così, chi mi aveva richiesto un tutorial sull'argomento dropdownlist collegate fra loro con l'utilizzo di ajax.

Se il tutorial vi è piaciuto e sopratutto vi è stato di utilità, potete ringraziarmi offrendomi un caffè o semplicemente cliccando in qualche banner.

offrimi un caffè

{phocadownload view=file|id=13|target=s}