asked on

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

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');
}

Chris Stanyon

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)

psueoc

ASKER

<!-- 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

psueoc

ASKER

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

Chris Stanyon

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/

psueoc

ASKER

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.

Chris Stanyon

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.

psueoc

ASKER

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.

Chris Stanyon

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.

psueoc

ASKER

Can you give me an example using asp controls?

psueoc

ASKER

I don't know if this will help but I will give you whatever I can to do so.


<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   </asp:ListItem>
<asp:ListItem Value="False">No</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</div>
</div>


<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   </asp:ListItem>
<asp:ListItem Value="shareFalse" Text="shareFalse">No</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</div>
</div>

psueoc

ASKER

<!--  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

psueoc

ASKER

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

psueoc

ASKER

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.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

psueoc

ASKER

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?

psueoc

ASKER

Chris is easy to work with and patient.

Chris Stanyon

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 :)