Solved

jquery in asp.net masterpage

Posted on 2010-08-13
3
522 Views
Last Modified: 2012-05-10
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
Comment
Question by:Simon Cripps
  • 2
3 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33429641
Typical ASP issue

1. use classes instead OR
2. use $("<%= Panel1.ClientID %>").animate
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 33429672
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
 

Author Closing Comment

by:Simon Cripps
ID: 33465940
many thanks
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question