L'aggiunta di jQuery goccia Downs a una lunghezza variabile di inserimento dati Pagina

Question

Ciao a tutti, sto creando un modulo di iscrizione che permette ad una persona di aggiungere più giorni a una richiesta. Ogni richiesta può avere 1 o più giorni allegati e ogni giorno ha un paio di selezioni da fare prima di poter inviare il modulo. Sto usando la metodo descritto qui per raggiungere questo obiettivo.

Ora, voglio iniziare a fare alcune caratteristiche dell'interfaccia utente più avanzate come l'utilizzo di una fonte di dati JSON per costruire il mio menu a tendina con una relazione padre-figlio. Sono ancora abbastanza nuovo sviluppo web (proveniente da IBM allo sviluppo i verde-schermo) in modo da sto ancora imparando da esempi e con tutorial. Ho trovato molti esempi di genitori-figli elenchi a discesa quando c'è un solo set, ma ho bisogno di questo per il lavoro per qualsiasi numero di righe e per tutte le nuove righe che sono state aggiunte nella pagina pur essendo in grado di visualizzare il valore selezionato corretta per ogni riga quando la pagina viene caricata di modifica. Per coronare questa via, voglio, quando certe scelte sono fatte, a rivelare alcuni nuovi campi.

Ecco quello che ho finora:

(Questa è colpo di schermo si basa su non preoccuparsi delle caratteristiche di fascia e basta farlo funzionare. Il bambino discesa attualmente spettacoli tutto.)

Richiesta Type Seleziona il tipo di congedo si vuole prendere. Utilizzare ore Tipo ottiene un elenco in base a quanto stipulato Tipo di richiesta. Il problema che ho con quanto sopra è sempre a lavoro su nuove righe aggiunte quando si fa clic su "Aggiungi Day". La sfida è quindi di mostrare / nascondere la seconda fila in base al tipo di richiesta. Se una persona sceglie di malattia - Malattia dei dipendenti, natura della malattia dovrebbe mostrare, se si seleziona un'altra opzione, che mostrano sia la natura della malattia e di relazione. Se si selezionano le vacanze, non dovrebbero vedere entrambi i campi.

Ho installato JSON per queste liste. Ho incluso i campi che definiscono ciò che viene mostrato per quale opzione.

[{"Id":11,"Title":"Employee Illness","ParentId":10,"MapToCode":"02","HasRelationship":false,"HasNatureOfIllness":true,"ChildRequired":false,"Notes":"","AccrualCode":"S"},
{"Id":1,"Title":"Vacation","ParentId":0,"MapToCode":"04","HasRelationship":false,"HasNatureOfIllness":false,"ChildRequired":false,"Notes":"","AccrualCode":"VAC"}]

So che questo è molto per un novizio di imparare e capire. Qualcuno ha fatto questo che è disposto a condividere o conoscere di un tutorial o addirittura mi può puntare nella giusta direzione? (Anche la corretta terminologia) Le mie ricerche per questo è stata un fallimento finora.

Answer 1

Ho un inizio di una soluzione sopra a questa domanda .

Answer 2

La cosa migliore che posso consigliare, prendere un genitore comune per una singola riga e l'uso che come punto di riferimento per tutto il resto della riga. (Se queste sono <tr> dispone di un tavolo, etichettare il tr o dare una classe è possibile utilizzare per chiamare con). Quando avete bisogno di cambiare qualcosa nella fila, uso .closest per trovare il genitore, poi traversata di nuovo giù al campo che desiderate.

Quindi, a meno che questi dati è veramente dinamico, provate la memorizzazione nella cache i risultati della discesa in una variabile locale che è possibile utilizzare con ogni nuova riga. Vale a dire, se ci sono sempre le stesse voci (recuperati tramite la tecnologia AJAX) per il tipo di richiesta e l'uso di tipo ore, appena ri-popolare da var request_types e var use_hours_types.

In terzo luogo, sguardo di utilizzare .live come questo si lega agli elementi DOM, nonostante le modifiche apportate ad esso dopo il legame iniziale. Quindi, se la vostra seconda parte della fila si basa su una selezione della giù goccia, uso qualcosa come:

$('dropdown').live('change',function(){
   $(this).close('parent_object').filter('.corresponding_row').show();
});

(o qualche fac-simile).

Senza vedere il codice che avete in luogo, basta pensare a un approccio diverso al modo in cui si raccolgono le informazioni. La parte più difficile è che non si vuole fare un ampio riassegnazione di ogni discesa con i dati ajax (presumibilmente) in quanto ciò avrebbe effetto selezioni correnti. Così, quando possibile salvare i dati e utilizzarlo quando si crea una nuova riga.