0

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.

Thomas Thor Nielsen
  • 71
  • 1
  • 7

4 Answers4

2

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.

Pasha Immortals
  • 829
  • 1
  • 7
  • 19
  • 1
    +1 and if you end up putting that in an external file, you'll want to use `$('[id*="CheckBoxShowHide"]')` – Mikey G Feb 07 '12 at 23:06
1

If jQuery is on your masterpage, it will work on your child page.

Master <head>

<head>
     <script type="text/javascript" src="js/jquery.js"></script>
</head>

Child <head>

<head>
    <script type="text/javascript">
        $(document).ready(function () {
             //Do Child jQuery Stuff here....
        });
    </script>
<head>

If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)

Use this to make sure that isn't the issue if the other thing I suggested doesn't work:

For your Master Page <head>:

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

Or (if you want to host it)

<head>
     <script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>

Where ~/ is your root.

Jason
  • 11,435
  • 24
  • 77
  • 131
1

Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.

Zachary
  • 6,522
  • 22
  • 34
  • If you don't want to use the "ResolveURL" trick posted by JBausmer, at least use `/js/jquery.js` - which will default your browser to looking at the site's root for the js directory. – Troy Alford Jun 19 '12 at 21:45
0

You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:

<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>

The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.

JBausmer
  • 914
  • 9
  • 11