I applied this tutorial for doing the autocomplete in my project so all is alright when i put the autocomplete in a page but i want to put the same code in another page and it is not working. my input fileds in the two pages have the same name of "id" and I include all necessary files in my second page as in the first. What is wrong ? Thank you.
This is the code of my second page :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page
import="org.springframework.security.core.context.SecurityContextHolder"%>
<%@ page
import="org.springframework.security.core.userdetails.UserDetails"%>
<%@ page import="org.springframework.security.core.GrantedAuthority"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix='security'
uri='http://www.springframework.org/security/tags'%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gestion des Fiches de service</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/TabCookie.css"
type="text/css" />
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-ui.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/functions.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/tcal.css" />
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/tcal.js"></script>
<script
src="${pageContext.request.contextPath}/js/jquery.easytabs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easytabs.js"></script>
<script
src="${pageContext.request.contextPath}/js/jquery.hashchange.min.js"></script>
<script type="text/javascript">
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$(document).ready(function() {
$('#tab-container').easytabs();
$("#nom").autocomplete({
source : '${pageContext.request.contextPath}/get_names'
});
$("#cin").autocomplete({
source : '${pageContext.request.contextPath}/get_cin'
});
$("#technologies").autocomplete({
source : function(request, response) {
$.getJSON("${pageContext. request. contextPath}/get_nam", {
term : extractLast(request.term)
}, response);
},
search : function() {
// custom minLength
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus : function() {
// prevent value inserted on focus
return false;
},
select : function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
</head>
<body>
<div id="look">
<form:form method="get"
action="${pageContext.request.contextPath}/#"
modelAttribute="ag">
<table id="tabmenu" class="test">
<tr>
<td><input type="radio" name="choice" id="np"
onClick="Affichenp();" />Nom et Prenom :</td>
<td><input type="text" name="nom" id="nom"
class="round default-width-input" /></td>
<td><input
class="button round blue image-right ic-right-arrow"
type="submit" value="" id="nombut"></td>
</tr>
</table>
</form:form>
<form:form method="get"
action="${pageContext.request.contextPath}/#"
modelAttribute="ag">
<table id="tabmenu" class="test">
<tr>
<td><input type="radio" name="choice" id="ns"
onClick="Affichecin();" />CIN :</td>
<td><input type="text" name="cin" id="cin"
class="round default-width-input" /></td>
<td><input
class="button round blue image-right ic-right-arrow"
type="submit" value="" id="cinbut"></td>
</tr>
</table>
</form:form>
<form:form method="get"
action="${pageContext.request.contextPath}/#"
modelAttribute="ag">
<table id="tabmenu" class="test">
<tr>
<td><input type="radio" name="choice" id="ns"
onClick="Afficheppr();" />Numéro de somme :</td>
<td><input type="text" name="ppr" id="ppr"
class="round default-width-input" /></td>
<td><input
class="button round blue image-right ic-right-arrow"
type="submit" value="" id="pprbut"></td>
</tr>
</table>
</form:form>
</div>
</body>
</html>
just one thing, in the first page where the scipt is working i have just this one script but in the second page i have two scripts : Jquery tabs and the autocomplete