I want to use jQuery datepicker in my Struts app
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First JQuery Page</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/mytestcss.css">
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="formdiv">
<s:form>
<s:textfield label="username" name="username" ></s:textfield>
<s:password label="password" name="password" ></s:password>
<s:textfield label="date" id="datepicker" name="date"></s:textfield>
</s:form>
</div>
<input type="text" id="datepicker">
</body>
</html>
Did I miss anything?
Why datepicker is not loading?
You can use s:url tag to build correct path
<script src="<s:url value='/js/jquery-1.11.1.js'/>"></script>
JSTL c:url tag works similar
<script src="<c:url value='/js/jquery-1.11.1.js'/>"></script>
or use JSP EL
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
You should use document ready event to be sure your element is rendered
Try using this:
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First JQuery Page</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/mytestcss.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="formdiv">
<s:form>
<s:textfield label="username" name="username" ></s:textfield>
<s:password label="password" name="password" ></s:password>
<s:textfield label="date" id="datepicker" name="date"></s:textfield>
</s:form>
</div>
</body>
</html>
The .js file was not loaded ,because of /js/jquery-1.11.1.js i changed it to js/jquery-1.11.1.js (removed '/')
Related
I found similar question ajax jquery .load() error 404 but I can't solve this problem.
This is my jsp file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/admincss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://localhost:8080/CarRent/WebContent/pages/demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
and this a structure of my program
Thanks in advance!
I have a file Inside.jsp which is included in the file total.jsp. I have an inputfield in Inside.jsp. When you click in it a calendar is supposed to appear on the screen. If you are in the browser at http://localhost:8080/inside.jsp the calendar opens but if you are in http://localhost:8080/total.jsp nothing happens (the calendar doesn't open instead it's just a normal input field). What can I do to fix that?
I belivee that it has something to do with my scripts or links but it would be good to get an explanation.
Inside.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/total.css">
<link rel="stylesheet"
href="//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
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
$(function() {
$("#pickdate").datepicker();
});
</script>
<title>Inside</title>
</head>
<body>
<input type="text" id="pickdate" class="form-control">
</body>
</html>
Total.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/total.css">
<title>Total</title>
</head>
<body>
<divt><jsp:include page="Inside.jsp" /></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
You're actually including a complete HTML page inside another, with the head and body parts which are already in the Total.jsp page,
To solve such an issue the inside.jsp should remain clean.. just the content you want, and you should move the libraries and css loading to the Total.jsp.
And leave the inside.jsp with only fields and that script which associates datepicket to the field.
Total.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/total.css">
<link rel="stylesheet" href="//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 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>Total</title>
</head>
<body>
<divt><jsp:include page="Inside.jsp" /></div>
</body>
</html>
Inside.jsp:
<script>
$(function() {
$("#pickdate").datepicker();
});
</script>
<input type="text" id="pickdate" class="form-control">
The html file is
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website /title>
<link rel='stylesheet' type='text/css' href='stylesheet4.css'>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
</head>
<body>
<!--other code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
and my script3.js file is
$(function(){
"use strict";
$('#checkOut').click(function(){
var time=2;
alert("The time is "+time+"!");
// more code
});
how am I linking it wrong?
when i used jfiddle to test my code, the alert works when i click the button. however, i'm using notepad++ and i'm not sure what I'm doing wrong.
I see two issues, and something else you should fix.
In the script3.js, you have a missing });. So it should be:
$(function(){
"use strict";
$('#checkOut').click(function(){
var time=2;
alert("The time is "+time+"!");
// more code
});
});
The title tag is not formatted correctly:
<title>My Website /title>
Needs to be:
<title>My Website </title>
EDIT: Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website </title>
<link rel='stylesheet' type='text/css' href='stylesheet4.css'>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
</head>
<body>
<!--other code -->
<input type="button" id="checkOut" value="check out" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
<?php
//require 'includes/db.inc.php';
require 'includes/configs.inc.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php $site_name ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/jquery.imageTickBox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input:[type=checkbox]").imageTickBox({
tickedImage: "/images/checked.png",
unTickedImage: "/images/unchecked.png",
imageClass: "tickbox"
});
});
</script>
</head>
<body>
<div id="mirror" class="center">
<!--some code deleted-->
<input type="checkbox" id="Music" name="hobbies[]" value="Music">
<!--some code deleted-->
</div>
</body>
</html>
any wrong with the code above????name index.php and put it on root dir.
but not work , i see the jquery checkbox plugin guide at
http://blog.leenix.co.uk/2009/10/jquery-plugin-imagetickbox-change-any.html
ALWAYS close your script tags, even if using external resources.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You need to close the jquery script tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I am new to JavaScript and here is a problem when I trying out prototype.
I want to update sample.jsp with Ajax.updater after the it is loaded, but it doesn't work. Here the source of smaple.jsp.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="prototype.js"></script>
<script>
function f1(){
var ajax = new Ajax.updater(
{success: 'state'},'part.html'
,{method:'get'});
}
document.observe('dom:loaded', function() {
f1();
});
</script>
</head>
<body>
state:
<div id="state"></div>
<br>
</body>
</html>
Could anyone tell me what's wrong with my code?
try "Ajax.Updater" (capital U) for starters
also I recommend that you try working with firefox and the firebug plugin, it's a great way to debug your javascript
I have tried another one and it works
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AJAX Zip Checker </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function checkZip() {
if($F('zip').length == 5) {
var url = 'checkzip.jsp';
var params = 'zip=' + $F('zip');
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}
</script>
</head>
<body>
<label for="zip">zip:</label>
<input type="text" name="zip" id="zip" onkeyup="checkZip();" />
<div id="zipResult"></div><p/>
</body>
</html>
checkzip.jsp
<%
String zip = request.getParameter("zip");
if (zip.equals("10009")) {
%>
new york
<%} else {%>
unknown
<% }%>
Could anyone tell me the difference?