Hinzufügen von jQuery Drop-Downs auf eine Variable Length Dateneingabe Seite

Question

Hey alle, ich schaffe ein Anmeldeformular, dass eine Person ermöglicht es, mehrere Tage auf eine Anfrage hinzuzufügen. Jede Anforderung kann mit 1 oder mehr Tagen angebracht und jeden Tag hat ein paar Auswahlen zu treffen, bevor sie das Formular abschicken kann. Ich bin mit dem hier beschriebene Methode dies zu erreichen.

Nun möchte ich wie mit einem JSON-Datenquelle tun einige erweiterte UI Funktionen starten meine Drop-Down-Listen mit einer Eltern-Kind-Beziehung aufzubauen. Ich bin immer noch ganz neue Web-Entwicklung (kommt von IBM i Green-Screen-Entwicklung), damit ich noch durch Beispiele lerne und mit Tutorials. Ich habe viele Beispiele von Eltern-Kind-Drop-downs gefunden, wenn nur ein Satz ist, aber ich muß diese an der Arbeit für eine beliebige Anzahl von Zeilen und für alle neue Zeilen, die auf der Seite hinzugefügt wurden, während die Lage, den richtigen ausgewählten Wert anzuzeigen für jede Zeile, wenn die Bearbeitungs Seite geladen wird. Um dieses off top, ich will, wenn bestimmte Einstellungen vorgenommen werden, offenbaren einige neue Felder aus.

Hier ist, was ich bisher:

(Dies ist Screenshot auf nicht sich Gedanken über die End-Funktionen basiert und nur immer daran zu arbeiten. Das Kind zur Zeit alles zeigt Drop-Down).

Anfragetyp wählt die Art des Urlaubs Sie nehmen wollen. Verwenden Stunden Typ wird eine Liste auf, was in Anfragetyp eingegeben wird. Das Problem, das ich mit der oben haben wird immer es um die Arbeit an neuen Zeilen hinzugefügt, wenn „Add Day“ klicken. Die Herausforderung besteht also darin zeigen / Ausblenden der zweiten Reihe auf der Grundlage der Art der Anfrage. Wenn eine Person wählt Sick - Mitarbeiter Krankheit, sollte Natur der Krankheit zeigen, wenn sie eine andere Option auswählen, zeigen Sie sie sowohl Natur der Krankheit und Beziehung. Wenn sie Urlaub wählen, sollten sie entweder Feld nicht sehen.

Ich habe JSON-Setup für diese Listen. Ich enthalten die Felder, die definieren, was für welche Option angezeigt wird.

[{"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"}]

Ich weiß, das ist viel für einen Neuling zu lernen und herauszufinden. Hat jemand dies getan, die bereit ist, ein Tutorial zu teilen oder wissen oder auch mich in die richtige Richtung zeigen kann? (Selbst die richtige Terminologie) Meine sucht auf diese bisher gescheitert ist.

Answer 1

Ich habe einen Anfang einer Lösung über

Answer 2

Das Beste, was ich empfehlen kann, einen gemeinsamen Elternteil für eine einzelne Zeile und verwendet, die als Bezugspunkt für den Rest der Reihe greifen. (Wenn diese <tr> die einer Tabelle sind, beschriften Sie die tr oder geben ihm eine Klasse, die Sie mit ihm aufrufen können). Wenn Sie ändern etwas anderes in der Reihe müssen, verwenden Sie .closest die Eltern zu finden, dann Verfahrweg zurück zum Feld, das Sie sich wünschen.

Als nächstes sei denn, diese Daten wirklich dynamisch ist, versuchen die Ergebnisse der Drop-down-Cachen in einer lokalen Variablen, dass Sie mit jeder neuen Zeile verwenden können. Das heißt, wenn es immer die gleichen Einträge (über Ajax abgerufen) für die Anforderung und Verwendung Stunden-Typen, gerade neu bevölkert es aus var request_types und var use_hours_types.

Drittens Blick in .live, da dies mit den DOM-Elementen trotz Änderungen vorgenommen, um es nach der anfänglichen Bindung binden. Also, wenn Ihr zweiter Teil der Reihe basiert auf einer Auswahl des Drop-Down, die Verwendung so etwas wie:

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

(oder ein Faksimile).

Ohne zu sehen, den Code, den Sie an der richtigen Stelle, man denke nur an einen anderen Ansatz, wie Sie die Informationen zu sammeln. Der schwierige Teil ist, dass Sie nicht tun wollen eine breite Neuzuordnung jeden Dropdown-mit den Ajax-Daten (vermutlich), da dies der aktuelle Auswahl bewirken würde. Also, wann immer möglich, speichern Sie die Daten und es verwenden, wenn Sie eine neue Zeile erstellen.

Answer 3

Das Beste, was ich empfehlen kann, einen gemeinsamen Elternteil für eine einzelne Zeile und verwendet, die als Bezugspunkt für den Rest der Reihe greifen. (Wenn diese <tr> die einer Tabelle sind, beschriften Sie die tr oder geben ihm eine Klasse, die Sie mit ihm aufrufen können). Wenn Sie ändern etwas anderes in der Reihe müssen, verwenden Sie .closest die Eltern zu finden, dann Verfahrweg zurück zum Feld, das Sie sich wünschen.

Als nächstes sei denn, diese Daten wirklich dynamisch ist, versuchen die Ergebnisse der Drop-down-Cachen in einer lokalen Variablen, dass Sie mit jeder neuen Zeile verwenden können. Das heißt, wenn es immer die gleichen Einträge (über Ajax abgerufen) für die Anforderung und Verwendung Stunden-Typen, gerade neu bevölkert es aus var request_types und var use_hours_types.

Drittens Blick in .live, da dies mit den DOM-Elementen trotz Änderungen vorgenommen, um es nach der anfänglichen Bindung binden. Also, wenn Ihr zweiter Teil der Reihe basiert auf einer Auswahl des Drop-Down, die Verwendung so etwas wie:

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

(oder ein Faksimile).

Ohne zu sehen, den Code, den Sie an der richtigen Stelle, man denke nur an einen anderen Ansatz, wie Sie die Informationen zu sammeln. Der schwierige Teil ist, dass Sie nicht tun wollen eine breite Neuzuordnung jeden Dropdown-mit den Ajax-Daten (vermutlich), da dies der aktuelle Auswahl bewirken würde. Also, wann immer möglich, speichern Sie die Daten und es verwenden, wenn Sie eine neue Zeile erstellen.