Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

jquery in asp.net masterpage

Hi, I am using jquery in an asp.net form with a master page. Initially I could only get the jquery to work in a plain document not using a master page. But looking at the source when the page was running i noticed that where I had put the following source in the content section on the child page:

<input id="btnAnimate" type="button" value="Animate" />
        <asp:Panel ID="Panel1" runat="server">
        Some sample text in this panel        
        </asp:Panel>

it had changed the Panel id to
 <asp:Panel ID="ctl00_ContentPlaceHolder1_Panel1" runat="server">

so to get this to work I had to rename the object in the header content to reflect this.

<script type="text/javascript">
        $(document).ready(function() {
            $("#btnAnimate").click(function() {
            $("#ctl00_ContentPlaceHolder1_Panel1").animate(
            {
                width: "350px",
                opacity: 0.5,
                fontSize: "16px"
            }, 1800);
            });
        });
 </script>

My issue is why is this happening. As the ID is being changed dynamically when the page is run, how can I guarantee that the prefix placed will always be ctl00_ContentPlaceHolder1_ as I am not setting this. How does this get set and can I controll this. Also further issues arrise such as when using different browsers.

Many thanks in advance for any advice
0
Simon Cripps
Asked:
Simon Cripps
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
Typical ASP issue

1. use classes instead OR
2. use $("<%= Panel1.ClientID %>").animate
0
 
Michel PlungjanIT ExpertCommented:
So

<input id="btnAnimate" type="button" value="Animate" />
        <asp:Panel ID="Panel1" class="animatePanel" runat="server">
        Some sample text in this panel        
        </asp:Panel>

then have

<script type="text/javascript">
        $(document).ready(function() {
            $("#btnAnimate").click(function() {
            $(".animatePanel").animate(
            {
                width: "350px",
                opacity: 0.5,
                fontSize: "16px"
            }, 1800);
            });
        });
 </script>

Open in new window

0
 
Simon CrippsAuthor Commented:
many thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now