I'm new to using jQuery (in .Net) and I can't seem to get my function to fire. I have a several "tabs". On one I have a radiobuttonlist "rblAddPD3MMReviewNeeded" and I'm trying to show/hide a div on another tab based on the radiobuttonlist value. Here's
my jQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#<%= rblAddPD3MMReviewNeeded.ClientID %>").change(function () {
var value = $('#<%=rblAddPD3MMReviewNeeded.ClientID %> input:checked').val();
I suspect (not at my computer to confirm) that your initial selector is wrong because of the way a rbl is rendered. I think you need to use something like this instead:
And maybe you need to use click instead of change. Give it a try. And to see what I'm talking about look at the html of the rendered page to see exactly how a rbl is rendered.
So the issue must be the tabs. It looks like you are creating them after binding the change event. What if you do the tabs() first then bind change to the radio button list?
When all else fails:
var MyMagic = MagicCode.ReadMyMind();
MyMagic.DoWhatImThinking();
It probably would have been beneficial if I would have also included that this is in a user control? When I view the html the rbl renders with the following id: ctl00_cpContent_ProtocolDeviationForm_rblAddPD3MMReviewNeeded. Is this what you meant?
mah-skeet
Member
42 Points
324 Posts
ASP.NET with jQuery
Feb 19, 2013 06:11 PM|LINK
Hi all,
I'm new to using jQuery (in .Net) and I can't seem to get my function to fire. I have a several "tabs". On one I have a radiobuttonlist "rblAddPD3MMReviewNeeded" and I'm trying to show/hide a div on another tab based on the radiobuttonlist value. Here's my jQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#<%= rblAddPD3MMReviewNeeded.ClientID %>").change(function () {
var value = $('#<%=rblAddPD3MMReviewNeeded.ClientID %> input:checked').val();
if (value == '1') {
$("#pdtabsAdd").tabs("option", "disabled", []);
$("#<%=divMedicalMonitorInternal.ClientID%>").show();
$("#<%=divMedicalMonitorExternal.ClientID%>").hide();
}
else {
$("#pdtabsAdd").tabs("option", "disabled", [4]);
$("#<%=divMedicalMonitorExternal.ClientID%>").show();
$("#<%=divMedicalMonitorInternal.ClientID%>").hide();
}
});
</script>
It doesn't seem to ever call the script. I added an alert above the if statement and it was never called? Can anyone help?
Best regards,
Mark
MetalAsp.Net
All-Star
112162 Points
18252 Posts
Moderator
Re: ASP.NET with jQuery
Feb 19, 2013 07:04 PM|LINK
I suspect (not at my computer to confirm) that your initial selector is wrong because of the way a rbl is rendered. I think you need to use something like this instead:
$("#<%= rblAddPD3MMReviewNeeded.ClientID %> input").change(function () {
And maybe you need to use click instead of change. Give it a try. And to see what I'm talking about look at the html of the rendered page to see exactly how a rbl is rendered.
crowcoder
Participant
1857 Points
345 Posts
Re: ASP.NET with jQuery
Feb 19, 2013 07:16 PM|LINK
Without any tabs, this code works for me.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButtonList ID="rgl" runat="server"> <asp:ListItem Text="oranges" Value="1"></asp:ListItem> <asp:ListItem Text="apples" Value="2" /> <asp:ListItem Text="bananas" Value="3" /> </asp:RadioButtonList> </div> </form> <script type="text/javascript"> $(document).ready(function () { $("#<%= rgl.ClientID %>").change(function () { alert($('#<%=rgl.ClientID %> input:checked').val()); })}); </script> </body> </html>So the issue must be the tabs. It looks like you are creating them after binding the change event. What if you do the tabs() first then bind change to the radio button list?
var MyMagic = MagicCode.ReadMyMind();
MyMagic.DoWhatImThinking();
www.ContrivedExample.com
mah-skeet
Member
42 Points
324 Posts
Re: ASP.NET with jQuery
Feb 19, 2013 08:32 PM|LINK
It probably would have been beneficial if I would have also included that this is in a user control? When I view the html the rbl renders with the following id: ctl00_cpContent_ProtocolDeviationForm_rblAddPD3MMReviewNeeded. Is this what you meant?
MetalAsp.Net
All-Star
112162 Points
18252 Posts
Moderator
Re: ASP.NET with jQuery
Feb 19, 2013 09:39 PM|LINK
Yes that does make a difference. Try something like: yourusercontrolid.FindControl("rblid").ClientID etc.
mah-skeet
Member
42 Points
324 Posts
Re: ASP.NET with jQuery
Feb 20, 2013 01:50 AM|LINK
Hi,
Thank you very much for your help. As you can tell, I'm a novice at best. I've tried the following with no luck:
<script type="text/javascript">
$(document).ready(function () {
$('#<%= ctl00_cpContent_ProtocolDeviationForm.FindControl("rblAddPD3MMReviewNeeded").ClientID %>'.change(function () {
var value = $('#<%= ctl00_cpContent_ProtocolDeviationForm.("rblAddPD3MMReviewNeeded").ClientID %> input:checked').val();
...
</script>
with no luck.
Thanks again in advance for any assistance.
Best regards,
Mark
ToughMan
Participant
1490 Points
635 Posts
Re: ASP.NET with jQuery
Feb 20, 2013 02:16 AM|LINK
What's this?
Plz use ClientID instead of writing them directly.
mah-skeet
Member
42 Points
324 Posts
Re: ASP.NET with jQuery
Feb 20, 2013 07:06 PM|LINK
I realize now that it looks like jQuery isn't initiating when the control opens. If I add an alert just after "$(document).ready(function () {" as in:
<script type="text/javascript">
$(document).ready(function () {
alert("here")
$('#<%= ctl00_cpContent_ProtocolDeviationForm.FindControl("rblAddPD3MMReviewNeeded").ClientID %>'.change(function () {
var value = $('#<%= ctl00_cpContent_ProtocolDeviationForm.("rblAddPD3MMReviewNeeded").ClientID %> input:checked').val();
...
</script>
nothing happens? Why would that be? Also note that this user control is using a masterpage.
Best regards,
Mark
mah-skeet
Member
42 Points
324 Posts
Re: ASP.NET with jQuery
Feb 20, 2013 09:43 PM|LINK
Hi ToughMan - what do you mean by use ClientID instead of writing them directly?
ToughMan
Participant
1490 Points
635 Posts
Re: ASP.NET with jQuery
Feb 21, 2013 12:43 AM|LINK
I mean yours are clientID, plz directly use ID and ClientID property instead.