Обновить существующие данные Json с помощью пост-запроса ajax - PullRequest
Новая
       13

Обновить существующие данные Json с помощью пост-запроса ajax

0 голосов
/ 19 ноября 2018

У меня есть data.json.С запросом GET я положил его в свой index.html 

// example of data
//  "Rule": [
//        {
//          "Name": "rule 1",
//          "RulebookID": 2,
//          "RuleId": 72,
//          "ID": "assotiated"
//        },
//        {
//          "Name": "rule 2",
//          "RulebookID": 1,
//          "RuleId": 92,
//          "ID": "available"
//        },
      
$.ajax({
  url: 'http://localhost:3000/Main',
  type: 'GET',
  headers: { accept: 'application/json;odata=verbose;' },
})
  .done(rules)
  .fail((jqXHR, status, errorThrown) => {
    console.log(`problem loading data: ${errorThrown}`);
  });
  
  function rules(data) {
  data.Rule.forEach((obj) => {
    $('#availableRules').append(
            `<div class="form-check" id="${obj.ID}">
              <input class="form-check-input" type="checkbox"
                value="${obj.RuleId}" id="${obj.RuleId}"/>
              <label class="form-check-label" for="${obj.RuleId}">GDPR${obj.RulebookID} - ${obj.Name}</label>
            </div>`,
  });
<div class="form-group">
  <div class="checkboxes" id="availableRules">
  </div>
</div>

затем, когда пользователь манипулирует сайтом, по нажатию кнопки changeId - div.form-check, изменяющий id на 'available' 

$('#changeId').click(() => {
  const p = $('#availableRules .form-check-input').parent('div').detach();
  p.attr('id', 'available');
  $('#availableRules').append(p);
});
<button class="btn btn-primary" id="changeId">Change id</button>

Как обработать это событие и обновить значение только Rule.ID с помощью запроса POST / PUT ajax и оставить те же все остальные данные?

1 Ответ

0 голосов
/ 19 ноября 2018

При создании элементов правила вы можете установить идентификаторы, которые включают Rule.ID (например: 

itemHtml = `<span id="rule_${Rule.ID}>...</span>`

В ответе от серверной части просто выберите каждый элемент по идентификатору и обновите innerHtml / value / style. 

responseItems.forEach((item) => { $("#rule_"+item.ID).html = ...
...