Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery in asp.net masterpage

Posted on 2010-08-13
3
Medium Priority
?
528 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 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

704 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