jquery script not getting fired inside asp.net user control

Question

0.00/5 (No votes)

See more:

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:

<body>
<table>
<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" ClientIDMode="Static">
                        <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><pre lang="HTML"><pre lang="HTML">

</body>

Following is my javascript code:

<script src="~/Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="~/Scripts/jquery-1.11.2.js">

$("[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>

JavaScript

I have written the jquery function at the bottom of the body, the javascript function is not getting fired. Please help.

Posted 29-Jan-15 0:31am

Sormita

Add a Solution

Comments

Sinisa Hajnal 29-Jan-15 6:56am

Check jQuery documentation on .on() method. It will bind the event wherever, whenever the selector is fulfilled regardless when the control is added.

You could also try using $(document).ready (function () { your change handler goes here});

Sormita 29-Jan-15 7:02am

I already tried to use document.ready function, but it is also not getting invoked. Can you please help check the root cause as to why jquery block is not getting executed?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dominic Abraham · Answer 1 · 2015-01-29T01:04:00

Solution 1

Hi
Please use a separate function and call that function on change event of radio button list.

HTML

function YourFunction()
{
    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");
     }
}

For Ex:

ASP.NET

<asp:radiobuttonlist id="RadioButtonListYesNo" runat="server" repeatdirection="Horizontal" clientidmode="Static" onchange="YourFunction()" xmlns:asp="#unknown">
                       <asp:listitem value="1">Yes</asp:listitem>
                       <asp:listitem value="2">No</asp:listitem>
                       </asp:radiobuttonlist>

Regards
Dominic

Posted 29-Jan-15 1:04am

Dominic Abraham

Comments

Sormita 29-Jan-15 7:21am

Should this function reside under document.ready function in jquery block?

Dominic Abraham 29-Jan-15 7:33am

Not necessary !!

Sormita 29-Jan-15 7:38am

I dont understand why then the alert inside document.ready is not getting fired when the user control is getting loaded. Following is my jquery code:
<script src="~/Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="~/Scripts/jquery-1.11.2.js">

$(document).ready(function () {
alert("In Jquery");
$("[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>

Sinisa Hajnal 29-Jan-15 7:59am

Are you saying this code is in the control file? Not in the page file where you put the control? You have to bind events in the page where the control is, not within the control...also, don't post code into comments it is unreadable and doesn't help your question since someone new to the discussion will read the question first.