Issue with Jquery Date picker functionality on Master Page not functioning as expected

My issue is with the 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>

Even though in my content place holder

<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>

It's strange that it works fine on my asp page but not on the master page.

Answer №1

Here is a solution that will suit your needs...

<script type="text/javascript">
    $(document).ready(function() {
    $("input[id$='TextBox1']").datepicker();
});

</script>

You may also assign it a specific class such as CssClass="datePicker" and utilize jQuery to select it:

$(".datePicker").datepicker();

Answer №2

Add this script to enable a Datepicker on your webpage:

Place the following code at the bottom of your webpage where the Datepicker is located and include the necessary jQuery library by clicking here.

<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>

Answer №3

replace the code on your content page with the following, make sure to remove the datepicker style from the 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 the solution does not work, please provide the HTML result from this content in your browser

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to refresh a different webpage within the current session?

In the world of Asp.Net 4, there is a form waiting to be filled with numeric data by the customer. However, this task can sometimes prove tricky as customers may struggle to calculate and input the total figure for each of the four fields. An innovative s ...

Does the current protected route that I am on restrict the user from navigating back to the Home component?

I'm having trouble figuring out how to redirect the user to the Home component when they logout. The API is functioning correctly based on my tests. However, I am unsure of how to implement the logout method in the current context to successfully log ...

A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly? <div class="row"> <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul> <div> ...

Using jQuery to send information to a freshly opened tab and retrieve the response

I'm attempting to transfer information from ClassA to ClassB. To achieve this, I've set up a hidden form within the view page of ClassA and submitted it to ClassB. <form id="invisible_form" action="classB" method="post ...

Navigating collisions in the ECS architecture: Best practices

I'm currently developing a game using typescript and the ECS design pattern. One of the challenges I'm facing is handling collisions between different entities within the game world. I have an entity called Player which comprises several componen ...

Encountering the issue of "Unknown provider" while injecting Angular modules

After following a tutorial on organizing an Angular project, I came up with a structure where I have a ng directory containing all my controllers, services, and the routes.js file. These are then bundled together into an app.js through my configuration in ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

Instructions on dynamically adding a control with an event handler to an update panel and ensuring the event handler triggers a post back using AJAX

I've hit a roadblock with my attempt to make this work. Despite trying various solutions, I can't seem to get it right. Is it possible that what I'm aiming for is just not achievable? Here's the code in the aspx file: <asp:Content ...

modify style when not valid and is touched

When I try to modify the style of an i tag based on the touched and invalid state of another field, only the input tag's style changes and not the i tag. Here's the CSS code I'm using: input.ng-touched.ng-invalid { border-color: red; } ...

Having trouble viewing the page of a new package you published on the NPM Website?

Today, I officially released an NPM package called jhp-serve. It can be easily installed using npm install or run with npx. You can even find it in the search results here: https://www.npmjs.com/search?q=jhp. However, when attempting to view its page by cl ...

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

Objective-C and the World of WebSockets

Possible Duplicates: Comparison of WebSockets, TCP/IP, and JavaScript/AJAX for iPhone chat Integrating WebSockets into a Cocoa application Hello all, our team is embarking on creating a bespoke iPhone chat app and deliberating the use of WebSocket ...

Fetching information from a data object using asyncData in Nuxt

Is there a method to retrieve object properties as keys from the asyncData() function? data() { return { bookmark_btn: { status: null, loading: false } } } I attempted to access data object properties in the following ...

Tips for aligning buttons vertically within the form-row class in Bootstrap 4

I'm facing an issue where I cannot get a set of buttons in line with labels when using different column widths in Bootstrap. The behavior of a button assigned to a specific column width, like col-3, is not the same as a button assigned with automatic ...

The "if" statement carries out the identical action each time it is executed

Despite my efforts to toggle the value of the turn variable every time the if statement runs, I keep encountering the same outcome. It appears that turn consistently evaluates as 2. Below is the code snippet in question: $(function() { var turn = 2; ...

Result being returned from XMLHTTPRequest function

I've been experimenting with an XMLHttpRequest and managed to get the basic code functioning properly. However, I'm struggling to create a function that will return a boolean variable indicating whether it has worked or not: var xhr = new XMLHtt ...

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

Expanding Beyond Boundaries: Utilizing CSS to Overflow From a Div and Fill the Entire Screen

I have a main DIV that acts as part of my responsive layout grid. It grows to the maximum width I've set, which is 1280px, and then adds margins for larger devices. Below you'll find my CSS along with a snippet of Less code. .container { mar ...

Using Backbone: Leveraging a custom extended model when fetching a collection

Currently, I am working on developing a custom Wordpress theme using technologies like Javascript, Requirejs, and Backbonejs. As part of this process, in the index route, I have set up a new postsCollection app.postsCollection = new Posts.Collection(); to ...