Автозаполнение jQuery UI плагин с JSP и сервлетов не работает

Question

Автозаполнение jQuery UI плагин с JSP и сервлетов не работает

0

Я пытаюсь использовать jQuery пользовательский интерфейс автозаполнения виджет в моем приложении Java Webb.

Как сейчас, у меня есть следующий код:

Просмотр (buscarFoto.jsp)

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type ="text/css" href="css/jquery-ui-1.10.3.custom.css"/>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>
    <h3>Escull usuari</h3>
    <input type="text" id="usuari" name="usuari"/>

    <script>
        $("#usuari").autocomplete({
            source: "Controller?action=llistaUsuaris"
        });
    </script>   
</body>

Контроллер (Controller.java (сервлет)) (DoPost и DoGet перезаписываются, Controller.java отлично работает как Servlet в любой другой части WebApp)

    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();

    try {

        GestioDB_Postgres db = new GestioDB_Postgres();
        HttpSession session = request.getSession();
        String op = request.getParameter("action");

        if (op.equals("llistaUsuaris")) {
            String query = request.getParameter("term");
            List<String> usuaris = db.llistaUsuaris(query);
            Iterator<String> iterator = usuaris.iterator();
            while (iterator.hasNext()) {
                String usuari = (String) iterator.next();
                out.println(usuari);
            }

        }

Вызов базы данных в строке 3 контроллера работает просто отлично (я его протестировал), и сам контроллер тоже работает отлично (он печатает соответствующие "usuaris", когда я запускаю его в NetBeans), отправляет страницу.jsp запрос как "термин", но функция автозаполнения просто ничего не делает.

Я читал в другом вопросе, что кто-то предложил использовать JSON, но я бы предпочел не использовать его, если его можно избежать. Может кто-то указать мне верное направление?

Спасибо.

mustieles 22 окт. 2013, в 13:14

Источник

0

Вы видите какую-либо ошибку в консоли браузера.
me_digvijay 22 окт. 2013, в 10:34
0

Нет, ошибок нет. Я получаю только это: [12: 08: 05.071] GET url * / Controller? Action = llistaUsuaris & term = e [HTTP / 1.1 200 OK 125ms] * (я скрыл фактический URL)
mustieles 22 окт. 2013, в 10:37
0

Ну, я не думаю, что сервлет отправляет результаты в формате массива, который принимается autocomplete . Вы можете проверить ответ на вкладке net в консоли браузера, чтобы узнать, какой сервлет возвращается. Возвращается string не массив. Вы должны разбить строку в массиве в javascript при получении ответа, прежде чем использовать его.
me_digvijay 22 окт. 2013, в 10:45
0

Ответ не появляется на вкладке net . Но я думаю, что попытка передать данные как-нибудь, как массив должен работать, так что следующий шаг должен выяснить это. Благодарю.
mustieles 22 окт. 2013, в 10:57
0

См. Эти сообщения 1 2
Aniket Kulkarni 22 окт. 2013, в 11:16
0

Я использовал 1, но только получил меня так далеко; Я уверен, что это устарело. 2 тоже устарела, но я попробую.
mustieles 22 окт. 2013, в 11:59

Показать ещё 4 комментария

Теги:

java

jquery

jsp

servlets

autocomplete

1 ответ

Ещё вопросы

Вы видите какую-либо ошибку в консоли браузера.
Нет, ошибок нет. Я получаю только это: [12: 08: 05.071] GET url * / Controller? Action = llistaUsuaris & term = e [HTTP / 1.1 200 OK 125ms] * (я скрыл фактический URL)
Ну, я не думаю, что сервлет отправляет результаты в формате массива, который принимается autocomplete . Вы можете проверить ответ на вкладке net в консоли браузера, чтобы узнать, какой сервлет возвращается. Возвращается string не массив. Вы должны разбить строку в массиве в javascript при получении ответа, прежде чем использовать его.
Ответ не появляется на вкладке net . Но я думаю, что попытка передать данные как-нибудь, как массив должен работать, так что следующий шаг должен выяснить это. Благодарю.
Я использовал 1, но только получил меня так далеко; Я уверен, что это устарело. 2 тоже устарела, но я попробую.

Rahul Shivsharan · Answer 1 · 2013-11-15T06-35-00.000Z

Я покажу свой код для автозаполнения, используя jQuery UI pluggin, который я использовал.

пожалуйста, следуйте приведенному ниже коду,

$("#fileNameInput").autocomplete({
        source : function(request,response){
            var url = "autocomplete?type=FileSearch&time="+new Date(); // some URL mapped to servlet
            $.post(url,
                    {   
                        /*
                            'srcIdX' is the extra data i pass, this is send along with 'term',
                            so at servlet i do request.getParamter('term') 
                            and request.getParamter('sourceid')                     
                        */
                        sourceid : $("#srcIdX").val()   
                    },
                    function(data){ 
                        /*
                            here my data which i get from server (i.e. from servlet in response) is as follows
                            {
                                "data" : [
                                    {
                                        "fileName" : "something",
                                        "fileId" : "something",                                         
                                    },
                                    {
                                        "fileName" : "something",
                                        "fileId" : "something",                                         
                                    },......
                                ]
                            }   
                        */
                        var jsonObj  = $.parseJSON(data);
                        if(jsonObj.data != "null"){
                             response($.map(jsonObj.data,function(obj,i){
                                return {
                                    label : obj.fileName,
                                    value : obj.fileName                                        
                                }
                            }))
                        }                        
                    }
            );
        },
        minLength : 1,
        open: function() {
           $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        select: function(event, ui){                                           
            $("#fileIdX").val(ui.item.value);   // THIS IS SOME INPUT HIDDEN WHICH I USE TO STORE THE 'VALUE' OF SELECTED 'LABEL'           

        } 
    });

на стороне сервера я могу передать jSon, используя библиотеку GSON, или просто используя строковый буфер,

PrintWriter out =  response.getWriter();

StringBuffer strb = new StringBuffer();
strb.append("{ \"data\" : [ { \"fileId\" : \"12\", \"fileName\" : \"Rahul_source\" },");
strb.append(" { \"fileId\" : \"13\", \"fileName\" : \"doug_source\" }, ");
strb.append(" { \"fileId\" : \"14\", \"fileName\" : \"sridhar_source\" }, ");
strb.append(" { \"fileId\" : \"15\", \"fileName\" : \"FRT\" }, ");
strb.append(" { \"fileId\" : \"16\", \"fileName\" : \"ASWQ_source\" } ");
strb.append("] } ");    

out.write(strb.toString());

пробовать этот простой подход будет работать