Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3246
  • Last Modified:

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

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
ZekeLA
Asked:
ZekeLA
  • 5
  • 4
2 Solutions
 
AdamSenior DeveloperCommented:
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
 
ZekeLAAuthor Commented:
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
 
AdamSenior DeveloperCommented:
Interesting.

Is the page publicly visible, so I can see it?
0
Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

 
ZekeLAAuthor Commented:
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
 
AdamSenior DeveloperCommented:
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
 
AdamSenior DeveloperCommented:
Hi,

Did this work?

Adam
0
 
ZekeLAAuthor Commented:
accepted
0
 
AdamSenior DeveloperCommented:
All OK with me.

Cyber-spy
0
 
ZekeLAAuthor Commented:
I did not actually test the provided solution as the server side work around is sufficient.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now