Struggling to make the jQuery timepicker plugin work on my JSP page

Question

Struggling to make the jQuery timepicker plugin work on my JSP page

Hi everyone, I'm having trouble getting a jQuery plugin called timepicker to work. I already have a datepicker setup and running smoothly. I've spent hours researching this issue and trying different plugins. Here's my process: I download the plugin, import the .js file into my project's resources/js folder (I'm using Spring), copy the .css file for the timepicker into the resources/css folder. Then, I add a script below the one that imports the standard jQuery library to incorporate the plugin. Below is how I implemented it. Thank you for any help!

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
...
    </div>

javascript jquery html css jsp

Answer 1

Answer №1

It seems that the HTML elements you are trying to apply the datepicker to are not present in your JSP file.

Answer 2

It seems that the HTML elements you are trying to apply the datepicker to are not present in your JSP file.

Answer 3

Answer №2

Thank you for the code update.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Updated Home Page</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery-     ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url     value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>></script>

<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/jquery.timepicker.min.js" />'></script>

<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />

<script type="text/javascript" src="lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib/base.css" />

<script>
$(function() {
  $("#dateStart").datepicker();
  $("#dateEnd").datepicker();
});

$(function() {
    $('timestart').timepicker();

  });
</script>

</head>
<body>
<div id='header-container'>
<div id='header-content'>
    <a href='<c:url value="/" />'>New Website</a>
    <div id='header-content-right'>
        <a href='<c:url value="/signout" />'>Logout, ${ user.email }</a>
    </div>
</div>
</div>
<div id='body-content'>
<h1>
    Event Creator
</h1>
<c:if test="${!empty username}">
    ${username = "User"}
</c:if>
<h3>
    Hello, ${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
    <p><input type='text' name='eventTitle' size='58' placeholder='Enter Title' /></p>
    <p><input type='text' name='eventLocation' size='58' placeholder='Enter Location' /></p>
    <p><textarea name='description' rows='5' cols='42'     placeholder='Description'></textarea></p>
    <p>From<input type='text' name='dateStart' id='dateStart' /> <input id="timestart"     type="text" class="time" /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
    <p><input type='checkbox' name='allDay'> All day event</p>
    <p><input type='checkbox' name='repeat' id='repeat'> Repeat Event</p> 
    <p><input type='submit' /></p>

</form>


</div>
</body>
</html>

Answer 4

Thank you for the code update.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Updated Home Page</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery-     ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url     value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>></script>

<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/jquery.timepicker.min.js" />'></script>

<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />

<script type="text/javascript" src="lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib/base.css" />

<script>
$(function() {
  $("#dateStart").datepicker();
  $("#dateEnd").datepicker();
});

$(function() {
    $('timestart').timepicker();

  });
</script>

</head>
<body>
<div id='header-container'>
<div id='header-content'>
    <a href='<c:url value="/" />'>New Website</a>
    <div id='header-content-right'>
        <a href='<c:url value="/signout" />'>Logout, ${ user.email }</a>
    </div>
</div>
</div>
<div id='body-content'>
<h1>
    Event Creator
</h1>
<c:if test="${!empty username}">
    ${username = "User"}
</c:if>
<h3>
    Hello, ${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
    <p><input type='text' name='eventTitle' size='58' placeholder='Enter Title' /></p>
    <p><input type='text' name='eventLocation' size='58' placeholder='Enter Location' /></p>
    <p><textarea name='description' rows='5' cols='42'     placeholder='Description'></textarea></p>
    <p>From<input type='text' name='dateStart' id='dateStart' /> <input id="timestart"     type="text" class="time" /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
    <p><input type='checkbox' name='allDay'> All day event</p>
    <p><input type='checkbox' name='repeat' id='repeat'> Repeat Event</p> 
    <p><input type='submit' /></p>

</form>


</div>
</body>
</html>

Answer 5

Answer №3

Upon loading the jsp page, I noticed this message appearing at the bottom of the console. Much appreciated.

WARNING : org.springframework.web.servlet.PageNotFound - Unable to map HTTP request for URI [/calendar/jquery.timepicker.min.js] in DispatcherServlet named 'appServlet' WARNING : org.springframework.web.servlet.PageNotFound - Unable to map HTTP request for URI [/calendar/js/jquery.timepicker.js] in DispatcherServlet named 'appServlet' WARNING : org.springframework.web.servlet.PageNotFound - Unable to map HTTP request for URI [/calendar/css/jquery.timepicker.css] in DispatcherServlet named 'appServlet'

Answer 6

Upon loading the jsp page, I noticed this message appearing at the bottom of the console. Much appreciated.

WARNING : org.springframework.web.servlet.PageNotFound - Unable to map HTTP request for URI [/calendar/jquery.timepicker.min.js] in DispatcherServlet named 'appServlet' WARNING : org.springframework.web.servlet.PageNotFound - Unable to map HTTP request for URI [/calendar/js/jquery.timepicker.js] in DispatcherServlet named 'appServlet' WARNING : org.springframework.web.servlet.PageNotFound - Unable to map HTTP request for URI [/calendar/css/jquery.timepicker.css] in DispatcherServlet named 'appServlet'

Struggling to make the jQuery timepicker plugin work on my JSP page

Answer №1

Answer №2

Answer №3

Similar questions

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

Is there a way to reorganize the image/text grid using a media query?

My Vue.js modal component isn't functioning as expected

List items not appearing inline

Employing jQuery to implement a hover animation on IE9, it functions properly when hovering over but exhibits strange behavior upon exiting

Using canvas to smoothly transition an object from one point to another along a curved path

Reloading data in Angular using jQuery DataTables

`Exploring the magic of CSS image overlay feature`

Loading SVGs on the fly with Vue3 and Vite

<a href> hyperlink with the web address as the anchor text

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

textarea and other inputs failing to retain data previously entered

Using Jquery to trim the data returned from the server response

Tips for avoiding HTML injections in HTML tooltips

Uncovering specific content within an html document with the help of BeautifulSoup

Unable to calculate height properly when using the formula height: 70% + 0px

Is it possible to leverage the dimensions (width and height) of an element in JavaScript to obtain a zoom scale?

Why is the bootstrap modal not showing up when editing the data?

Having trouble with sending a post request through ajax

After consolidating buffer geometries, adjusting the transparency/opacity of the shapes is not an option for me