Server-side function is called only once in jqGrid

Question

I've put a jqgrid the page. In Jqgrid placed a column that I want when user click on the column, Fill Other Jqgrid.Now when I click on the desired column. Only first-time Fill second JQGrid,But the next time the server side code will not run. The code is written as follows

var firstButtonColumnIndex = 0;
            grid = $('#list'); buttonNames = {};
            grid.jqGrid({
                url: 'jQGridHandler.ashx?Request=1',
                loadonce: true,
                direction: "rtl",
                pgtext: "صفحه {0} از {1}",
                datatype: 'json',
                height: 250,
                colNames: ['شماره درخواست', 'شماره اموال', 'شرح دستور کار', 'تاریخ دستور کار', 'زمان دستور کار', 'ملاحظات', '', ''],
                colModel: [

                        { name: 'WorkOrderNo', width: 100, sortable: true },
                        { name: 'AssetNo', width: 100, sortable: true },
                        { name: 'WorkDescription', width: 400, sortable: true },
                        { name: 'WorkOrderDate', width: 80, sortable: true },
                        { name: 'WorkOrderTime', width: 80, sortable: true },
                        { name: 'Remark', width: 100, sortable: true },
                        { name: 'del', width: 20, sortable: false, search: false,
                            formatter: function () {
                                return "<span class='ui-icon ui-icon-trash'></span>";
                            }
                        },
                        { name: 'details', width: 20, sortable: false, search: false,
                            formatter: function () {
                                return "<span class='ui-icon ui-icon-document'></span>";
                            }
                        }

                    ],
                gridview: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager',
                //  sortname: 'WorkOrderNo',
                viewrecords: true,
                sortorder: 'asc',
                caption: 'درخواست ها...........',
                rownumbers: true,
                beforeSelectRow: function (rowid, e) {
                    var iCol = $.jgrid.getCellIndex(e.target);
                    if (iCol == 7) {
                        //alert("rowid=" + rowid + "\nButton name: " + buttonNames[iCol]);
                        // $('img').each(function () {
                        $("#workRequestPopUp").draggable();
                        //  });

                    } else if (iCol == 8) {
                        workOrderId = rowid;

                        $("#tblRequestWorks tr").remove();
                        $("#tblRequestWorks").jqGrid({
                           // url: 'jQGridHandler.ashx?RequestWorksFill=1&workOrderId=' + workOrderId,
                            url: "PublicHandler.ashx?Request=1&workOrderId: rowid",
                            direction: "rtl",
                            pgtext: "",
                            datatype: 'json',
                            height: 250,
                            colNames: ['نام کار', 'نام واحد', 'سرپرست واحد', 'تعداد', 'پایان کار', ''],
                            colModel: [

                        { name: 'WorkName', width: 300, sortable: true },
                        { name: 'SectionName', width: 100, sortable: true },
                        { name: 'SectionSupervisor', width: 100, sortable: true },
                        { name: 'RequestCount', width: 80, sortable: true },
                        { name: 'FinishWork', width: 100, sortable: true },
                        { name: 'details', width: 20, sortable: false, search: false,
                            formatter: function () {
                                return "<span class='ui-icon ui-icon-document'></span>";
                            }
                        }

                    ],

                            rowNum: 10,
                            rowList: [10, 20, 30],

                            sortorder: 'asc',
                            caption: 'Test',
                            rownumbers: true,
                            beforeSelectRow: function (rowid, e) {
                                var iCol = $.jgrid.getCellIndex(e.target);
                                if (iCol == 6) {
                                    alert(rowid);
                                    Fill12(rowid);
                                } else if (iCol == 8) {
                                    alert(rowid);
                                    Fill12(rowid);

                                    return true;

                                    // return (iCol >= firstButtonColumnIndex) ? false : true;

                                }
                            },
                            dataType: "json"

                        });
                        //  fillRequestWorkPopup(workOrderId);

                        popup(e);
                    }
                    // prevent row selection if one click on the button
                    // return (iCol >= firstButtonColumnIndex) ? false : true;
                    return true;
                }


            });

It is Delegate Function in tr in JQGrid? I respected professors can help. thanks All

Answer 1

The URL "PublicHandler.ashx?Request=1&workOrderId: rowid" seems me wrong. Do you mean probably "PublicHandler.ashx?Request=1&workOrderId=" + rowid? The better will be to use url: "PublicHandler.ashx" with postData: {Request: 1, workOrderId: rowid}.

The next problem is the usage of $("#tblRequestWorks tr").remove();. You don't included any HTML code which you use on the page. If you want to destroy the old grid and create a new one on the same place you should use GridUnload instead of $("#tblRequestWorks tr").remove();: $("#tblRequestWorks").jqGrid('GridUnload'); (see here and example).

You can also remove dataType: "json" from the code. jqGrid don't know the option and you already use the correct datatype: "json" option.

I think you can change your code so that the usage of GridUnload will be not needed. Only changing on some parameters of the second grid ($("#tblRequestWorks")) and reloading it with respect of $("#tblRequestWorks").trigger('reloadGrid', [{page: 1}]); seems me enough.

One more remark: you should be very careful in the id values for the second grid. It is not permitted to have id duplicates on the page. If you can't generate unique ids on the server you can consider to use idPrefix option of the grid.