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();
});
Related
I have two jQuery functions one for date time picker
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtDate").datepicker();
});
</script>
And another for Multiselect Dropdown/Listbox with checkbox.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"</script>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
And the ASP code as:
for date time
<asp:TextBox ID="txtDate" runat="server" ></asp:TextBox>
for dropdown
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Guava" Value="4" />
<asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
The problem that I am having is that both of them don't work together if I put them in my code only date time picker works and not the multi-select dropdown and the multi-select dropdown works only when I comment out the corresponding date time picker code.
There is some dysfunctionality which I am not able to figure out.
This is a working sample based on the files you are referencing in your page put it is HTML based not ASPX it will be easy to you to use.
Note:- you were referencing two jquery versions i commented one of them
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>!-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker();
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
</script>
Please find the full sample here
<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
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
I just can't figure out why this is not working. Been stuck on this for a while now. All help is appreciated, thanks in advance.
Here is my aspx page:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="Scripts/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//cdn.ckeditor.com/4.4.5.1/standard/ckeditor.js"></script>
<script type="text/javascript" src="Scripts/ng-ckeditor.min.js"></script>
<script type="text/javascript" src="Scripts/Summaries.js"></script>
<link rel="stylesheet" href="Styles/ng-ckeditor.css">
<link rel="stylesheet" href="Styles/Summaries.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="ui-widget-content" id="try" style="width: 100px; height: 100px; background-color: #f00;"></div>
javascript:
$(document).ready(
function () {
$("#try").resizable({
maxHeight: 1200
});
}
)
jQuery UI depends on jQuery. Judging off your code, you're only including jQuery UI.
Add
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
to your scripts.
Check your console as it stands, you should see jQuery is not defined.
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