Ajout jQuery drop Downs à une longueur variable de données page d'entrée

Question

Salut à tous, je suis en train de créer un formulaire d'inscription qui permet à une personne d'ajouter plusieurs jours à une demande. Chaque demande peut avoir 1 ou plusieurs jours fixés et chaque jour a quelques choix à faire avant de pouvoir soumettre le formulaire. J'utilise le méthode décrite ici pour y parvenir.

Maintenant, je veux commencer à faire quelques fonctionnalités de l'interface utilisateur plus avancées comme l'utilisation d'une source de données JSON pour construire ma listes avec une relation parent-enfant. Je suis encore assez nouveau développement web (provenant d'IBM i développement vert-écran), donc je suis encore à apprendre par des exemples et des didacticiels. J'ai trouvé de nombreux exemples de bas de chute parent-enfant quand il n'y a qu'un seul jeu, mais je dois que cela fonctionne pour un certain nombre de lignes et pour toutes les nouvelles lignes ont été ajoutées sur la page tout en étant capable d'afficher la valeur correcte sélectionnée pour chaque ligne lorsque le chargement de la page d'édition. Pour couronner ceci, je veux, quand certaines sélections sont faites, pour révéler de nouveaux champs.

Voici ce que j'ai jusqu'à présent:

(Ceci est capture d'écran est basé sur ne pas se soucier des caractéristiques de fin et juste le faire marcher. L'enfant tomber tout ce que actuellement des spectacles.)

Type de demande sélectionne le type de congé que vous voulez prendre. Utiliser des heures Type obtient une liste en fonction de ce qui est entré dans le type de demande. Le problème que j'ai avec ce qui précède devient à travailler sur de nouvelles lignes ajoutées en cliquant sur « Ajouter Day ». Le défi est alors de montrer / cacher la deuxième ligne en fonction du type de demande. Si une personne de malade - maladie de l'employé, la nature de la maladie devrait montrer, s'ils choisissent une autre option, il montre à la fois la nature de la maladie et les relations. S'ils choisissent de vacances, ils ne devraient pas voir l'un des champs.

J'ai installé JSON pour ces listes. Je comprend les champs qui définissent ce qui sera montré pour quelle option.

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

Je sais que c'est beaucoup pour un débutant d'apprendre et de comprendre. Quelqu'un at-il fait ce qui est prêt à partager ou si vous connaissez un tutoriel ou même peut me diriger dans la bonne direction? (Même la terminologie appropriée) Mes recherches pour ce a été un échec jusqu'ici.

Answer 1

J'ai un début d'une solution sur

Answer 2

La meilleure chose que je peux recommander, saisir un parent commun pour une seule ligne et l'utiliser comme un point de référence dans le reste de la ligne. (Si ceux-ci sont de <tr> d'une table, l'étiquette de la tr ou lui donner une classe que vous pouvez utiliser pour appeler avec). Lorsque vous avez besoin de changer quelque chose d'autre dans la ligne, utilisez .closest pour trouver le parent, puis traverse vers le bas dans le champ que vous désirez.

Ensuite, à moins que ces données est vraiment dynamique, essayez la mise en cache des résultats de la variable locale dans une liste déroulante que vous pouvez utiliser avec chaque nouvelle ligne. C'est-à-dire, s'il y a toujours les mêmes entrées (récupéré via ajax) pour le type de demande et de l'utilisation type heures, juste repeupler à partir var request_types et var use_hours_types.

Troisièmement, en regard à l'utilisation .live car cela se lier aux éléments DOM, malgré les modifications apportées à après la liaison initiale. Donc, si votre deuxième partie de la ligne est basée sur une sélection de la baisse de baisse, utilisez quelque chose comme:

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

(ou d'un fac-similé).

Sans voir le code que vous avez mis en place, il suffit de penser une approche différente de la façon dont vous recueillez les informations. La partie difficile est que vous ne voulez pas faire une large réattribution de chaque liste déroulante avec les données ajax (probablement) comme cela effectuer les sélections actuelles. Donc, chaque fois que possible les données de sauvegarde et de l'utiliser lors de la création d'une nouvelle ligne.

Answer 3

La meilleure chose que je peux recommander, saisir un parent commun pour une seule ligne et l'utiliser comme un point de référence dans le reste de la ligne. (Si ceux-ci sont de <tr> d'une table, l'étiquette de la tr ou lui donner une classe que vous pouvez utiliser pour appeler avec). Lorsque vous avez besoin de changer quelque chose d'autre dans la ligne, utilisez .closest pour trouver le parent, puis traverse vers le bas dans le champ que vous désirez.

Ensuite, à moins que ces données est vraiment dynamique, essayez la mise en cache des résultats de la variable locale dans une liste déroulante que vous pouvez utiliser avec chaque nouvelle ligne. C'est-à-dire, s'il y a toujours les mêmes entrées (récupéré via ajax) pour le type de demande et de l'utilisation type heures, juste repeupler à partir var request_types et var use_hours_types.

Troisièmement, en regard à l'utilisation .live car cela se lier aux éléments DOM, malgré les modifications apportées à après la liaison initiale. Donc, si votre deuxième partie de la ligne est basée sur une sélection de la baisse de baisse, utilisez quelque chose comme:

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

(ou d'un fac-similé).

Sans voir le code que vous avez mis en place, il suffit de penser une approche différente de la façon dont vous recueillez les informations. La partie difficile est que vous ne voulez pas faire une large réattribution de chaque liste déroulante avec les données ajax (probablement) comme cela effectuer les sélections actuelles. Donc, chaque fois que possible les données de sauvegarde et de l'utiliser lors de la création d'une nouvelle ligne.