Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-03-04
9
Medium Priority
?
3,185 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Fill in the form and get your FREE NFR key NOW!

Veeam® is happy to provide a FREE NFR server license to certified engineers, trainers, and bloggers.  It allows for the non‑production use of Veeam Agent for Microsoft Windows. This license is valid for five workstations and two servers.

 
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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

721 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