Solved

How can I get asp .net  radio buttons to change after initial setting using Jquery?

Posted on 2015-02-20
17
149 Views
Last Modified: 2015-02-23
I have two pairs of radio buttons. The .change function of radiogroup1 sets the value of radiogroup2 accordingly. The issue is after the first change function is fired I can not get the radiogroup2 to value to set again.  I have tried many things. So if the user chooses True in radiogroup1 then radiogroup2 sets to "False" but when the user goes back and changes their selection on radiogroup 1 to False then radiogroup2 does not change to "True" as it should. Below is the code:

$("#rblFullOver input").change(function () {
                var type = $(this).val();
              //set button rules
                if (type == "False") {
                    $("#<%= tbCostShareValueOI.ClientID %>").prop("enabled", true);
                    $("#<%= tbCostShareValueOI.ClientID %>").css("background", "Yellow");
                    $("#<%= rfvCostShareValue.ClientID %>").prop("enabled", true);

                    $("#<%= ddlCostShareTypeOI.ClientID %>").val("Cash");
                    $("#<%= ddlCostShareTypeOI.ClientID %>").prop("disabled", true);
                    $("#<%= ddlCostShareTypeOI.ClientID %>").css("background", "none");

             
                    $('#<%=rblCostShare.ClientID%>').find("input[value='True']").attr("checked", "checked");
                    $('#rblCostShareGroup input:radio:checked').trigger('click');
                $('#rblCostShareGroup').prop("disabled", true);
                } else {
                    $("#<%= tbCostShareValueOI.ClientID %>").prop("disabled", true);
                    $("#<%= tbCostShareValueOI.ClientID %>").css("background", "none");
                    $("#<%= rfvCostShareValue.ClientID %>").prop("enabled", false);

                    $("#<%= ddlCostShareTypeOI.ClientID %>").val('-1');
                    $("#<%= ddlCostShareTypeOI.ClientID %>").prop("disabled", false);
                    $("#<%= ddlCostShareTypeOI.ClientID %>").css("background", "Yellow");

                    $('#<%=rblCostShare.ClientID%>').find("input[value='True']").removeAttr('checked');
                    $('#rblCostShareGroup').removeAttr('disabled');
                }
0
Comment
Question by:psueoc
  • 11
  • 6
17 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40622389
It'll be a lot easier for us to help you if you can show us the generated code rather that the server-side ASP stuff. We'll want to see the HTML for your radio groups and the generated jQuery code. You can view source of your page to get to it and then paste it here (using the code button from the toolbar)
0
 

Author Comment

by:psueoc
ID: 40625533
<!-- added #34 task here BEGIN-->
                     <div class="row-fluid">
                        <div class="span12">
                           <div class="span3">
                            <label class="control-label bold">Full Overhead/F&A Recovery</label>
                            <div class="control-group" id="rblFullOver">
                                <div class="controls">
                                <table id="ContentPlaceHolder1_rblFullOverheadFARecovery">
	<tr>
		<td><input id="ContentPlaceHolder1_rblFullOverheadFARecovery_0" type="radio" name="ctl00$ContentPlaceHolder1$rblFullOverheadFARecovery" value="True" /><label for="ContentPlaceHolder1_rblFullOverheadFARecovery_0">Yes   </label></td>
		<td><input id="ContentPlaceHolder1_rblFullOverheadFARecovery_1" type="radio" name="ctl00$ContentPlaceHolder1$rblFullOverheadFARecovery" value="False" /><label for="ContentPlaceHolder1_rblFullOverheadFARecovery_1">No</label></td>
	</tr>
</table>
                            </div>
                            </div>
                         </div>
                      </div>
<!-- added #34 task here END-->

Open in new window

0
 

Author Comment

by:psueoc
ID: 40625546
Sorry missed this on the previous post:

<!-- added #35 task here BEGIN-->
                     <div class="row-fluid">
                        <div class="span12">
                           <div class="span3">
                            <label class="control-label bold">Cost Share</label>
                            <div class="control-group" id="rblCostShareGroup">
                                
                                <table id="ContentPlaceHolder1_rblCostShare">
	<tr>
		<td><input id="ContentPlaceHolder1_rblCostShare_0" type="radio" name="ctl00$ContentPlaceHolder1$rblCostShare" value="True" /><label for="ContentPlaceHolder1_rblCostShare_0">Yes   </label></td>
              <td><input id="ContentPlaceHolder1_rblCostShare_1" type="radio" name="ctl00$ContentPlaceHolder1$rblCostShare" value="False" /><label for="ContentPlaceHolder1_rblCostShare_1">No</label></td>
	</tr>
</table>
                            
                            </div>
                         </div>
                      </div>
                    <!-- added #35 task here END-->

Open in new window

0
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.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40625633
I still can't figure out exactly what you need.

The jQuery you posted contains your ASP variables such as <%= tbCostShareValueOI.ClientID %>. I have no idea what these relate to within your HTML. We need to see the generated jQuery (after the ASP has been parsed).

Have a look at this fiddle. It will toggle the second set of radio buttons in line with the first:

http://jsfiddle.net/ChrisStanyon/7hyasajm/
0
 

Author Comment

by:psueoc
ID: 40625643
The problem is my code only works the first time through. It doesn't toggle after the first time. Actually it does toggle the disable but doesn't remove the value set.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40625664
Hey Leo,

I'm struggling to see exactly what you're trying to achieve. The jQuery you posted looks like this:

   $("#<%= tbCostShareValueOI.ClientID %>").prop("enabled", true);
   $("#<%= tbCostShareValueOI.ClientID %>").css("background", "Yellow");
   $("#<%= rfvCostShareValue.ClientID %>").prop("enabled", true);

But because I have no idea what the value of tbCostShareValueOI.ClientID is, I can't tell what it refers to in your HTML. When you load your page into a browser, it will parse the ASP and the generated code will look more like this:

   $("#someValue").prop("enabled", true);
   $("#someValue").css("background", "Yellow");
   $("#someOtherValue").prop("enabled", true);

At least then I can figure out which elements in your HTML the jQuery is trying to manipulate.

It also looks like you're trying to set the enabled property of certain elements - there is no enabled property - only disabled, and it will only work on form fields - you look like you're trying it on a DIV.
0
 

Author Comment

by:psueoc
ID: 40625683
Your code example does not work for me. An earlier problem was that the I couldn't get the radio buttons to set using an example such as yours. I solved that problem by using the  $('#rblCostShareGroup input:radio:checked').trigger('click'); statement.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40625737
My code example works perfectly! You can test it at the jsfiddle.net site I posted.

I can only work with what I've got and I haven't got the jQuery your page generates, so I'm left guessing as to what you need. If you can post the generated jQuery, and let me know clearly what you want, then I can show you how to achieve that.

Solving the problem by triggering the click event is simply a hack - not a solution.

We can get to the bottom of this, but not if I can't see what you're working with.
0
 

Author Comment

by:psueoc
ID: 40625886
Can you give me an example using asp controls?
0
 

Author Comment

by:psueoc
ID: 40625894
I don't know if this will help but I will give you whatever I can to do so.

<!-- added #34 task here BEGIN-->
                     <div class="row-fluid">
                        <div class="span12">
                           <div class="span3">
                            <label class="control-label bold">Full Overhead/F&A Recovery</label>
                            <div class="control-group" id="rblFullOver">
                                <div class="controls">
                                <asp:RadioButtonList runat="server" ID="rblFullOverheadFARecovery" RepeatDirection="Horizontal">
                                    <asp:ListItem Value="True">Yes&nbsp;&nbsp;&nbsp;</asp:ListItem>
                                    <asp:ListItem Value="False">No</asp:ListItem>
                                </asp:RadioButtonList>
                                  </div>
                            </div>
                         </div>
                      </div>
                    <!-- added #34 task here END-->
                    <!--  added #35 task here BEGIN-->
                     <div class="row-fluid">
                        <div class="span12">
                           <div class="span3">
                            <label class="control-label bold">Cost Share</label>
                            <div class="control-group" id="rblCostShareGroup">
                               <div class="controls">
                                <asp:RadioButtonList runat="server" ID="rblCostShare" RepeatDirection="Horizontal">
                                    <asp:ListItem Value="shareTrue"  Text="shareTrue">Yes&nbsp;&nbsp;&nbsp;</asp:ListItem>
                                    <asp:ListItem Value="shareFalse" Text="shareFalse">No</asp:ListItem>
                                </asp:RadioButtonList>
                                </div>
                            </div>
                            </div>
                         </div>
0
 

Author Comment

by:psueoc
ID: 40625895
<!--  added #34 task here BEGIN-->
                     <div class="row-fluid">
                        <div class="span12">
                           <div class="span3">
                            <label class="control-label bold">Full Overhead/F&A Recovery</label>
                            <div class="control-group" id="rblFullOver">
                                <div class="controls">
                                <asp:RadioButtonList runat="server" ID="rblFullOverheadFARecovery" RepeatDirection="Horizontal">
                                    <asp:ListItem Value="True">Yes&nbsp;&nbsp;&nbsp;</asp:ListItem>
                                    <asp:ListItem Value="False">No</asp:ListItem>
                                </asp:RadioButtonList>
                            	</div>
                            </div>
                         </div>
                      </div>
                    <!-- added #34 task here END-->
                    <!-- added #35 task here BEGIN-->
                     <div class="row-fluid">
                        <div class="span12">
                           <div class="span3">
                            <label class="control-label bold">Cost Share</label>
                            <div class="control-group" id="rblCostShareGroup">
                               <div class="controls">
                                <asp:RadioButtonList runat="server" ID="rblCostShare" RepeatDirection="Horizontal">
                                    <asp:ListItem Value="shareTrue"  Text="shareTrue">Yes&nbsp;&nbsp;&nbsp;</asp:ListItem>
                                    <asp:ListItem Value="shareFalse" Text="shareFalse">No</asp:ListItem>
                                </asp:RadioButtonList>
                                </div>
                            </div>
                            </div>
                         </div>  

Open in new window

0
 

Author Comment

by:psueoc
ID: 40625986
Ok Thank Chris,

What I want:

1. When Full Overhead/F&A Recovery is checked "no" then check Cost Share to "yes".
2. When Full Overhead/F&A Recovery is checked "no" then disable Cost Share so the user cannot change the value.
3. When When Full Overhead/F&A Recovery is checked "yes" then uncheck Cost Share "yes" or "no" so the user has to make a  Cost Share selection. #3 can be solved by disabling Cost Share until a  Full Overhead/F&A Recovery selection has been made so Cost Share is only enabled if Full Overhead/F&A Recovery equals "yes"


Regarding the jquery code here is what is generated via the browser view source:
 // added #34 task here
            // Toggle Cost Share, Cost Share Type, Cost Share Value if Full Overhead/F&A Recovery is "false"

//                }
                ///////////////////////////////////

                $("#rblFullOver input").change(function () {
                    var shareValue = $(this).val() == "True" ? "False" : "True";
                    $('input[value=' + shareValue + ']', '#rblCostShareGroup').prop('checked', true); 
                });

                //////////////////////////////////////

           // });

Open in new window

0
 

Author Comment

by:psueoc
ID: 40626029
Hey Chris,

So the reason for my original post was because I could not get the value of Cost Share to reset meaning clear. I am glad you mention the the .trigger('click') is a hack but I tried everything and running out of options and time on this project.

Thanks for your patience.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40626092
Hey Leo,

I've updated the fiddle to what I think you're after -> http://jsfiddle.net/ChrisStanyon/7hyasajm/

There are a couple of fundamental points I think would help your understanding here, and hopefully explain why I've been struggling to get what you need.

When you write a page in ASP or PHP, you're writing what's called server-side code. When you then view the page in your browser, that code becomes client-side code. jQuery only works with client-side code. It doesn't EVER see your server-side code.

If you write this:

<asp:RadioButtonList runat="server" ID="rblFullOverheadFARecovery" RepeatDirection="Horizontal">

It means absolutely nothing to jQuery - it never sees it, so it is completely irrelevant to jQuery (and to people helping you with jQuery problems). All jQuery is interested in is what the page looks like AFTER it gets to the client (your browser). That is why I needed to see the output from your browser, not the ASP code you actually wrote.

Have look at the fiddle and see if it makes sense. I've added some comments, so hopefully that'll help.
0
 

Author Comment

by:psueoc
ID: 40626189
Chris,

That's it! Thanks so much!  I will study this for to better understand asp controls and jquery.
Will you leave the jsfiddle up?
0
 

Author Closing Comment

by:psueoc
ID: 40626192
Chris is easy to work with and patient.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40626211
Excellent - knew we'd get there in the end.

Yeah - I'll leave the fiddle where it is.

Any more problems, you know where we are :)
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

785 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