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
Related
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>
<script type="text/javascript">
$(document).ready(function() {
$('#LkForgot').on('click', function (e) {
alert("The paragraph was clicked.");
});
});
</script>
The above code doesn't work. When I click on #LkForgot within ContentPlaceHolder, it doesn't alert
This is the my masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<head id="Head1" runat="server">
<title>viber bulk sender</title>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/autosize.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/custombox.min.css">
<script src="script/custombox.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="font-family: Tahoma; font-size: 12px;">
<form id="form1" runat="server">
<div class="main register relative" style="min-height: 100%; margin: 0; text-align: center;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
This is the script within the Content control:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="CSS/custombox.min.css">
<script src="script/custombox.min.js"></script>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/autosize.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$('#LkForgot').on('click', function (e) {
Custombox.open({
target: '#ddd',
effect: 'fadein'
});
e.preventDefault();
});
});
</script>
<asp:LinkButton ID="LkForgot" runat="server">Forgot Password</asp:LinkButton>
<div id="ddd">
adsfasdfasd
</div>
</asp:Content>
any help would be appreciated.
Thanks
Register your control event like:
$('[id$=LkForgot]').on('click', function (e) {
Custombox.open({
target: '#ddd',
effect: 'fadein'
});
e.preventDefault();
});
Or
use ClientIDMode as static in linkbutton.
Try modify the source path like this
<script type="text/javascript" src='<%= ResolveUrl("~/script/jquery-1.11.1.min.js")%>' ></script>
When you put something inside ContentPlaceHolder, its id will be changed when rendered to client's browser.
So you have to use .class for this because you are using div.
If there are any server controls, you can use following code to get clientside id.
$("#<%=ServerControl1.ClientID%>").click(function(){
//CODE
});
Add jquery file like this
<script type="text/javascript" src='<%= ResolveUrl("~/script/jquery-1.11.1.min.js")%>' ></script>
then
<script>
$(document).ready(function () {
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
});
</script>
try this
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
OR
$(document).ready(function () {
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
});
You call the function with the class name. because the ids are changes when page created. OR you can inspect the page html and get the right id of the element. or
Im using the jquery dialog box and i am trying to stop the postback from happening when calling the dialog, so its basically handled on client side.
I am calling the dialog open from my Treeview's SelectedNodeChanged
protected void tvTreeList_SelectedNodeChanged(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", string.Format("ParentNodeClick('{0}','{1}')", lblDescText, lblTitleText), true);
}
this is my javascript function
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
Is there any way i can do this? Already tried to use this but it doesnt seem to work.
$("#dialog").parent().appendTo(jQuery("form:first"));
Full html on masterpage
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Data Source</title>
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="Style/jquery.css" rel="stylesheet" type="text/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>
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
</head>
<body>
<form id="form1" runat="server" style="align-content:center; height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="dialog" title="">
<p></p>
</div>
<div runat="server" style="text-align:center;">
<h1 style="color:#505050;">Datastatus from Data servers</h1>
</div>
<asp:ContentPlaceHolder ID="cphContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
and my treeview
<div id="TreeList">
<asp:TreeView ID="tvTreeList" runat="server" OnSelectedNodeChanged="tvTreeList_SelectedNodeChanged" >
<NodeStyle CssClass="NodeStyle"/>
<HoverNodeStyle CssClass="HoverNodeStyle"/>
<SelectedNodeStyle CssClass="SelectedNodeStyle" />
</asp:TreeView>
</div>
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