Update existing data Json with ajax post request

up vote
0
down vote

favorite

I have a data.json. With GET request i put it in my 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>

then, when user manipulate with site, on changeId button click - div.form-check changing id to '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>

How to handle this event and update Only Rule.ID value with ajax POST/PUT request and leave the same all another data?

edited Nov 19 at 17:52

asked Nov 19 at 17:33

NickMur

134

its replacing whole .form-check to another div
– NickMur
Nov 19 at 17:44

main question is how to update only needed value and left the same all others with ajax post/put request
– NickMur
Nov 19 at 17:46

updated a question, thank you!
– NickMur
Nov 19 at 17:52

How exactly is that single button related to your multiple fields?
– Taplar
Nov 19 at 17:53

it's moving div.form-check to another div and changing .form-check id to available. All i need is update new id in data.json after changing id
– NickMur
Nov 19 at 18:04

|
show 1 more comment

up vote
0
down vote

favorite

I have a data.json. With GET request i put it in my 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>

then, when user manipulate with site, on changeId button click - div.form-check changing id to '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>

How to handle this event and update Only Rule.ID value with ajax POST/PUT request and leave the same all another data?

edited Nov 19 at 17:52

asked Nov 19 at 17:33

NickMur

134

its replacing whole .form-check to another div
– NickMur
Nov 19 at 17:44

main question is how to update only needed value and left the same all others with ajax post/put request
– NickMur
Nov 19 at 17:46

updated a question, thank you!
– NickMur
Nov 19 at 17:52

How exactly is that single button related to your multiple fields?
– Taplar
Nov 19 at 17:53

it's moving div.form-check to another div and changing .form-check id to available. All i need is update new id in data.json after changing id
– NickMur
Nov 19 at 18:04

|
show 1 more comment

up vote
0
down vote

favorite

I have a data.json. With GET request i put it in my 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>

then, when user manipulate with site, on changeId button click - div.form-check changing id to '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>

How to handle this event and update Only Rule.ID value with ajax POST/PUT request and leave the same all another data?

edited Nov 19 at 17:52

asked Nov 19 at 17:33

NickMur

134

I have a data.json. With GET request i put it in my 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>

then, when user manipulate with site, on changeId button click - div.form-check changing id to '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>

How to handle this event and update Only Rule.ID value with ajax POST/PUT request and leave the same all another data?

// 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>

// 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').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>

$('#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>

javascript jquery ajax post xmlhttprequest

edited Nov 19 at 17:52

asked Nov 19 at 17:33

NickMur

134

edited Nov 19 at 17:52

asked Nov 19 at 17:33

NickMur

134

edited Nov 19 at 17:52

asked Nov 19 at 17:33

NickMur

134

asked Nov 19 at 17:33

NickMur

134

asked Nov 19 at 17:33

NickMur

134

its replacing whole .form-check to another div
– NickMur
Nov 19 at 17:44

main question is how to update only needed value and left the same all others with ajax post/put request
– NickMur
Nov 19 at 17:46

updated a question, thank you!
– NickMur
Nov 19 at 17:52

How exactly is that single button related to your multiple fields?
– Taplar
Nov 19 at 17:53

it's moving div.form-check to another div and changing .form-check id to available. All i need is update new id in data.json after changing id
– NickMur
Nov 19 at 18:04

|
show 1 more comment

its replacing whole .form-check to another div
– NickMur
Nov 19 at 17:44

main question is how to update only needed value and left the same all others with ajax post/put request
– NickMur
Nov 19 at 17:46

updated a question, thank you!
– NickMur
Nov 19 at 17:52

How exactly is that single button related to your multiple fields?
– Taplar
Nov 19 at 17:53

it's moving div.form-check to another div and changing .form-check id to available. All i need is update new id in data.json after changing id
– NickMur
Nov 19 at 18:04

its replacing whole .form-check to another div
– NickMur
Nov 19 at 17:44

main question is how to update only needed value and left the same all others with ajax post/put request
– NickMur
Nov 19 at 17:46

updated a question, thank you!
– NickMur
Nov 19 at 17:52

How exactly is that single button related to your multiple fields?
– Taplar
Nov 19 at 17:53

it's moving div.form-check to another div and changing .form-check id to available. All i need is update new id in data.json after changing id
– NickMur
Nov 19 at 18:04

|
show 1 more comment

1 Answer
1

active

oldest

votes

up vote
0
down vote

When creating rule items, you may set ids which includes Rule.ID (ex:

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

On response from back end, just select every item by ID and update innerHtml/value/style.

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

answered Nov 19 at 17:53

Nosyara

1,4761814

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379885%2fupdate-existing-data-json-with-ajax-post-request%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

When creating rule items, you may set ids which includes Rule.ID (ex:

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

On response from back end, just select every item by ID and update innerHtml/value/style.

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

answered Nov 19 at 17:53

Nosyara

1,4761814

add a comment |

up vote
0
down vote

When creating rule items, you may set ids which includes Rule.ID (ex:

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

On response from back end, just select every item by ID and update innerHtml/value/style.

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

answered Nov 19 at 17:53

Nosyara

1,4761814

add a comment |

up vote
0
down vote

When creating rule items, you may set ids which includes Rule.ID (ex:

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

On response from back end, just select every item by ID and update innerHtml/value/style.

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

answered Nov 19 at 17:53

Nosyara

1,4761814

When creating rule items, you may set ids which includes Rule.ID (ex:

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

On response from back end, just select every item by ID and update innerHtml/value/style.

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

answered Nov 19 at 17:53

Nosyara

1,4761814

answered Nov 19 at 17:53

Nosyara

1,4761814

answered Nov 19 at 17:53

Nosyara

1,4761814

answered Nov 19 at 17:53

Nosyara

1,4761814

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr