Adding jQuery Drop Downs to a Variable Length Data Entry Page

Question

Hey all, I am creating an entry form that allows a person to add multiple days to a request. Each request can have 1 or more days attached and each day has a few selections to make before they can submit the form. I am using the method described here to accomplish this.

Now, I want to start doing some more advanced UI features like using a JSON data source to build my drop down lists with a parent-child relationship. I am still quite new web development (coming from IBM i green-screen development) so I am still learning by examples and with tutorials. I have found many examples of parent-child drop downs when there is only one set, but I need this to work for any number of rows and for all new rows that have been added on the page while being able to display the correct selected value for each row when the edit page loads. To top this off, I want, when certain selections are made, to reveal some new fields.

Here is what I have so far:

(This is screen shot is based on not worrying about the end features and just getting it working. The child drop down currently shows everything.)

Request Type selects the type of leave you want to take. Use Hours Type gets a list based on what is entered into Request Type. The problem I have with the above is getting it to work on new rows added when clicking "Add Day". The challenge then is to show/hide the second row based on the Request Type. If a person selects Sick - Employee Illness, Nature of Illness should show, if they select another option, it show both Nature of Illness and Relationship. If they select Vacation, they shouldn't see either field.

I have JSON setup for these lists. I included the fields that define what gets shown for which 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"}]

I know this is a lot for a newbie to learn and figure out. Has anyone done this that is willing to share or know of a tutorial or even can point me in the right direction? (Even the proper terminology) My searches for on this has been a failure thus far.

Answer 1

I have a start of a solution over at this question.

Answer 2

Best thing I can recommend, grab a common parent for a single row and use that as a reference point throughout the rest of the row. (if these are <tr>'s of a table, label the tr or give it a class you can use to call it with). When you need to change something else in the row, use .closest to find the parent, then traverse back down to the field you desire.

Next, unless this data is truly dynamic, try caching the results of the drop-down in a local variable that you can use with each new row. That is to say, if there are always the same entries (retrieved via ajax) for request type and use hours type, just re-populate it from var request_types and var use_hours_types.

Third, look in to using .live as this will bind to the DOM elements despite changes made to it after the initial binding. So if your second part of the row is based on a selection of the drop down, use something like:

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

(or some facsimile).

Without seeing the code you have in place, just think about a different approach to how you gather the information. The tough part is you don't want to do a broad re-assignment of each drop-down with the ajax data (presumably) as this would effect current selections. So whenever possible save the data and use it when you create a new row.