Error when i calling jquery in master page - asp.net

I have calender datetimepicker jquery.
when I am calling this in simple aspx page then its working fine but when i am calling in the page where master page attach then its not working.
Here's the code that I am using:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs"
Inherits="Default11" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="ui.all.css" rel="stylesheet" type="text/css" />
<link href="demos.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui.datepicker.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<title>Untitled Page</title>
</head>
<script type="text/javascript">
$(function() {
$("#txt").datepicker();
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
That is working fine.
But when I am calling like this then its not showing calender
<%# Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="CAL.aspx.cs"
Inherits="admin_CAL" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPHMain" Runat="Server">
<link href="ui.all.css" rel="stylesheet" type="text/css" />
<link href="demos.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui.datepicker.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#TextBox1").datepicker();
});
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>

ASP.net changes the ID of your control - you see it clearly by checking the source of your generated page. Try:
$("[id$='TextBox1']").datepicker();
This checks for an element who's ID ends with "TextBox1".
Alternately, you can solve this at server side:
$('#<%= TextBox1.ClientID %>').datepicker();

Is there an element with an id of TextBox1? If you open the page in Firefox and use the Firebug console what kind of error is it spitting out?
You need to be a bit more informative for us to be able to help you.

Related

Failure to run js on master pages

Here, when I give runat="server" to the <input type=text , javascript doesn't work anymore, while without runat="server" the program runs correctly.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="js-persian-cal.css" rel="stylesheet" />
<script src="js-persian-cal.min.js"></script>
<link href="jspc-gray.css" rel="stylesheet" />
<link href="jspc-peach.css" rel="stylesheet" />
<link href="jspc-royal_blue.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<%--This line is executed on this page. But when I use runat="server" it doesn't run anymore--%>
<asp:TextBox class="pdate" runat="server" id="pcal1"></asp:TextBox> <%--This line does not work--%>
<%-- <input type="text" class="pdate" id="pcal1">--%> <%--// This line is executed--%>
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1');
</script>
</div>
</asp:Content>
masterpage img
enter image description here
<asp:TextBox class="pdate" runat="server" id="pcal1"></asp:TextBox> <%--This line does not work--%>
<%-- <input type="text" class="pdate" id="pcal1">--%> <%--// This line is executed--%>
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1');
</script>

Child Page Doesn't Pick Up Styles From Master

I can't get my child page to pick up styles defined in my master. Here is what I did:
I created a stylesheet Main.css in the root of my app
body {
background-color:red;
}
I created a Master Page Site.Master in the root of my web application
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="WebApplication1.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="Main.css" rel="stylesheet" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
Master Page`
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
This shows up with a red background fine in the designer
I created a child page WebForm.aspx in the root of my app
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Child Page Contents
</asp:Content>
But this doesn't show a red background either in the designer or at runtime. When I view source there is no css declaration in the file, yet it is picking up the master page because it displays "Master Page Child Page Contents"
Restructure your Master Page to look like this:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="Main.css" rel="stylesheet" type="text/css" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
Master Page`
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
You need to link the stylesheet in the head tag, not the ContentPlaceHolder one.
Replace this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="Main.css" rel="stylesheet" />
</asp:ContentPlaceHolder>
with
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Main.css" rel="stylesheet" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
The link to your css sheet is inside a content place holder.

Issue with Calendar control in asp.net

I am using calendar control with ASP.NET to fill in a text box with the selected date. When a date is selected, it should be displayed in the label But the label doesnot show the selected date. Please help. Thankyou.
Here is my code to get the date into the label:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<script runat="server">
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = Calendar1.SelectedDate.ToString();
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MakeAppointment
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="form1" runat="server" style="height: 388px">
<h2>MakeAppointment<asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
</h2>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</asp:Content>
Try specifying language="c#".
<script language="c#" runat="server">
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = Calendar1.SelectedDate.ToString();
}
</script>
Just a suggestion, you should go for jQuery UI Datapicker
Demo: Datapicker
Code Sample:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

AJAX tags giving error: Sys is undefined

Below is the code of my Master Page. When I enable ScriptManager and related tags (as shown below), IE generates error: Sys is undefined while debugging. When I disable AJAX, the error is not shown. The page and related code is working properly irrespective of the error shown or not shown.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<!-- Project CSS attachments -->
<link href="Stylesheets/StyleSheet2.css" rel="stylesheet" type="text/css" />
<link href="Stylesheets/ReportsMenu.css" type="text/css" rel="Stylesheet" />
<link href="Stylesheets/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="Stylesheets/TubewellReportsMenu.css" rel="stylesheet" type="text/css" />
<!-- JQuery Core attachment -->
<link href="Resources/JQueryScripts/Core/jquery-1.6.4.min.js" type="text/javascript" />
<link href="Resources/JQueryScripts/Core/jquery.min.js" type="text/javascript" />
<!-- JQuery MSG Plugin library attachments -->
<link href="Resources/JQueryScripts/MsgPlugin/jquery.center.min.js" type="text/javascript" />
<link href="Resources/JQueryScripts/MsgPlugin/jquery.msg.js" type="text/javascript" />
<link href="Resources/JQueryScripts/MsgPlugin/jquery.msg.min.js" type="text/javascript" />
<link href="Resources/JQueryScripts/MsgPlugin/jquery.msg.css" rel="Stylesheet" type="text/css" />
<!-- JQuery Message Box Library attachments -->
<link href="Resources/JQueryScripts/MsgBox/jquery.dragndrop.min.js" type="text/javascript" />
<link href="Resources/JQueryScripts/MsgBox/jquery.msgbox.js" type="text/javascript" />
<link href="Resources/JQueryScripts/MsgBox/jquery.msgbox.css" type="text/javascript" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div runat="server">
<div class="TopBand" runat="server">
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Default.aspx" >Home</asp:LinkButton>
<asp:LinkButton ID="lbAdministration" runat="server" PostBackUrl="~/Admin.aspx" >Administration</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="~/pheTubewellFiles/contentReportTubewellMenu.aspx">Tubewell Reports</asp:LinkButton>
<asp:LinkButton ID="lbReports" runat="server" PostBackUrl="~/pheSchemeFiles/contentReportSchemesMenu.aspx">Scheme Reports</asp:LinkButton>
<asp:LinkButton ID="lbRegister" runat="server" PostBackUrl="~/pheSchemeFiles/contentReportAllSchemeTypes.aspx">Register</asp:LinkButton>
</div>
<div id="divContentPlaceHolder" runat="server" class="ContentPlaceHolder">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
The error shown at run-time in IE debugger is this:
Why is ScriptManager and related AJAX tags giving this error?
You are using <link> tags to include javascript files. They should be included like this:
<script type="text/javascript" src="script.js"></script>
You also have one of your last <link> tags importing a css file but its type set to javascript:
<link href="Resources/JQueryScripts/MsgBox/jquery.msgbox.css" type="text/javascript" />
Solve these problems and maybe the rest will work?

Are there nested master pages in ASP.NET MVC?

I wanted to know if the MVC framework can leverage the Nested Master Page? If so does anyone have some info on how to achive this?
We use nested master pages frequently, in order to seperate layout from standard includes and site wide markup, like so:
Site.Master:
<%# Master Language="C#" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewMasterPage<PageViewModel>" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="language" content="en">
<title><asp:ContentPlaceHolder ID="Title" runat="server"><%= Model.Page.Title %></asp:ContentPlaceHolder></title>
<% Html.RenderPartial("Head"); %>
<meta name="robots" content="index, follow">
<meta name="robots" content="noodp">
<asp:ContentPlaceHolder ID="ExtraHead" runat="server"></asp:ContentPlaceHolder>
</head>
<body >
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</body>
</html>
then have a another master using the Site.Master,
Standard.Master:
<%# Master Language="C#" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewMasterPage<PageViewModel>" MasterPageFile="Site.Master" %>
<asp:Content ContentPlaceHolderID="ExtraHead" runat="server">
<asp:ContentPlaceHolder ID="ExtraHead" runat="server"></asp:ContentPlaceHolder>
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</asp:Content>
Yep. I just saw a blog post about this at: http://jeffreypalermo.com/blog/asp-net-mvc-and-the-templated-partial-view-death-to-ascx/
Very cool stuff.

Resources