javascript - 自动建议不适用于 JSP 包括
问题描述
我正在尝试在我的页面（“AddExceptionAssetID.jsp”）中包含另一个页面（“EHSiteHeadHome.jsp”）。我还想在我的页面中包含自动建议。如果我不包含其他页面但包含其他页面，则自动建议可以正常工作，它不起作用。实际上，jsp:include 并没有发生 Ajax 调用。
AddExceptionAssetID.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Add Exception</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
<script src="bootstrap/js/bootstrap.min.js"></script>
<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>
$(document).ready(function() {
$(function() {
$("#AssetID").autocomplete({
source: function(request, response) {
$.ajax({
url: "AssetAutocomplete",
type: "GET",
data: {
term: request.term
},
dataType: "json",
success: function(data) {
response(data);
}
});
}
});
});
});
</script>
</head>
<body>
<%-- <jsp:include page="EHSiteHeadHome.jsp" /> --%>
<%-- this is where I am facing problem
--%>
<div class="module mx-auto my-auto" style="margin:20px 10px 10px 20px">
<div class="container" style="margin-top:180px">
<span id="ErrorMsg" style="margin-left:100px;color:red;font-weight:bold;">${msg}
</span>
<form class="form" action="AddException" method="post">
<div class="form-group row">
<label for="AssetID" class="col-sm-2 col-form-label col-form-label-sm"> Asset ID: </label>
<input type="text" style="width:150px;" class="form-control col-sm-4 form-control-sm col-form-label-sm" id="AssetID" name="AssetID" onkeyup="showData(this.value);">
</div>
<input type="submit" value="CheckAsset" class="btn btn-primary btn-sm" name="AddException" >
</form>
</div>
</div>
</body>
</html>EHSiteHeadHome.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Site Head</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<style>
body {
font-family: "Lato", sans-serif;
}
.navbar-light .navbar-nav .nav-link {
color: #fff; font-weight: 100px;
}
.navbar-nav .nav-link {
color: #fff;
}
.btco-menu li > a {
padding: 10px 15px;
color: #000;
}
.btco-menu .active a:focus,
.btco-menu li a:focus ,
.navbar > .show > a:focus{
background: transparent;
outline: 0;
background-color: darkgray;
}
.dropdown-menu .show > .dropdown-toggle::after{
transform: rotate(-90deg);
}
i{
margin: 0 20px 0 0;
}
</style>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-toggleable-md bg-dark navbar-light text-white btco-menu " style="background-color: #696969;color: white; ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="EHSiteHeadHome.jsp">
<img src="img/Brand.PNG" style=" height: 50px; width: 80px;border-radius: 15%;">
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item ">
<!-- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-bars"> Menu</i> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item dropdown-toggle" href="#"><i class="far fa-handshake" style="margin: 0 13px 0 0;"></i> Exception</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item " href="AddExceptionAssetID.jsp"> <i class="fas fa-user-plus" style="margin: 0 5px 0 0;"></i> Add</a></li>
<li><a class="dropdown-item " href="UpdateException.jsp"> <i class="fas fa-edit" style="margin: 0 5px 0 0;"></i> Update</a></li>
<li><a class="dropdown-item " href="RemoveException.jsp"> <i class="fas fa-trash" style="margin: 0 15px 0 0;"></i>Remove</a></li>
<li><a class="dropdown-item " href="DownloadException.jsp"> <i class="fa fa-download" style="margin: 0 15px 0 0;"></i>Download Evidence</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-book" style="margin: 0 13px 0 0;"></i> Reports</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item " href="ReportExceptionSiteHead.jsp"> <i class="far fa-check-circle" style="margin: 0 10px 0 0;"></i> View All Records</a></li>
<li><a class="dropdown-item " href="ReportExceptionSiteHeadFiltered.jsp"> <i class="far fa-check-circle" style="margin: 0 10px 0 0;"></i> View Filetered Reports</a></li>
</ul>
<!-- </li>
<li><a class="dropdown-item " href="#"> <i class="fas fa-wrench" style="margin: 0 10px 0 0;"></i> Add Metadata </a>
</li> -->
</ul>
</li>
</ul>
<ul class="navbar-nav ml-auto" style="float:right;">
<li class="nav-item">
<p class="nav-link" href="#" style="padding-right: 20px"><i class="fas fa-user-circle">Site Head    <%= session.getAttribute("activeUser") %> </i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Logout.jsp" style="padding-right: 20px"><i class="fas fa-power-off"></i> </a>
</li>
<!--<li class="nav-item"><a href="#">User</a>
<li class="nav-item"><a href="#">Logout</a>-->
</ul>
</div>
</nav>
<script>
$( document ).ready( function () {
$( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) {
var $el = $( this );
var $parent = $( this ).offsetParent( ".dropdown-menu" );
$( this ).parent( "li" ).toggleClass( 'show' );
if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
}
$( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" );
return false;
} );
} );
</script>
<span id="ErrorMsg" style="margin-left:100px;color:red;font-weight:bold;">${msg}
</span>
</body>
</html>AjaxAutocomplete.java
package controller;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import dao.DBConnector;
/**
* Servlet implementation class AssetAutocomplete
*/
@WebServlet("/AssetAutocomplete")
public class AssetAutocomplete extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AssetAutocomplete() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("INSIDE AUTOCOMPLTE SERVLET");
String term = request.getParameter("term");
System.out.println("Data from ajax call " + term);
Connection con=DBConnector.getConnector();
ArrayList<String> list = new ArrayList<String>();
PreparedStatement ps = null;
String data;
try {
String ch=term+"%";
ps = (PreparedStatement) con.prepareStatement("SELECT * FROM tbl_asset WHERE AssetID LIKE '"+ch+"'");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
data = rs.getString("AssetID");
System.out.println("DATA: "+data);
list.add(data);
}
System.out.println(list);
String json=null;
json = new Gson().toJson(list);
response.getWriter().write(json );
}catch(Exception e)
{
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
AjaxAutocomplete.java 是 ajax 从中请求数据的 java servlet
解决方案
推荐阅读
- java - 如何使用 Simple.json 库读取 Java 中特定值的 Json 文件
- php - Php Json 解码 - 显示二级项的值
- virtual-machine - 自发禁用/启用 1 个节点 proxmox
- python - 分类器：轴 1 超出维度 1 数组的范围
- mysql - 在 MySQL 中显示 1989 年 11 月 21 日（1989 年 11 月 21 日）之前雇用的所有员工
- javascript - Select nth element (among elements with same class name) and style :after pseudo element
- angular - 提交表单后刷新 Mat 表上的数据
- c - Cppcheck 的 ConfigurationNotChecked 错误
- php - 在laravel中面对外墙问题
- ios - 是否可以根据后端响应/UserDefaults 标志显示小部件？