Solved

Need change / click / onchange call for asp.net radiobuttonlist using jquery

Posted on 2011-03-04
9
2,868 Views
Last Modified: 2012-08-13
I have the following ASP.NET markup:
Tracking: 
<ASP:RadioButtonList id="radlstXYZThings" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
  <asp:ListItem Value="All" Selected="True">All</asp:ListItem>
  <asp:ListItem Value="XYZ">XYZ Only</asp:ListItem>
  <asp:ListItem Value="NonXYZ">Not XYZ</asp:ListItem>
</ASP:RadioButtonList>
<br>
Dates: 
<ASP:RadioButtonList id="radlstXYZThingDates" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
  <asp:ListItem Value="XYZ" Selected="True">All Dates</asp:ListItem>
  <asp:ListItem Value="NonXYZ">Since Effective Date</asp:ListItem>
</ASP:RadioButtonList>

Open in new window


I'm using jquery to disable all the radiobuttons in the second list on page load and whenever the the "All" choice in the first list is selected. I've got it working in Firefox 3.6. In IE7, the page load part works but not selecting "All". Here are my current jquery scripts:
<script type="text/javascript">   
   function toggleXYZEff() {
      var trkval = $("#<%= radlstXYZThings.ClientID %> input:checked").val();
      if (trkval == 'XYZ') {
         $('#<%= radlstXYZThingDates.ClientID %> input:radio').removeAttr('disabled'); 
      } else {
         $('#<%= radlstXYZThingDates.ClientID %> input:radio').attr('disabled', 'disabled'); 
      }
   }
   $(document).ready(function() {
      $('#<%= radlstXYZThings.ClientID %> input').attr('onclick', 'toggleXYZEff();'); 
      toggleXYZEff();
   });
</script>

Open in new window


Instead of the first line in the ready function, I originally tried
      $("#<%=radlstXYZThings.ClientID%> input").change(function(){  
         toggleXYZEff();
      }); 

Open in new window


And I also tried ".click(function() {" and ".onclick(function() {".

I know toggleXYZEff works. The problem is getting the correct eventhandler attached to the second set of radiobuttons for both FF and IE7. I assume if IE 7 works, so will IE8. I appreciate any help provided.

Thanks in advance.
0
Comment
Question by:ZekeLA
  • 5
  • 4
9 Comments
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 35040577
Without seeing the generated HTML, it's difficult to be specific.

However, there are a few things you can try.

First, look at the generated Javascript (once ASP.Net has added the control names).
Do the selectors match the actual field IDs?

Second, is the event being caught correctly?
Add an 'alert' to the change function (an yes, this is the correct way to catch the event, not by adding the 'onchange' attribute):
     $("#<%=radlstXYZThings.ClientID%> input").change(function(){ 
         alert("here");
         toggleXYZEff();
      }); 

Open in new window


0
 
LVL 1

Author Comment

by:ZekeLA
ID: 35040651
The alert is being caught, but only by FireFox, when I use the onclick method shown in my code. When I use the "correct" way, the event is not caught by either FireFox or by IE 7. I've also tried using "... input:radio" as the selector but no luck their either.

Since toggleXYZEff works correctly in FireFox and since it references both radiobuttonlists, the field names must be correct.

Other thoughts?
0
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 35041039
Interesting.

Is the page publicly visible, so I can see it?
0
 
LVL 1

Assisted Solution

by:ZekeLA
ZekeLA earned 0 total points
ID: 35041387
Unfortunately not. You should be able to just paste the code I gave into your own test page. The script goes into the head section, the rest in the body.

I ended going with a server side attributes solution. That is:
For Each li As ListItem In Me.radlstXYZThings.Items
   li.Attributes.Add("onclick", "javascript:toggleXYZEff();")
Next

Open in new window

This has to be done on every page load because the radiobuttonlist listitems don't store their attributes in viewstate.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 12

Accepted Solution

by:
Cyber-spy earned 500 total points
ID: 35062559
Here you go, tested an working in IE8, FF & Chrome

1.  Your line getting the checked value (var trkval = ...) wasn't getting the value correctly.
2.  The test of the value only looked for 'XYZ' - the 'nonXYZ' was also disabling the second set of buttons.
3.  The onload state wasn't being set correctly - you set up the onchange event (using the .change() function) correctly, but the toggleXYZEff() function also needed to be run once when the page loaded.

ASP.Net does odd things with the HTML. If you look at the generated code, you'll see the two radio lists are both enclosed within a <span> whose ID is  radlstXYZThings.ClientID. The Id's of the individual radio buttons have a _0 and _1 one the end. Their 'name' though is  radlstXYZThings.ClientID.

When you set the .change()  event you can use "#<%  radlstXYZThings.ClientID %> input" which returns all the 'input' fields within the span, but when you want to get an actual radio button value, you have to use

$("input[name='<%= radlstXYZThings.ClientID %>']:checked")

Open in new window


to select the actual checked radio button.

    <script type="text/javascript">
        function toggleXYZEff() {
            var trkval = $("input[name='<%= radlstXYZThings.ClientID %>']:checked").val();

            if (trkval.indexOf('XYZ') != -1) { // Use indexOf to detect both XYZ and nonXYZ
                $('#<%= radlstXYZThingDates.ClientID %> input:radio').removeAttr('disabled');
            } else {
                $('#<%= radlstXYZThingDates.ClientID %> input:radio').attr('disabled', 'disabled');
            }
        }
        $(document).ready(function () {
            // Setup onchange event
            $("#<%=radlstXYZThings.ClientID%> input").change(function () {
                toggleXYZEff();
            });
            // Set the initial state on load
            toggleXYZEff();
        });
 </script>

Open in new window

0
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 35113601
Hi,

Did this work?

Adam
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 35388532
accepted
0
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 35388566
All OK with me.

Cyber-spy
0
 
LVL 1

Author Closing Comment

by:ZekeLA
ID: 35414474
I did not actually test the provided solution as the server side work around is sufficient.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now