Не получается внедрить ajax.reload()

@javanoobie · Регистрация: 13.12.2017

Студворк — интернет-сервис помощи студентам

Всем Привет!
Решил попрактиковатся c ajax и застрял на простом

Как мне добавить ф-ю delete,update к каждой таске?
И можно сделать что бы таблица рефрешелась сразу после добавления таски?
может как то через ajax.reload()?

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <title>WebMonitor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/ajaxGet.js"></script>
    <script src="js/ajaxPost.js"></script>
</head>
<body>
 
<div class="container">
    <h1>Tasks List</h1>
 
        <thead>
 
        <form id="frm" method="post" name="frm">
            <input  id="url" name="url" placeholder="url" type="text" />
            <input  id="exceptedHttpResponseCode'" name="exceptedHttpResponseCode" placeholder="exceptedHttpResponseCode" type="text" />
 
            <button class="subscribe-box__btn" type="submit">Post</button>
        </form>
 
 
 
        <table id = "monitorTable" class="table">
 
        <tr>
            <th>Id</th>
            <th>Url</th>
            <th>HTTP</th>
            <th>Status</th>
            <th>Active</th>
 
        </tr>
        </thead>[JS][/JS]
 
        <tbody>
 
 
        </tbody>
 
    </table>
 
 
</div>
</body>
</html>

ajaxGet.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function()
{
    $.ajax({
        url: "monitor/all",
        type: "GET",
        dataType:"json",
        success: function (response)
        {
            var trHTML = '';
            $.each(response, function (key,value) {
                trHTML +=
                    '<tr><td>' + value.id +
                    '</td><td>' + value.url +
                    '</td><td>' + value.exceptedHttpResponseCode +
                    '</td><td>' + value.status +
                    '</td><td>' + value.active +
                    '</td></tr>';
            });
 
            $('#monitorTable').append(trHTML);
        }
    });
});

ajaxPost.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function(){
    $("#frm").on("submit", function(event) {
        event.preventDefault();
 
        var formData = {
            'url': $('input[name=url]').val(),
            'exceptedHttpResponseCode': $('input[name=exceptedHttpResponseCode]').val()
 
        };
        console.log(formData);
 
        $.ajax({
            url: "/monitor/add",
            type: "post",
            data:JSON.stringify(formData) ,
            contentType:"application/json",
            success: function(d) {
                alert(d);
            },
 
        });
 
    });
 
});

@sash23 · 17.01.2018, 02:47

Вместо

JavaScript
1
$('#monitorTable').append(trHTML);

используйте

JavaScript
1
$('#monitorTable tbody').html(trHTML);

То есть будет происходить замена содержимого tbody.
Чтобы обновить таблицу используйте этот же код.
Но лучше его обернуть в функцию.
Примерный код. Не уверен что заработает не проверял.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//Функция для обновления таблицы
function getTable() {
  $.ajax({
    url: "monitor/all",
    type: "GET",
    dataType:"json",
    success: function (response) {
      var trHTML = '';
      $.each(response, function (key,value) {
        trHTML +=
          '<tr><td>' + value.id +
          '</td><td>' + value.url +
          '</td><td>' + value.exceptedHttpResponseCode +
          '</td><td>' + value.status +
          '</td><td>' + value.active +
          '</td></tr>';
      });
 
      $('#monitorTable tbody').html(trHTML);
    }
  });
}
 
$(document).ready(function() {
  // Первым делом получаем таблицу
  getTable();
  
  $("#frm").on("submit", function(event) {
    event.preventDefault();
    
    var formData = {
      'url': $('input[name=url]').val(),
      'exceptedHttpResponseCode': $('input[name=exceptedHttpResponseCode]').val()
    };
 
    console.log(formData);
    
    // Отправляем
    $.ajax({
      url: "/monitor/add",
      type: "post",
      data:JSON.stringify(formData) ,
      contentType:"application/json",
      success: function(d) {
        // Если удачно обновляем таблицу т.е. получаем ее заново.
        getTable();
        alert(d);
      },
    });
  });
});

@javanoobie · 17.01.2018, 03:26 **[ТС]**

Спасибо тебе за помощь!а не подскажешь как в аяксе можно красиво прикрепить кнопки delete и update на каждый приходящий таск?

JavaScript
1
2
3
4
5
6
7
8
9
10
   var trHTML = '';
            $.each(response, function (key,value) {
                trHTML +=
                    '<tr><td>' + value.id +
                    '</td><td>' + value.url +
                    '</td><td>' + value.exceptedHttpResponseCode +
                    '</td><td>' + value.status +
                    '</td><td>' + value.active +
                    '</td></tr>';
            });

я так понял сначало нужно заинджектить в var,потом уже делать ф-ю ,так?

@sash23 · 17.01.2018, 04:21

Ну можно в переменую trHTML добавить еще одну ячейку с кнопками. Потом на эти кнопки повесить соответствующие обработчики.
Пример

HTML5
1
<button data-id="[сюда пихаешь id]" class="btn btn-danger btn-sm delBtn">Delete</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
// вешаешь обработчик
$('.delBtn').on('click', function() {
  // Получаешь id
  var id = $(this).data('id');
  
  /* 
    Далее делаешь запрос к серверу. После чего 
    при успешном удалении из таблицы можно 
    удалить соответствующую строку или же
    обновить таблицу полностью как было описано ранее.
  */
});

@javanoobie · 17.01.2018, 21:22 **[ТС]**

так можно ?

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function() {
    (function update_table(){
        $.ajax({
            url: '/monitor/delete',
            type: 'DELETE',
            dataType: "json",
            success: function (event) {
                $('.delBtn').on('click', function () {
                    var id = $(this).data('id');
 
                });
            }
        });
 
        $.ajax({
            url: "monitor/all",
        type: "GET",
        dataType: "json",
        success: function(response) {
            var trHTML = '';
            $.each(response, function(key, value) {
                trHTML += '<tr><td>' + value.id + '</td><td>' + value.url + '</td><td>' + value.exceptedHttpResponseCode + '</td><td>' + value.status + '</td><td>' + value.active
                    + '</td><td><button data-id="delBtn" class="btn btn-danger btn-sm delBtn">Delete</td></tr>';
 
            });
 
            $('#monitorTable').html(trHTML);
 
            setTimeout(update_table,2000);
 
        }
 
    });
    })();

Добавлено через 4 часа 33 минуты
sash23, К сожалению так тоже не delete не реагирует

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
$(document).ready(function() {
 
    var __getTable_timeout = 0;
 
 
 
    function getTable() {
 
        clearTimeout(__getTable_timeout);
 
        $.ajax({
 
            url: "monitor/all",
 
        type: "GET",
 
        dataType: "json",
 
        success: function(response) {
 
            var trHTML = '';
 
            $.each(response, function(key, value) {
 
                trHTML += '<tr><td>' + value.id + '</td><td>'
                    + value.url + '</td><td>'
                    + value.exceptedHttpResponseCode + '</td><td>'
                    + value.status + '</td><td>'
                    + value.active + '</td>' +
                    '<td><button data-id="delBtn" class="btn btn-danger btn-sm delBtn">Delete</td></tr>';
 
            });
 
            $('#monitorTable').html(trHTML);
 
            __getTable_timeout = setTimeout(getTable, 1000);
 
        }
 
    });
 
    };
 
    getTable();
 
 
 
    $("#frm").on("submit", function(event) {
 
        event.preventDefault();
 
        $.ajax({
 
            url: "/monitor/add",
 
        type: "post",
 
        data: JSON.stringify({
 
                'url': $('input[name=url]').val(),
 
        'exceptedHttpResponseCode': $('input[name=exceptedHttpResponseCode]').val()
 
    }),
 
        contentType: "application/json",
 
        success: getTable,
    });
 
    });
 
 
 
    $('#monitorTable').on('click','a.delBtn',function(){
 
        $.ajax({
            url: '/monitor/delete/' +$(this).data('id'),
        type: 'DELETE',
        dataType: "json",
        success: getTable
 
    });
 
    });
});

@j2FunOnly · 17.01.2018, 21:34

Сообщение от javanoobie

JavaScript
1
'<td><button data-id="delBtn" class="btn btn-danger btn-sm delBtn">Delete</td></tr>'

Вставляете кнопку, а обработчик вешаете на ссылку

Сообщение от javanoobie

JavaScript
1
$('#monitorTable').on('click','a.delBtn',function(){

Измените на

JavaScript
1
$('#monitorTable').on('click', 'button.delBtn', function () {

Добавлено через 1 минуту
И вам советовали же id подставить там, а вы подставляете что?

JavaScript
1
'<td><button data-id="' + value.id + '" class="btn btn-danger btn-sm delBtn">Delete</td></tr>';

Добавлено через 55 секунд
Если не секрет, на чём бэкенд?

@javanoobie · 17.01.2018, 21:57 **[ТС]**

j2FunOnly,sash23, бекэнд на спринге . К сожалению всеравно не получается)
Не понимаю в чем проблема.с аяксом не дружу к сожалению

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$(document).ready(function() {
 
    var __getTable_timeout = 0;
 
 
 
    function getTable() {
 
        clearTimeout(__getTable_timeout);
 
        $.ajax({
 
            url: "monitor/all",
 
        type: "GET",
 
        dataType: "json",
 
        success: function(response) {
 
            var trHTML = '';
 
            $.each(response, function(key, value) {
 
                trHTML += '<tr><td>' + value.id + '</td><td>'
                    + value.url + '</td><td>'
                    + value.exceptedHttpResponseCode + '</td><td>'
                    + value.status + '</td><td>'
                    + value.active + '</td>' +
                    '<td><button data-id="delBtn" + value.id + class="btn btn-danger btn-sm delBtn">Delete</td></tr>';
 
            });
 
            $('#monitorTable').html(trHTML);
 
            __getTable_timeout = setTimeout(getTable, 1000);
 
        }
 
    });
 
    };
 
    getTable();
 
 
 
    $("#frm").on("submit", function(event) {
 
        event.preventDefault();
 
        $.ajax({
 
            url: "/monitor/add",
 
        type: "post",
 
        data: JSON.stringify({
 
                'url': $('input[name=url]').val(),
 
        'exceptedHttpResponseCode': $('input[name=exceptedHttpResponseCode]').val()
 
    }),
 
        contentType: "application/json",
 
        success: getTable,
    });
 
    });
 
 
 
    $('#monitorTable').on('click','button.delBtn',function(){
        var id = $(this).data('id');
 
        $.ajax({
            url: '/monitor/delete/' +$(this).data('id'),
        type: 'DELETE',
        dataType: "json",
        success: getTable
 
    });
 
    });
});

Добавлено через 9 минут
выдает
"timestamp": 1516215349725,
"status": 400,
"error": "Bad Request",
"exception": "org.springframework.web.method.annotati on.MethodArgumentTypeMismatchException",
"message": "Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "delBtn"",
"path": "/monitor/delete/delBtn"
}

;
бекэнд норм работает, удаляет по id без проблем http://localhost:8080/monitor/delete/1

@sash23 · 17.01.2018, 22:08

javanoobie,

Я же сказал что id нужно вставить.

JavaScript
1
2
3
4
5
6
 trHTML += '<tr><td>' + value.id + '</td><td>'
                    + value.url + '</td><td>'
                    + value.exceptedHttpResponseCode + '</td><td>'
                    + value.status + '</td><td>'
                    + value.active + '</td>' +
                    '<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm delBtn">Delete</td></tr>';

Здесь же понятно в чем ошибка

JavaScript
1
2
3
4
5
6
7
{"timestamp": 1516215349725,
"status": 400,
"error": "Bad Request",
"exception": "org.springframework.web.method.annotation.MethodArgumentTypeMismatchException",
"message": "Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "delBtn"",
"path": "/monitor/delete/delBtn"
}

@javanoobie · 18.01.2018, 01:14 **[ТС]**

sash23, Да ,я что то протупил совсем,спасибо за помощь ,простите за тупость)

Добавлено через 3 часа 1 минуту
sash23, Решил повесить еще обработчики на новую кнопку,все работает;но столкнулся с проблемой, как в данном варианте можно приходящие в строку true и false преобразовать в activate и deactivate?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    $('#monitorTable').on('click','button.activeBtn',function(){
        var id = $(this).data('id');
 
        $.ajax({
            url: '/monitor/deactive/' +$(this).data('id'),
            type: 'POST',
            dataType: "json",
            success: getTable
 
        });
 
    });
    $('#monitorTable').on('click','button.activeBtn',function(){
        var id = $(this).data('id');
 
        $.ajax({
            url: '/monitor/active/' +$(this).data('id'),
            type: 'POST',
            dataType: "json",
            success: getTable
 
        });
 
    });

@sash23 · 18.01.2018, 01:44

javanoobie, В какую строку?

@javanoobie · 18.01.2018, 01:47 **[ТС]**

sash23, value.exceptedHttpResponseCode мне выводит true/false , обработчики меняют состояние,как можно переименовать получаемые true/false в "active" и "deactive"?

@sash23 · 18.01.2018, 01:51

Внутри функции getTable: value.exceptedHttpResponseCode заменить на

JavaScript
1
value.exceptedHttpResponseCode ? "active" : "deactive"

@javanoobie · 18.01.2018, 02:18 **[ТС]**

sash23, понял, но это value.active ,сделал ,
value.active ? "active" : "deactive"

было так:

стало так:

тоесть когда я делаю on/off меняется статус, true/false ,вот не могу понять как можно переименовть в active/deactive

Добавлено через 18 минут
sash23, так не работает к сожалению

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

Не получается внедрить ajax.reload()

Решение

Решение

@sash23 563 / 410 / 259 Регистрация: 31.05.2016 Сообщений: 1,105
	18.01.2018, 01:44
	javanoobie, В какую строку? 0

@javanoobie 0 / 0 / 0 Регистрация: 13.12.2017 Сообщений: 32
	18.01.2018, 01:47 [ТС]
	sash23, value.exceptedHttpResponseCode мне выводит true/false , обработчики меняют состояние,как можно переименовать получаемые true/false в "active" и "deactive"? 0

@javanoobie 0 / 0 / 0 Регистрация: 13.12.2017 Сообщений: 32
	18.01.2018, 02:18 [ТС]
	sash23, понял, но это value.active ,сделал , value.active ? "active" : "deactive" было так: стало так: тоесть когда я делаю on/off меняется статус, true/false ,вот не могу понять как можно переименовть в active/deactive Добавлено через 18 минут sash23, так не работает к сожалению 0