change event in jQuery, Used For SelectedIndexChanged in ASP.NET DropDown List

Question

I am developing a server control in C#. I am trying to read via jQuery when the selectedindexchanges on a drop down menu.

All my research has alluded to using the change event. As a result, I built a simple test via an alert to see whether this event gets called correctly. Here is my script:

 var builder = new StringBuilder();
 builder.Append("$(document).ready(function() {");
 builder.Append("$($='_ddlMyTest').change(function() {");
 builder.Append("alert('hello');");
 builder.Append("}");
 builder.Append(");");
 builder.Append("}");
 builder.Append(");");

I call this script in my control to register startup scripts:

ScriptManager.RegisterStartupScript(Page, GetType(), "myfunction", String.Format("<script type='text/javascript'> {0}</script>", builder), false);

I know jQuery is registered correctly, and the above is registered correctly if I just throw an alert in the $(document).readyI do see it in my browser.

My rendered HTML for that element looks like a normal select. I have also tried passing in the ClientID rather than using the $='_ddlMyTest' to no effect. I have made sure after that this match.

My question is, does this change event work for when the index is changing in an asp.net dropdown?

David · Accepted Answer · 2014-10-13 14:28:51Z

1

One very important thing to note here is that, in the browser, and from the perspective of JavaScript, there is no such thing as "an ASP.NET DropDown". The HTML element is a select, no different from any other select.

What concerns me is this selector:

$($='_ddlMyTest')

I've never seen that $= syntax before, and it's not clear to me what that's even intending to do. If the id of the client-side element is _ddlMyTest then the selector would be:

$('#_ddlMyTest')

If, as you suggest, the client-side id is different (WebForms has a history of doing that), then you'd need to make sure you're using that id. How did you attempt that? I'm not really certain how you'd get that from within the context of that StringBuilder in the server-side code, but presumably if there's a ClientID property then it would look something like:

builder.Append("$('#" + ClientID + "').change(function() {");

or:

builder.Append(string.Format("$('#{0}').change(function() {", ClientID));

(not sure if the { characters in the JavaScript code would mess with string.Format though) or:

builder.Append("$('#");
builder.Append(ClientID);
builder.Append("').change(function() {");

Whichever you think is more clear, they all essentially should produce the same result with minor performance differences. The point being that it would need to happen in the server-side code since the rendered JavaScript has no knowledge of the ClientID property.

answered Oct 13, 2014 at 14:28

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3010406 Over a year ago

To get the clientID, I added the controls to the WebControl.Controls, then read the value of ClientID from the local variable. In the rendered html, it looks right...ill try some of your suggestions!

David Over a year ago

@user3010406: Glad I could help! I guess it was just that $= syntax in the selector, which may have even been breaking a lot more if it was re-assigning the $ variable in a larger scope :)

DaveN · Accepted Answer · 2016-11-05 02:58:01Z

0

I know this question is old, but you may also use the jQuery "find" syntax $("[id$='ddlMyTest']") to find the control that "ends with" ddlMyTest. A lot of times, this is more convenient than finding the ClientId from code behind.

answered Nov 5, 2016 at 2:58

DaveN

9282 gold badges8 silver badges16 bronze badges

Collectives™ on Stack Overflow

change event in jQuery, Used For SelectedIndexChanged in ASP.NET DropDown List

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related