Jquery function is not getting fired in asp.net user control

Question

I have created a user control which contains RadioButtonList. Based on the RadioButtonList selection a particular would be visible or hidden. Following is my HTML code:

<tr>
                            <td align="left" valign="middle">
                            <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
                            Are you the Financial Analyst/Manager responsible for this profit center?
                            </font>
                            </td>
                            <td align="left" valign="middle">
                            <asp:RadioButtonList ID="RadioButtonListYesNo" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="1">Yes</asp:ListItem>
                            <asp:ListItem Value="2">No</asp:ListItem>
                            </asp:RadioButtonList>
                            </td>
                            </tr>

<tr>
                        <td>
                        <div id="divFAFMQues" style="visibility:hidden;">                                               
                        <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
                        Who is the FM/FA of this profit center?
                        </font> 
                        </div>                      
                        </td>
                        <td>
                        <div id="divFAFM" style="visibility:hidden;">
                        <input name="FAFM" type="text" id="TextFAFM" maxlength="20"/> 
                         </div>
                        </td>
                        </tr>

Following is my Jquery function:

 <script src="~/Scripts/jquery-1.11.2.js" type="text/javascript">
        $(document).ready(function () {

            $("input[id$=RadioButtonListYesNo]").change(function () {
                alert("In Jquery");
                var res = $('input[type="radio"]:checked').val();

                if (res == '1') {
                    $("#divFAFMQues").css("visibility", "hidden");
                    $("#divFAFM").css("visibility", "hidden");
                }
                else {

                    $("#divFAFMQues").css("visibility", "visible");
                    $("#divFAFM").css("visibility", "visible");
                }
            });
        });
    </script>

The Jquery function is not getting fired at all, I could not make the alert to get executed. Where am I going wrong here? Do I need to add any more jquery files to my solution?

Kstro21 · Accepted Answer · 2015-01-30 13:37:34Z

1

you need to separate the inclusion of jquery and your js code, something like this

<script src="~/Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {

        $("input[id^=RadioButtonListYesNo]").change(function () {
            alert("In Jquery");
            var res = $('input[type="radio"]:checked').val();

            if (res == '1') {
                $("#divFAFMQues").css("visibility", "hidden");
                $("#divFAFM").css("visibility", "hidden");
            }
            else {

                $("#divFAFMQues").css("visibility", "visible");
                $("#divFAFM").css("visibility", "visible");
            }
        });
    });

</script>

use 2 separate script tag, one for adding a js script file and another for inline js code.

Now, jquery says:

$('[id^=hello]') selects all elements that have an ID beginning with hello.
$('[id$=hello]') selects all elements that have an ID ending with hello.

with your code asp.net generates 2 input of type radio with id RadioButtonListYesNo_0 and RadioButtonListYesNo_1. In your code your are using the selector id$=RadioButtonListYesNo that will never match any of the inputs, so, you need to change it for id^=RadioButtonListYesNo as i wrote above.

edited Jan 30, 2015 at 13:37

answered Jan 28, 2015 at 13:54

Kstro21

7,84114 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sormita Chakraborty Over a year ago

I have changed the script function as you have mentioned in your answer but I am getting Object not found error in JS runtime, since this is a user control, the html starts with <table> tag-do you think this is the reason that document object could not be found in the jquery function?

Kstro21 Over a year ago

try to move your script tags to the end of the body tag, then you can use your code without $(document).ready

Kstro21 Over a year ago

exactly in which line are you getting the error and what it says?

Sormita Chakraborty Over a year ago

I am getting the error in $("input[id$=RadioButtonListYesNo]").change(function () line itself, I am getting the error even after I wrote the <script> part at the bottom of body tag and without document.ready function. The error is JS Runtime error: Object expected.

Sormita Chakraborty Over a year ago

The "Object Expected" error is gone now but the jquery is not getting fired, I cannot execute the "alert" inside the Jquery, can you please help.

Collectives™ on Stack Overflow

Jquery function is not getting fired in asp.net user control

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related