Динамическое обновление выбора после изменения предыдущего значения выбора с помощью AJAX - PullRequest
Новая
       3

Динамическое обновление выбора после изменения предыдущего значения выбора с помощью AJAX

0 голосов
/ 04 марта 2020

Мне известно, что это повторяющийся вопрос для всех языков веб-программирования. Я потратил пять часов, пытаясь применить найденные решения безуспешно, поэтому я пишу этот вопрос.

Что я хочу:

  • У меня есть два селектора, оба при загрузке страницы заполняются информацией непосредственно из базы данных успешно.

  • Если я выбираю опцию из первого селектора (selectSchraubfall), я хочу обновить второй селектор (selectWorkplace), показывая только те возможные результаты для первого селектора.

Что я сделал:

  • Создал селекторы внутри jsp, получая информацию от сервлета, который выполняет sql запрос ✔.
  • Создание прослушивателя события onChange для первого селектора ✔.
  • Создание функции js с вызовом Ajax для создания нового запроса от контроллера и получить отфильтрованный список опций для второго выбора ✔.
  • Внутри функции успеха я попытался вставить результат вызова Ajax во второй сел ect via. html (), это не работает. Как я могу ввести JSTL? Другими словами, как я могу внедрить содержимое wpFilteredList в selectWorkplace? 10

Что я пробовал:

  • Использование JSON -> Не работало ✕
  • Использование JAVA скриптов внутри JSP -> Не работает ✕

JSP

html: 

<div class="row">
    <div class="col-md">
        <label style="font-size: 20px;">Schraubfall ID: </label>
        <select id="selectSchraubfall" name="selectSchraubfall" form="formResult" class="form-control" >
            <option>Select ID</option>
            <c:forEach items="${screwdriverlist}" var="screwdriverlist">
                <option><c:out value="${screwdriverlist.screwdriverid}" /></option>
            </c:forEach>
        </select>
    </div>
    <div class="col-md">
        <label style="font-size: 20px;">Workplace: </label>
        <select id="selectWorkplace" name="selectWorkplace" form="formResult" class="form-control">
            <option>Select workplace</option>
            <c:forEach items="${workplaceList}" var="workplaceList">
                <option><c:out value="${workplaceList.workplacename}" /></option>
            </c:forEach>
        </select>
    </div>
</div>

JS: 

var options="";
$("#selectSchraubfall").on('change',function(){
    var value=$(this).val();
    resultSelectValue('Schraubfall', value);
});



function resultSelectValue(columnName, value) {
    // Statements
    var params = {};
        params.colname = columnName;
        params.valuecol = value;

    $.ajax({
            type: "GET",
            url: 'ResultSelectValuesController',
            data: params,
            success: function (data) {
                var workplaceArray = [];
                $("#selectWorkplace").empty().html();

                <c:forEach items="${wpFilteredList}" var="wpFilteredList">
                    //<option value="${wpFilteredList.name}"></option>
                    workplaceArray.push('"${wpFilteredList.name}"');
                </c:forEach>

                $("#selectWorkplace").html(workplaceArray); //I know this is not correct but how can I do something similar using the wpFilteredList?

            },
            error : function(ex) {
                swal("Error", "Error loading workplace info " + ex.Message, "error");
            }
        });
}

Java (ResultSelectValuesController) 

@Override
public void processMethodGET(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {
        String colname = request.getParameter("colname");
        String valuecol = request.getParameter("valuecol");

        if(colname.contains("Schraubfall")) {
            //GET WORKPLACES
            workplacesfilteredlist = wcdao.workplacesListFilter(colname, valuecol);
            request.setAttribute("wpFilteredList", workplacesfilteredlist);
        }

        request.getRequestDispatcher("/Views/Results/ResultPage.jsp").forward(request, response);
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        processError(e, request, response);
    }
}

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Под блоком находится интерполяция на стороне сервера JSTL. Javascript не может обработать этот синтаксис. Код JSTL, указанный ниже, необходимо заменить на версию javascript, которая передает данные из ajax запроса ответа на workplaceArray. 

                <c:forEach items="${wpFilteredList}" var="wpFilteredList">
                    //<option value="${wpFilteredList.name}"></option>
                    workplaceArray.push('"${wpFilteredList.name}"');
                </c:forEach>

Приведенный ниже код добавляет новые данные в элемент select в качестве элементов option. Вам необходимо заменить данные в качестве типа ответа. 

data.forEach(workplace => {
    $('#selectWorkplace').append($('<option>', {
       value: workplace,
       text: workplace
    })
})

После внесения изменений вам больше не нужен указанный ниже код. 

$("#selectWorkplace").html(workplaceArray);
0 голосов
/ 05 марта 2020

Наконец я решил проблему самостоятельно, она работала с помощью Gson. По сути, я возвращаю массив массивов и манипулирую данными так, как хочу в JSP.

. Код теперь:

JSP

function resultSelectValue(columnName, value) {
// Statements
var params = {};
    params.colname = columnName;
    params.valuecol = value;

$.ajax({
        type: "GET",
        url: 'ResultSelectValuesController',
        data: params,
        success: function (data) {
            $( "#selectWorkplace" ).empty();
            $( "#selectSchraubfall").empty();

            var htmlWorkplace = "<option>Seleccionar Workplace</option>";
            var htmlsf = "<option>Todos los Schraubfalls</option>";
            for (i = 0; i < data.length; i++) {
                for(j = 0; j < data[i].length; j++){
                    alert(data[i][j]);
                    if(i == 0) {
                        htmlWorkplace += "<option>"+data[i][j]+"</option>";
                    }
                    if(i == 1){
                        if(data[i][j] != 'null' &&  data[i][j] != null){
                            htmlsf += "<option>"+data[i][j]+"</option>";
                        }
                    }
                }
            }

            $( "#selectWorkplace" ).html(htmlWorkplace);
            $( "#selectSchraubfall").html(htmlsf);

JAVA

@Override
public void processMethodGET(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {

        response.setContentType("application/json");
        String colname = request.getParameter("colname");
        String valuecol = request.getParameter("valuecol");

        if(colname.contains("Atornillador")) {

            //GET WORKPLACES
            wpfilteredlist = wcdao.workplacesListFilter(colname, valuecol);

            //GET SF
            sffilteredlist = sfdao.SFListFiltered(colname, valuecol);


            ArrayList<ArrayList<String>> listGet = new ArrayList<ArrayList<String>>();

            ArrayList<String> wpList = new ArrayList<String>();
            ArrayList<String> sfLista = new ArrayList<String>();



            for (int i = 0; i < wpfilteredlist.size(); i++) {
                wpList.add(wpfilteredlist.get(i).getName());
            }

            for(int i = 0; i < sffilteredlist.size(); i++) {
                sfList.add(sffilteredlist.get(i).getSfname());
            }

            listGet.add(wpList);
            listGet.add(sfList);

            Gson gson = new Gson();
            JsonElement element = gson.toJsonTree(listGet);
            PrintWriter out = response.getWriter();
            out.print(element);

        }
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        processError(e, request, response);
    }
}
...