jsGrid: How to delay updates to grid until callback finishes?
I am using js-grid for performing inline edits. I am using the callbacks onItemInserting
, onItemUpdating
andonItemDeleting
to make AJAX calls to perform server-side INSERT, UPDATE and DELETE operations respectively. However the issue is the client side updates to grid are happening before callbacks of the AJAX calls are executed. As a result, client side updates are taking place irrespective of server-side operation result.
Here is partial code of my application:
function displayConfigTable(config) {
let parameters = {
configName: config
};
$.getJSON("/configure", parameters, function(data, textStatus, jqXHR) {
displayGrid(config, data);
});
}
function onUpdateCallback({
grid, // grid instance
row, // updating row jQuery element
item, // updating item
itemIndex, // updating item index
previousItem, // shallow copy (not deep copy) of item before editing
}) {
//TODO:
}
function onDeleteCallback({
grid, // grid instance
row, // deleting row jQuery element
item, // deleting item
itemIndex, // deleting item index
}) {
//TODO:
}
function onInsertCallback({grid,item}) {
var config = grid.configName;
var data = {
configName: grid.configName,
item: item
};
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/updateConfig',
dataType : 'json',
data : JSON.stringify(data),
success : function(result) {
alert(result);
**//This is where I want the client-side update to happen to the grid**
},error : function(result){
console.log(result);
**//this is where I want to cancel the client side update to grid**
}
});
}
function displayGrid(config,data) {
var fields = ;
switch(config) {
case "category":
fields = [
{name: "Id",visible:false,width:0},
{ name: "Name", type: "text", width: 250, validate: "required" },
{ type: "control" }]
break;
default:
break;
}
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: false,
data: data,
fields: fields,
configName:config,
onItemInserting:onInsertCallback,
onItemUpdating:onUpdateCallback,
onItemDeleting:onDeleteCallback
});
}
javascript ajax jsgrid
add a comment |
I am using js-grid for performing inline edits. I am using the callbacks onItemInserting
, onItemUpdating
andonItemDeleting
to make AJAX calls to perform server-side INSERT, UPDATE and DELETE operations respectively. However the issue is the client side updates to grid are happening before callbacks of the AJAX calls are executed. As a result, client side updates are taking place irrespective of server-side operation result.
Here is partial code of my application:
function displayConfigTable(config) {
let parameters = {
configName: config
};
$.getJSON("/configure", parameters, function(data, textStatus, jqXHR) {
displayGrid(config, data);
});
}
function onUpdateCallback({
grid, // grid instance
row, // updating row jQuery element
item, // updating item
itemIndex, // updating item index
previousItem, // shallow copy (not deep copy) of item before editing
}) {
//TODO:
}
function onDeleteCallback({
grid, // grid instance
row, // deleting row jQuery element
item, // deleting item
itemIndex, // deleting item index
}) {
//TODO:
}
function onInsertCallback({grid,item}) {
var config = grid.configName;
var data = {
configName: grid.configName,
item: item
};
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/updateConfig',
dataType : 'json',
data : JSON.stringify(data),
success : function(result) {
alert(result);
**//This is where I want the client-side update to happen to the grid**
},error : function(result){
console.log(result);
**//this is where I want to cancel the client side update to grid**
}
});
}
function displayGrid(config,data) {
var fields = ;
switch(config) {
case "category":
fields = [
{name: "Id",visible:false,width:0},
{ name: "Name", type: "text", width: 250, validate: "required" },
{ type: "control" }]
break;
default:
break;
}
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: false,
data: data,
fields: fields,
configName:config,
onItemInserting:onInsertCallback,
onItemUpdating:onUpdateCallback,
onItemDeleting:onDeleteCallback
});
}
javascript ajax jsgrid
add a comment |
I am using js-grid for performing inline edits. I am using the callbacks onItemInserting
, onItemUpdating
andonItemDeleting
to make AJAX calls to perform server-side INSERT, UPDATE and DELETE operations respectively. However the issue is the client side updates to grid are happening before callbacks of the AJAX calls are executed. As a result, client side updates are taking place irrespective of server-side operation result.
Here is partial code of my application:
function displayConfigTable(config) {
let parameters = {
configName: config
};
$.getJSON("/configure", parameters, function(data, textStatus, jqXHR) {
displayGrid(config, data);
});
}
function onUpdateCallback({
grid, // grid instance
row, // updating row jQuery element
item, // updating item
itemIndex, // updating item index
previousItem, // shallow copy (not deep copy) of item before editing
}) {
//TODO:
}
function onDeleteCallback({
grid, // grid instance
row, // deleting row jQuery element
item, // deleting item
itemIndex, // deleting item index
}) {
//TODO:
}
function onInsertCallback({grid,item}) {
var config = grid.configName;
var data = {
configName: grid.configName,
item: item
};
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/updateConfig',
dataType : 'json',
data : JSON.stringify(data),
success : function(result) {
alert(result);
**//This is where I want the client-side update to happen to the grid**
},error : function(result){
console.log(result);
**//this is where I want to cancel the client side update to grid**
}
});
}
function displayGrid(config,data) {
var fields = ;
switch(config) {
case "category":
fields = [
{name: "Id",visible:false,width:0},
{ name: "Name", type: "text", width: 250, validate: "required" },
{ type: "control" }]
break;
default:
break;
}
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: false,
data: data,
fields: fields,
configName:config,
onItemInserting:onInsertCallback,
onItemUpdating:onUpdateCallback,
onItemDeleting:onDeleteCallback
});
}
javascript ajax jsgrid
I am using js-grid for performing inline edits. I am using the callbacks onItemInserting
, onItemUpdating
andonItemDeleting
to make AJAX calls to perform server-side INSERT, UPDATE and DELETE operations respectively. However the issue is the client side updates to grid are happening before callbacks of the AJAX calls are executed. As a result, client side updates are taking place irrespective of server-side operation result.
Here is partial code of my application:
function displayConfigTable(config) {
let parameters = {
configName: config
};
$.getJSON("/configure", parameters, function(data, textStatus, jqXHR) {
displayGrid(config, data);
});
}
function onUpdateCallback({
grid, // grid instance
row, // updating row jQuery element
item, // updating item
itemIndex, // updating item index
previousItem, // shallow copy (not deep copy) of item before editing
}) {
//TODO:
}
function onDeleteCallback({
grid, // grid instance
row, // deleting row jQuery element
item, // deleting item
itemIndex, // deleting item index
}) {
//TODO:
}
function onInsertCallback({grid,item}) {
var config = grid.configName;
var data = {
configName: grid.configName,
item: item
};
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/updateConfig',
dataType : 'json',
data : JSON.stringify(data),
success : function(result) {
alert(result);
**//This is where I want the client-side update to happen to the grid**
},error : function(result){
console.log(result);
**//this is where I want to cancel the client side update to grid**
}
});
}
function displayGrid(config,data) {
var fields = ;
switch(config) {
case "category":
fields = [
{name: "Id",visible:false,width:0},
{ name: "Name", type: "text", width: 250, validate: "required" },
{ type: "control" }]
break;
default:
break;
}
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: false,
data: data,
fields: fields,
configName:config,
onItemInserting:onInsertCallback,
onItemUpdating:onUpdateCallback,
onItemDeleting:onDeleteCallback
});
}
javascript ajax jsgrid
javascript ajax jsgrid
asked Nov 25 '18 at 17:51
Bhanuprakash DBhanuprakash D
560514
560514
add a comment |
add a comment |
0
active
oldest
votes
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470247%2fjsgrid-how-to-delay-updates-to-grid-until-callback-finishes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470247%2fjsgrid-how-to-delay-updates-to-grid-until-callback-finishes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown