Question

我有一个文件Inside.jsp，它包含在total.jsp文件中。我在Inside.jsp中有一个输入字段。当您单击它时，屏幕上应显示日历。如果您在http://localhost:8080/inside.jsp的浏览器中，日历会打开，但如果您在http://localhost:8080/total.jsp，则不会发生任何事情（日历不会打开，而只是一个正常的输入字段）。我该怎么做才能解决这个问题？

我相信它与我的脚本或链接有关，但最好能得到解释。

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>

Answer 1

您实际上是在另一个内部包含一个完整的HTML页面，其中包含已在Total.jsp页面中的头部和正文部分，要解决这样的问题，inside.jsp应该保持干净..只需要你想要的内容，你应该将库和css加载到Total.jsp。

将inside.jsp保留为只包含字段和将datepicket与字段相关联的脚本。

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

包含在另一个JSP文件中时，Datepicker无法正常工作

1 个答案: