Question

I’m creating a dynamic dropdown list on my page. When an option is selected from the dropdown, how can I get it to fire off the jquery function?

Jquery:

            <script type="text/javascript">
                $(document).ready(function () {
                   function insertIntoReporting(_storeID, _personID) {
                      $.ajax({
                        type: "POST",
                        url: "Default.aspx/InsertIntoReporting",
                        data: "{'storeID': _storeID, 'personID': _personID}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: true,
                        cache: false,
                        success: function (msg) {
                        $('').text(msg.d);
                         }
                       });
                      return false;
                   }

                });


            </script>

C# Code Behind

            DropDownList ddl = new DropDownList();
            ddl.ID = "DropdownlistID";
            ddl.Items.Add("----------");
            ddl.DataTextField = "StoreName";
            ddl.DataValueField = "StoreID";
            ddl.DataSource = ds;
            ddl.DataBind();
            e.Item.Cells[4].Controls.Add(ddl);


            [WebMethod]
            public static string InsertIntoReporting(int _storeID, string _personID)
            {
               // database calls go here
            }

Answer 1

Store your dropdownlist in a protected field in the code-behind, then:

$('<%=_ddl.ClientId%>').change(insertIntoReporting);

Another option would be to make your insertIntoReporting function more globally accessible, and then do something like this:

e.Item.Cells[4].Controls.Add(new LiteralControl(
    string.Format(
        @"<script>$(function() {   
            $('{0}').change(insertIntoReporting);
        });</script>",
        ddl.ClientId)));

And yet another option (which I’d personally prefer) would be to add some class to all the dropdownlists that you want to have this behavior, and make your javascript block include a line that selects all those by their class:

$('.report-insert-dropdown').change(insertIntoReporting);