update grid in javascript

Questionsupdate grid in javascript
Fabio Martins asked 10 years ago

Hi Sir!

How can I update the grid by javascript command? Is it possible?

Thank you!

10 Answers
Abu Ghufran answered 10 years ago

Assuming, you are posting to grid with id (list1), here is the sample JS code.
"id" is PK (e.g. 123), "oper" will be "edit" for editing record. Rest are the table fields in myData.

<script>
auto_edit = function ()
{
myData = {};
myData.id = "123";
myData.oper = 'edit';
myData.invdate = '2013-06-12';
myData.note = 'test2';
myData.total = '22';
myData.client_id = '10';
jQuery.ajax({
url: "?grid_id=list1",
dataType: "json",
data: myData,
type: "POST",
error: function(res, status) {
alert(res.status+" : "+res.statusText+". Status: "+status);
},
success: function( data ) {
}
});
jQuery("#list1").jqGrid().trigger('reloadGrid',[{page:1}]);
}
</script>

<button onclick="auto_edit()">Edit</button>

refer FAQ query 'How to post data using JS code?' for addition.

Fabio Martins answered 10 years ago

100% ok!
Thank you Sir!

Giovanni Luca Bonelli answered 8 years ago

Does It work even with subgrid?
I try code in FAQ " How to post data using JS code?".
When I paste It in alternate-row.php (demos), I successfully add new rows, but when I do the same in subgrid_detail.php, I got an error=> 200:OK.Status:parsererror.
Naturally in the last case, I just update two lines of the code:

url: "?grid_id=sub1",
jQuery("#sub1").jqGrid().trigger('reloadGrid',[{page:1}]);

Am I wrong??

Thankyou in advance.

Abu Ghufran answered 8 years ago

Hello,

The subgrid-detail has different ID format, that is generated based on parent row of grid. It should not necessarily be sub1.
If your subgrid_detail.php page, if your grid object is $g, you can read the subgrid id using: $g->id

So, in your JS code, you can replace sub1 with:
<?php echo $g->id?>

Giovanni Luca Bonelli answered 8 years ago

I have replaced sub1 like your suggestion, but still doesn't work. Same parsererror message.
This is my code in subgrid_detail.php:

<script>
auto_add = function ()
{
myData = {};
myData.id = "_empty";
myData.oper = 'add';
myData.invdate = '2013-06-12';
myData.note = 'test2';
myData.total = '22';
myData.client_id = '10';
jQuery.ajax({
url: "?grid_id=<?php echo $g->id?>",
dataType: "json",
data: myData,
type: "POST",
error: function(res, status) {
alert(res.status+" : "+res.statusText+". Status: "+status);
},
success: function( data ) {
}
});
jQuery('#<?php echo $g->id?>').jqGrid().trigger('reloadGrid',[{page:1}]);
}
</script>

Abu Ghufran answered 8 years ago

I just rechecked it and it need some more changes:

#1)
url: "subgrid_detail.php?grid_id=sub1&subgrid=<?php echo str_replace("_sub1","",$g->id) ?>",

#2)
jQuery('#<?php echo $g->id?>').trigger('reloadGrid',[{page:1}]);

Full JS Code:

<script>
auto_add = function ()
{
myData = {};
myData.id = "_empty";
myData.oper = 'add';
myData.invdate = '2013-06-12';
myData.note = 'test2';
myData.total = '22';
myData.client_id = '10';
jQuery.ajax({
url: "subgrid_detail.php?grid_id=sub1&subgrid=<?php echo str_replace("_sub1","",$g->id) ?>",
dataType: "json",
data: myData,
type: "POST",
error: function(res, status) {
alert(res.status+" : "+res.statusText+". Status: "+status);
},
success: function( data ) {
jQuery('#<?php echo $g->id?>').trigger('reloadGrid',[{page:1}]);
}
});

}
</script>

Giovanni Luca Bonelli answered 8 years ago

Well done! Thank You.
I want to upgrade my license to 2.0, How I can do?

Abu Ghufran answered 8 years ago

Emailed you the links.

Giovanni Luca Bonelli answered 8 years ago

Hello,

Another question about grid ID format.
I have a subgrid on a multiple-tab grid.
How I can handle this case?

Thanks.

Abu Ghufran answered 8 years ago

Please tell the issue you are facing in it. Error screenshot + code would help.
Few things to consider, make sure each grid has unique ID.

Your Answer

10 + 16 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?