Home/ Questions/Q 8511777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T04:06:03+00:00

I’ve spent several hours looking at examples and docs trying to figure out how

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0