Question

I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.

Head-part:

<title>Show/hide element</title>

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

        $('#CheckBoxShowHide').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>

<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

Body-part:

<form id="form1" runat="server">

    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>

</form>

When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.

Answer 1

I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:

<title>Show/hide element</title>

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

        $('#<%=CheckBoxShowHide.ClientID%>').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>

<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

Body-part:

<form id="form1" runat="server">

    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>

</form>

The following line is the only thing I changed:

$('#<%=CheckBoxShowHide.ClientID%>').click(function () {

Hope it helps.