?
Solved

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

Posted on 2011-03-04
9
Medium Priority
?
3,354 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:Adam
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:Adam
ID: 35041039
Interesting.

Is the page publicly visible, so I can see it?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
LVL 12

Accepted Solution

by:
Adam earned 2000 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:Adam
ID: 35113601
Hi,

Did this work?

Adam
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 35388532
accepted
0
 
LVL 12

Expert Comment

by:Adam
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In real business world data are crucial and sometimes data are shared among different information systems. Hence, an agreeable file transfer protocol need to be established.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

601 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