CODEWITHSUNDEEP
javascriptjqueryajaxvb.net
Michael Mahony
Michael Mahony

Reputation: 1350

SelectedIndexChange event not firing on dynamically created dropdownlist

I have a Telerik RadComboBox that when changed triggers some Javascript that uses AJAX to grab some data from the database and fills a second dropdownn lists with values. The problem is that I then want to fill some text boxes with data based upon the selection made in the second dropdownlist. The second dropdown list is a standard ASP.NET dropdownlist. Here is the code for the two dropdownlists:

<telerik:RadComboBox ID="rcbCustomer" runat="server" CssClass="form-control field-standard-size fix-background-white input-sm" width ="300px" Height="140px"
                        EmptyMessage="Type here to find sold-to customer" LoadingMessage="Please wait, loading..." AutoPostBack="true"
                        RegisterWithScriptManager="false" EnableEmbeddedScripts="true" EnableVirtualScrolling="true" OnClientSelectedIndexChanged="rcbCustomer_IndexChanged">
                    </telerik:RadComboBox>


<asp:DropDownList ID="hidShipTo" runat="server" Height="24px" Font-Size="x-small" CssClass="form-control input-sm width-300 form-fixer" AutoPostBack="True" ></asp:DropDownList>

When the first dropdown is changed it triggers this Javascript function which populates the second list:

function rcbCustomer_IndexChanged(sender, args) {

                //var strData = $("#<%=rcbCustomer.ClientID%>").val()
                var strComboID = $find("<%=rcbCustomer.ClientID%>");
                var strValue = strComboID.get_value();
                var strData = "{strCustomerSoldSelected: '" + strValue + "' }";
                //alert(strData);
                $.ajax({
                    type: "POST",
                    url: "/webservices/ProductServer.asmx/GetShipToData",
                    data: strData,
                    contentType: "application/json; character=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#<%=hidShipTo.ClientID %>").empty().append($("<option></option>").val("[-]").html("Please select"));
                        $.each(msg.d, function () {
                            $("#<%= hidShipTo.ClientID %>").append($("<option></option>").val(this['Value']).html(this['Text']));
                        });
                    },
                    failure: function (xhr, ajaxoptions, thrownError) {
                        alert("Error1:" + xhr.status);
                        alert("Error2:" + thrownError);
                    }
                });
                //alert("the end");
            }

I am then binding the change event for the second dropdownlist as follows:

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());

I then want it to run another function that uses AJAX to get the data to fill some other textboxes. Here is that function (right now it is set to just do an alert until I know it runs):

 function hidShipTo_IndexChanged(sender, args) {
                var strData = "";
                alert("yes");
                $.ajax({
                    type: "POST",
                    url: "/webservices/ProductServer.asmx/PopulateShipToDetails",
                    data: strData,
                    contentType: "application/json; character=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert(msg);
                    },
                    failure: function (xhr, ajaxoptions, thrownError) {
                        alert("Error1:" + xhr.status);
                        alert("Error2:" + thrownError);
                    }
                });
            }

The problem is that the change event doesn't seem to trigger. Any ideas on what could be the cause or maybe a different approach?

Upvotes: 0

Views: 1273

Answers (5)

Michael Mahony
Michael Mahony

Reputation: 1350

I solved this issue by changing from an ASP dropdownlist to a regular SELECT input control and the event bound properly and the code now runs properly. This was a conversion to eliminate postback refreshes, so I really didn't need the ASP dropdownlist. I am still really curious as to why the event wouldn't bind properly, but the problem is now solved. I wanted to post this in case anyone else has a similar problem. Thanks for everyone's help!

Upvotes: 0

JohnnyJS
JohnnyJS

Reputation: 1472

Best way to deal with that is to call it from unnamed function.

like this:

$("#<%=hidShipTo.ClientID%>").change(function(){hidShipTo_IndexChanged();});

Upvotes: 0

DadyFuji
DadyFuji

Reputation: 253

can you take a look how this server-side instruction is rendered on the client-side

    $("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You are calling function not assigning it to event handler

change 

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged()); //Remove ()

to

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged);

Upvotes: 1

epascarello
epascarello

Reputation: 207521

You are not assigning a function, you are calling it

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());
                                                           ^^^

needs to be

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged);
                                                          ^^^

Upvotes: 0

Related Questions