CODEWITHSUNDEEP
jqueryspring
Souad
Souad

Reputation: 5084

Spring MVC autocomplete works just in one page in the eclipse project

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

Upvotes: 0

Views: 833

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Include jquery first and then jqueryUi

<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.js"></script>

Upvotes: 1

Related Questions