Данные на страницу jsp отправляются, а в таблицу не прогружаются

 
 
 
Сообщения:51
Здравствуйте!

Есть контроллер с функцией, которая загружает таблицы на web-страницу (UserController). Он Используется 2 раза:
1-ый раз - первоначальная загрузка - 1-ая таблица заполняется 2-я, 3-я, 4-я и 5-я прогружаются пустыми (так должно быть и так есть);
2-ой раз (после нажатия кнопки "Загрузить") - прогружается 1-ая и 2-ая по порядку следования таблицы, а последние 3-и не прогружаются. Если на место 2-ой поставить 3-ю, то она прогрузится, но 2-ая, которую мы переместили на 3-е место не загрузится.

Не пойму в чем дело, почему грузятся именно первые 2-е по порядку, в независимости что это за таблицы, а последние 3-и не грузятся?
Данные точно передаются на страницу jsp - проверял через отладчик, ну и об этом говорит то, что если поднять на верх какую-то из непрогружающихся таблиц, то она прогрузится.

Страница jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
    <title>Страница администратора</title>
    <style>
        table {table-layout: fixed;width:98%; height: 200px; margin-top: 16px; border: black; }
        .tr{background: cornflowerblue; color: white; text-align: center; vertical-align: center; horiz-align: center;}
        td {word-wrap:break-word; text-align-all: center; border: black; align: center;}
        .container {
            height: 200px;
            overflow: scroll;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
        }
    </style>
</head>
<body>
<H2>Посты наблюдения</H2>
<div class="container">
<table class="tablePost">
    <thead>
    <tr class="tr">
        <th>ID поста</th>
        <th>Имя поста</th>
        <th>Координаты</th>
     </tr>
    </thead>
    <tbody>
    <c:forEach items="${listPosts}" var="post">
        <tr>
            <td>${post.idPost}</td>
            <td class="post">${post.namePost}</td>
            <td class="geo">${post.geographkoords}</td>
         </tr>
    </c:forEach>
    </tbody>
</table>
    <script>
        document.querySelector('table.tablePost').addEventListener("click", e => {
            var tr = e.target.closest("tbody > tr");
            if (!tr) return;
            var position = tr.querySelector("td.geo").textContent;//Берём нужную ячейку
            position = position.split(/\s+/).map(Number); //Разбиваем содержимое ячейки
            var post = tr.querySelector("td.post").textContent;//Берём нужную ячейку
            document.FormDownload.latitude.value=position[0];
            document.FormDownload.longitude.value = position[1];
            document.FormDownload.post.value = post;
        });
    </script>
</div>
<br>
<div>
    <form name="FormDownload" method="GET" action="/water/water/administration">
    Широта: <input type="text" name="latitude"/>
    Долгота:<input type="text" name="longitude"/>
    Пост: <input type="text" name="post"/>
    Год с:<input type="text" name="yearStart"/>
    Месяц с:<input type="text" name="monthStart"/>
    День с:<input type="text" name="dayStart"/>
    Год по:<input type="text" name="yearFinish"/>
    Месяц по:<input type="text" name="monthFinish"/>
    День по:<input type="text" name="dayFinish"/>
        <button tybe="submit">Загрузить</button>
    </form>
</div>
<br>
<H2>Данные с ресурса DarkSky</H2>
<div class="container">
    <table>
        <thead>
        <tr class="tr">
            <th>Координаты</th>
            <th>Дата</th>
            <th>Время</th>
            
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${listWeatherDarkSky}" var="weatherdarkSky">
            <tr>
                <td>${weatherdarkSky.koords}</td>
                <td>${weatherdarkSky.localDateStr}</td>
                <td>${weatherdarkSky.localTimeStr}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<br>
<H2>Данные c файла</H2>
<div class="container">
    <table>
        <thead>
        <tr class="tr">
            <th>ID Поста</th>
            <th>Дата</th>
            <th>Время</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${hydrologyListFile}" var="hydrologyListFile">
            <tr>
                <td>${hydrologyListFile.namePost}</td>
                <td>${hydrologyListFile.localDate}</td>
                <td>${hydrologyListFile.localTime}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<br>
<div>
    <form name="formDowloadFile" method="POST">
        <input type="text" name="downloadFile"/>
        <button type="button" onclick="getAjax('/water/water/downloadFile',printGet,'downloadFile')">Загрузить из файла</button>
    </form>
</div>
<br>
<H2>Объединённые данные</H2>
<div class="container">
    <table class="flood">
        <thead>
        <tr class="tr">
            <th>Индификатор поста</th>
            <th>Дата</th>
            <th>Время</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${listFlood}" var="flood">
            <tr>
                <td>${flood.postByPostId.namePost}</td>
                <td>${flood.date}</td>
                <td>${flood.time}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<br>
<div>
    <form name="formDowload" method="POST">
        <input type="text" name="downloadAgregate"/>
        <button type="button" onclick="getAjax('/water/water/downloadAgregate',printGet,'downloadAgregate')">Загрузить объединенные данные</button>
    </form>
</div>
<H2>Исторические данные</H2>
<div class="container">
    <table class="tableDataBase">
        <thead>
        <tr class="tr">
            <th>Координаты</th>
            <th>Населённый пункт</th>
            <th>Дата</th>
            <th>Время</th>
       </tr>
        </thead>
        <tbody>
        <c:forEach items="${listDataBaseFlood}" var="DataBaseFlood">
            <tr>
                <td class="post">${DataBaseFlood.namePost}</td>
                <td>${DataBaseFlood.date}</td>
                <td>${DataBaseFlood.time}</td>
                <td>${DataBaseFlood.snowRain}</td>
           </tr>
        </c:forEach>
        </tbody>
    </table>
    <script>
        document.querySelector('table.tableDataBase').addEventListener("click", e => {
            var tr = e.target.closest("tbody > tr");
            if (!tr) return;
            var post = tr.querySelector("td.post").textContent;//Берём нужную ячейку
            document.FormDell.post.value = post;
        });
    </script>
</div>
<br>
<div>
    <form name="FormDell" method="GET" action="/water/water/administrationDell">
        Пост: <input type="text" name="post"/>
        Год с:<input type="text" name="yearStart"/>
        Месяц с:<input type="text" name="monthStart"/>
        День с:<input type="text" name="dayStart"/>
        Год по:<input type="text" name="yearFinish"/>
        Месяц по:<input type="text" name="monthFinish"/>
        День по:<input type="text" name="dayFinish"/>
        <button tybe="submit">Удалить</button>
    </form>
</div>
<script>
    function createXMLHttp() {
        var Request = false;

        if (window.XMLHttpRequest)
        {
            //Gecko-совместимые браузеры, Safari, Konqueror
            Request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        {
            //Internet explorer
            try
            {
                Request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (CatchException)
            {
                Request = new ActiveXObject("Msxml2.XMLHTTP");
            }
        }
        if (!Request)
        {
            alert("Невозможно создать XMLHttpRequest");
        }
        return Request;
    }
    function getAjax(url, callback, body) { // функция Ajax GET
        // создаем Объект
        var oXmlHttp = createXMLHttp();
        var body=body+'='+encodeURIComponent('value');
        // подготовка, объявление заголовков
        oXmlHttp.open("POST", url, true);
        oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
        // описание функции, которая будет вызвана, когда придет ответ от сервера
        oXmlHttp.onreadystatechange = function() {
            if (oXmlHttp.readyState == 4) {
                if (oXmlHttp.status == 200) {
                    callback(oXmlHttp.responseText);
                } else {
                    callback(oXmlHttp.statusText);
                }
            }
        }
        oXmlHttp.send(body);
    }
    function printGet(text) {
        alert(text);
    }
</script>
</body>
</html>
Изменен:05 июн 2020 19:55
 
 
Сообщения:51
Была ошибка в названии поля. Вопрос разрешился.
 
Модераторы:Нет
Сейчас эту тему просматривают:Нет