Solved

jquery in asp.net masterpage

Posted on 2010-08-13
3
525 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

734 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