JQuery code in ASP .NET content pages

Question

I have made a very simple sample project where I want to toggle an asp .net calendar control through jquery. Could anyone please point out why it is not working. I have made no changes to master page from the sample project provided for ASP .NET web application.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"     AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication5._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js">
</script>
<script language="javascript" type="text/javascript">
// <![CDATA[

    function Button1_onclick() {
       alert( $('<%=Calendar1.ClientID%>'));
        $('<%=Calendar1.ClientID%>').toggle();
    }

// ]]>
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
    Welcome to ASP.NET!
</h2>
<p>
    To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET     Website">www.asp.net</a>.
</p>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?    LinkID=152368&amp;clcid=0x409"
        title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>

First thing: Why are you using such an old version of jQuery? — emerson.marini
– emerson.marini, Commented Oct 29, 2013 at 9:33
It just does not do anything on button click. Only shows the alert. — user2645830
– user2645830, Commented Oct 29, 2013 at 9:35
Sorry I am a bit new to jqyer. The jquery version is the one automatically added in the Visual studio project. Which version should I use? Will that solve the problem? — user2645830
– user2645830, Commented Oct 29, 2013 at 9:36
It won't solve your problem, but it's always a good idea to use a newer version, as you're starting a new project anyway. — emerson.marini
– emerson.marini, Commented Oct 29, 2013 at 9:54

emerson.marini · Accepted Answer · 2013-10-29 11:57:01Z

2

To select an element by its ID on jQuery, you need to precede it with a hash (#):

function Button1_onclick() {
    $('#<%=Calendar1.ClientID%>').toggle();
}

Or, if you don't want to rely on the element ID, give it a class and do it this way:

<asp:Calendar ID="Calendar1" runat="server" CssClass="myCalendar"></asp:Calendar> 

function Button1_onclick() {
    $('.myCalendar').toggle();
}

edited Oct 29, 2013 at 11:57

answered Oct 29, 2013 at 11:47

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Priya Gund · Accepted Answer · 2013-10-29 11:44:33Z

0

I think You are not getting CalendarControl's ID suing JQuery, In Jquery, if you want to access control then it can be like $('#Calendar1').toggle(); Try this one

answered Oct 29, 2013 at 11:44

Priya Gund

1565 bronze badges

1 Comment

Neel Over a year ago

i suggested the same but its not the answer!!

Bcelik · Accepted Answer · 2013-10-29 11:48:36Z

0

jQuery id selector starts with #

function Button1_onclick() {
   alert( $('#<%=Calendar1.ClientID%>'));
    $('#<%=Calendar1.ClientID%>').toggle();
}

answered Oct 29, 2013 at 11:48

Bcelik

1,21610 silver badges10 bronze badges

Comments

Neel · Accepted Answer · 2013-10-29 11:53:12Z

-1

try this..



function Button1_onclick() {
           alert( $('#<%= Calendar1.ClientID %>').val());
           $('#<%= Calendar1.ClientID %>').toggle();
        }

edited Oct 29, 2013 at 11:53

answered Oct 29, 2013 at 9:34

Neel

11.7k3 gold badges46 silver badges63 bronze badges

Collectives™ on Stack Overflow

JQuery code in ASP .NET content pages

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related