i have created 1 master page
and 1 child page
in child page i want to add java script date picker control
but its not working
if i write code on other page without master page it working correctly ... please help
here is child page code
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default123.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<!--
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" />
-->
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function () {
new JsDatePick({
useMode: 2,
target: "TextBox1",
dateFormat: "%m-%d-%Y",
day:5,
month:9,
year:2006,
yearsRange:[1970,2050],
limitToToday:false,
cellColorScheme:"beige",
imgPath:"img/",
weekStartDay:1
});
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
1. List item
Related
I am getting error for jQuery datepicker with master page and content page.
The same jQuery datepicker is working without any issue in page which is independent without/ not part of master page. Tried various solution provided with online but did not help. Please help me to resolve the issue.
0x800a01b6 - JavaScript runtime error: Object doesn't support property
or method 'datepicker'
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!doctype html>
<html class="no-js" lang="en">
<head >
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>ModularAdmin - Free Dashboard Theme | HTML Version </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/vendor.css">
<!-- Theme initialization -->
<script>
var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
{};
var themeName = themeSettings.themeName || '';
if (themeName) {
document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
}
else {
document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
}
</script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.js") %>"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.8.20.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.8.20.js") %>" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="Server"></asp:ContentPlaceHolder>
</head>
<body>
<div class="main-wrapper">
<div class="app" id="app">
<header class="header">
<div class="header-block header-block-collapse hidden-lg-up">
<button class="collapse-btn" id="sidebar-collapse-btn">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="header-block header-block-buttons">
</div>
<div class="header-block header-block-nav">
<ul class="nav-profile">
Content page / Client
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server">
<%-- <script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-ui-1.8.20.js"></script>--%>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.js") %>"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.8.20.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=TEXTBX_DISP_DT1.ClientID%>").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form runat="server" accept-charset="UTF-8" id="new_user" method="post">
<asp:TextBox ID="TEXTBX_DISP_DT1" runat="server"></asp:TextBox>
</form>
</asp:Content>
In a simple web form Pikaday works nice but when I'm using this in a content page it doesn't work, for better understanding I'm giving the code......Thanks in advance
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Test2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<script src="js/pikaday.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
and content page code
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="Test2.WebForm2" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h4>This is from content page</h4>
<asp:TextBox ID="tbxFromDate" runat="server"></asp:TextBox>
<asp:TextBox ID="tbxToDate" runat="server"></asp:TextBox>
<script type="text/javascript">
var picker1 = new Pikaday({
field: document.getElementById('tbxFromDate'),
theme: 'dark-theme'
});
var picker2 = new Pikaday({
field: document.getElementById('tbxToDate'),
theme: 'dark-theme'
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I don't understand what I'm missing
The problem is that tbxFromDate and tbxToDate do not exist in the HTML. Because the Controls are in a Content Control, their ID's are changed to ensure there are no duplicates.
Their ID probably looks something like this: ContentPlaceHolder1_tbxFromDate.
So you need to reference them by their ClientID. So use
<script type="text/javascript">
var picker1 = new Pikaday({
field: document.getElementById('<%= tbxFromDate.ClientID %>'),
theme: 'dark-theme'
});
var picker2 = new Pikaday({
field: document.getElementById('<%= tbxToDate.ClientID %>'),
theme: 'dark-theme'
});
</script>
I have this code In my MasterPage.master
<head runat="server">
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="<%# ResolveUrl("~/") %>script.js" ></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="handle">Click me</div>
</body>
I have this code in my script.js file
$('.handle').on('click', function () {
alert('hello world');
});
When I click the div section, I don't have alert message as i am supposed to have.
I have this code in my Default.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">
</asp:Content>
This is my project directory in visual studio
You execute your JavaScript before the DOM is created. Change your script.js code to
$(document).ready(function () {
$('.handle').on('click', function () {
alert('hello world');
});
});
jQuery live/on only works after loading of the DOM is finished. As an alternative put your JavaScript code after the div-declaration.
I have tried your code and it seems to be fine to me. Let me share with you that code.
MasterPage.master:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="handle">Click me</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$('.handle').on('click', function () {
alert('hello world');
});
</script>
Default.aspx:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
jQuery datepicker not working with master page. datepicker not working while master page id added.
Please find the below code for more information.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" ref="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<p>Date: <input type="text" id="datepicker"></p>
</asp:Content>
You need to add an attribute ClientIDMode="Static" to save the id as is.
I recommend to use class instead but not overide the server generated ID.
Like:
<input type="text" id="datepicker" class="datepicker" />
Then:
$(function () {
$(".datepicker").datepicker();
});
In master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
In content place holder i have tried
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
</asp:Content>
I have tried in asp page working fine. i don't know why its not working in master page.
This will Work for you...
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='TextBox1']").datepicker();
});
</script>
You could also give it a class of something like CssClass="datePicker" and use that to grab it with jQuery:
$(".datePicker").datepicker();
Use Like, In Your Page where Datepicker is Located
Place it at bottom of Page where you Datpicker is located,
Put This Jquery
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="DATEPICKER.JS" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$='TextBox']").datepicker();
});
</script>
change ur content page code to this, remove datepicker style from master page
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
<script type="text/javascript">
`$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
if not working!!! please write ur html result from this content in ur browser here