ASP.NET MVC - Adding form elements at runtime with javascript

Question

In my form I'm adding a number of input elements in a For Loop, as below.

 @For Each itm As LineItem In Model.LineItems
            Dim lnitm As LineItem = itm
    @<tr>

            <td>@lnitm.Name
            </td>
            <td>@Html.TextBoxFor(Function(model) model.LineItem(lnitm.ID).Value)
            </td>
            <td>@Html.TextBoxFor(Function(model) model.LineItem(lnitm.ID).Currency)
            </td>
        </tr>

        Next

I'd like to add some jQuery to the Currency textbox so I can get the autocomplete working. In my other pages I've used a jQuery function such as:

$(function () {
$("#HomeCurrencyID").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/autocomplete/Currencies", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.ID + " (" + item.Symbol + ") " + item.Description, value: item.ID , id: item.ID }
                    }))
                }
            })
        },
    });
});

This works fine where I know the ID of the Input Element / where I'm specifically adding the element into the HTML and not adding it via a loop.

How can I add the jQuery functionality above to all currency textbox's created in the For Loop? Do I need to add Javascript at run time?

Resolution

Changed the Function declaration to a classname and added the class to the textbox as below;

$("#CurrencyClass") 

@Html.TextBoxFor(Function(model) model.LineItem(lnitm.ID).Currency, New With {Key .class = "CurrencyClass"})

Thanks for the prompt response!

Answer 1

You'll need to be able to select all of these textboxes to run the auto-complete script against, to do this you can add a class, then update the selector in your script.

In the view: Give all of the textboxes a class using new {@class = "yourClass"} (or its VB equivalent) as the htmlAttributes parameter to the textbox helper (see http://msdn.microsoft.com/en-us/library/ee703535.aspx#Y200).

In the script: Replace $("#HomeCurrencyID") with $(".yourClass"), it will run those functions to all of the matched elements, which will be the textboxes with yourClass.