Solved

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

Posted on 2011-03-04
9
2,917 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error on link 14 40
Message not shown 5 34
Sorting a string 1 18
geting geocode of a user with using Google maps api 8 21
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

863 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

24 Experts available now in Live!

Get 1:1 Help Now