Solved

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

Posted on 2015-02-20
17
142 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 42

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

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 42

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 42

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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 42

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 42

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…

707 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

16 Experts available now in Live!

Get 1:1 Help Now