Reputation: 23
I've spent several hours looking at examples and docs trying to figure out how to POST additional parameters to editurl
, and have yet to figure this out. I'm using Perl Catalyst.
Though I don't have it all coded in the controller, I am getting what I need POSTed to add and edit, but not to delete records. I need inv_id
to be POSTed to the server for my controller to delete a record.
Controller/Root.pm:
package MyFirstGrid::Controller::Root;
use Moose;
use namespace::autoclean;
BEGIN {extends 'Catalyst::Controller'}
with 'Catalyst::TraitFor::Controller::jQuery::jqGrid';
__PACKAGE__->config(namespace => '');
sub index :Path :Args(0) {
my ($self, $c) = @_;
$c->detach($c->view("TT"));
}
sub getdata :Local {
my ($self, $c) = @_;
my $inv_rs = $c->model('DB::Inventory')->search({});
$inv_rs = $self->jqgrid_page($c, $inv_rs);
my @row_data;
while (my $inv = $inv_rs->next) {
my $single_row = {
cell => [
$inv->inv_id,
$inv->client_id,
$inv->amount,
$inv->tax,
$inv->total,
$inv->note,
],
};
push @row_data, $single_row;
}
$c->stash->{json_data}{rows} = \@row_data;
$c->detach($c->view("JSON"));
}
sub postrow :Local {
my ($self, $c) = @_;
my $data = $c->req->params;
my $inv_rs = $c->model('DB::Inventory')->search({inv_id => $data->{inv_id}});
$inv_rs->update({
client_id => $data->{client_id},
amount => $data->{amount},
tax => $data->{tax},
total => $data->{total},
note => $data->{note},
});
$c->res->status(204);
}
sub default :Path {
my ($self, $c) = @_;
$c->response->body('Page not found');
$c->response->status(404);
}
sub end : ActionClass('RenderView') {}
__PACKAGE__->meta->make_immutable;
1;
index.tt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/css/cupertino/jquery-ui-1.8.22.custom.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/css/ui.jqgrid.css') %]" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="[% c.uri_for('/static/js/jquery-1.7.2.min.js') %]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/js/i18n/grid.locale-en.js') %]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/js/jquery.jqGrid.min.js') %]" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url: "[% c.uri_for("getdata") %]",
datatype: 'json',
mtype: 'GET',
colNames:['Inv No', 'Client ID', 'Amount','Tax','Total','Notes'],
colModel :[
//{name:'inv_id', index:'inv_id', editable:true, hidden:true, editrules:{edithidden:false}, hidedlg:true},
{name:'inv_id', index:'inv_id', editable:true, hidden:true},
{name:'client_id', index:'client_id', width:55, editable:true, editoptions:{size:10}},
{name:'amount', index:'amount', width:80, align:'right', editable:true, editoptions:{size:10}},
{name:'tax', index:'tax', width:80, align:'right', editable:true, editoptions:{size:10}},
{name:'total', index:'total', width:80, align:'right', editable:true, editoptions:{size:10}},
{name:'note', index:'note', width:150, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"2",cols:"20"}}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'inv_id',
sortorder: 'desc',
viewrecords: true,
caption: 'My First Grid: Navigator',
editurl: "[% c.uri_for("postrow") %]",
height: 240
});
jQuery("#list").jqGrid('navGrid','#pager',
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);
});
</script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
Upvotes: 2
Views: 387
Reputation: 221997
I suppose that the origin of the problem which you have is in filling of the grid. During filling of the grid all grid's rows (<tr>
elements) get the id
attribute. During editing and deleting of the rows the value of id
attribute of the corresponding row will be send always to the server. It's important to know that the values of id
attributes have to be unique on the page. If the values of inv_id
are unique, that you can use this values directly as the id
. To inform jqGrid about the choice you can either add jsonReader: {id: "inv_id"}
as additional grid parameter or just to add key: true
property to the definition of the inv_id
column.
I don't use Perl Catalyst myself, but the part where you fill the grid data (see my $single_row = { cell => [...]}
) seems to me should contain id
property additionally to cell
property (something like $single_row = {cell => [...], id => $inv->inv_id}
). If the inv_id
is unique it would be better enough to add key: true
to the definition of the inv_id
column and your problem will be already solved.
If you already use another value of id
and you really need to have both values: the id
and inv_id
then you can use for example onclickSubmit callback of delete options. The
onclickSubmit: function (options, rowid) {
return {inv_id: $(this).jqGrid("getCell", rowid, "inv_id")};
}
I mean to use the following
$("#list").jqGrid('navGrid', '#pager', {}, //options
{height: 280, reloadAfterSubmit: false}, // edit options
{height: 280, reloadAfterSubmit: false}, // add options
{ // del options
reloadAfterSubmit: false,
onclickSubmit: function (options, rowid) {
return {inv_id: $(this).jqGrid("getCell", rowid, "inv_id")};
}
}
);
As the result the data posted to the server during Delete operation will be extended with additional parameter inv_id
.
Upvotes: 2