Question

I’ve got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There’s a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.

There’s another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.

I’ve setup a sample JSFiddle:

http://jsfiddle.net/fmdataweb/hxzME/1/

I think I understand why they only work for the first row – they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 – but I’m not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.

Answer 1

There’s a few problems with the script.

Firstly you’re right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.

To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.

Finally a lot of your code and variables were in the wrong scope to be accessible properly. I’ve moved a lot of the vars around so they’re accessible, mainly into the global scope. When you’re a bit more experienced you won’t want to do this, but for now this is fine.

I also created a new function setDropDown, but this code is almost identical to what was there before.

Here is a working version of your code:

http://jsfiddle.net/hxzME/3/