jqGrid Element не является таблицей при загрузке с другой страницы

Question

Действительно не уверен, что происходит. При загрузке на свой собственный - загружается нормально, быстро и без ошибок. При вызове из другой страницы - с ошибкой «Элемент не является таблицей»

<table id="Products"><tr><td></td></tr></table> 
<table id="Products_pager"></table> 
<script> 
$(document).ready(function() { 


    var editOptions = { 
      keys: true, 
      aftersavefunc: function() { 
       var $self = $(this); 
       setTimeout(function() { 
        $self.trigger("reloadGrid", [{current: true}]); 
       }, 50); 
      }, 
      url: "xtras/Products.php" 
     }, 
     gridIdSelector = "#Products", 
     pagerIdSelector = "#Products_pager", 
     $grid = $(gridIdSelector); 

    $.extend($.jgrid.search, { 
     sopt: ["eq", "ne", "cn", "bw", "bn", "ge", "le", "lt", "gt"], 
     multipleSearch: true 
    }); 

    var last_selected_row; 

    $grid.jqGrid({ 
     url:'xtras/Products.php', 
     editurl:'xtras/Products.php', 
     datatype: "json", 
     mtype:'GET', 
     colModel:[ 

      ............. 

     ], 
     height: "100%", 
     minWidth: 900, 
     rowNum:15, 
     rowList:[10,15,20,30,50,100,150,200], 
     viewrecords: true, 
     sortname:"ID", 
     sortorder: "desc", 
     pager: pagerIdSelector, 
     caption:"Products", 
     afterSubmit: function() { 
      $("#Products").jqGrid('editRow',row_id, true, null, 
         function(){ $("#Products").trigger("reloadGrid", [{current: true}]); }, 
         'xtras/Products.php', 
         null,{}, 
         {},{} 
        ); 
     }, 
     ajaxGridOptions: {cache: false}, 

     loadError: function (jqXHR, textStatus, errorThrown) { 
      alert('HTTP status code: ' + jqXHR.status + '\n' + 
        'textStatus: ' + textStatus + '\n' + 
        'errorThrown: ' + errorThrown); 
      alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText); 
     }, 

     loadComplete: function(data) { 
     }, 

     ondblClickRow: function (rowid) { 
      var $self = $(this), 
       savedRows = $self.jqGrid("getGridParam", "savedRow"); 

      if (savedRows.length > 0 && savedRows[0].id !== rowid) { 
       // cancel editing of another row is editing 
       // don't cancel on double click on the current editing 
       $self.jqGrid("restoreRow", savedRows[0].id); 
      } 
      if (savedRows.length === 0) { 
       $self.jqGrid("editRow", rowid, editOptions); 
      } 
     } 
    }).jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"}) 
     .jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}}) 
     .jqGrid("navButtonAdd", pagerIdSelector, { 
      caption: "", 
      title: "Copy selected row", 
      id: $grid[0].id + "_ilcopy", 
      buttonicon: "ui-icon-copy", 
      onClickButton: function() { 
       var $self = $(this), p = $self.jqGrid("getGridParam"), rowData, 
        srcrowid = p.selrow, savedRows = p.savedRow; 

       if (srcrowid !== null) { 
        if (savedRows.length > 0) { 
         // cancel editing 
         $self.jqGrid("restoreRow", savedRows[0].id); 
        } 
        rowData = $self.jqGrid("getRowData", srcrowid); 
        rowData.ID = ""; 
        rowData.Catalogue = ""; 
        rowData.UPCEAN = ""; 
        rowData.copyID = srcrowid; 
        $self.jqGrid("addRow", { 
         initdata: rowData, 
         addRowParams: editOptions 
        }); 
       } else { 
        alert("Please select a row to copy"); 
        return false; 
       } 
      } 
     }); 

    // Enable/disable buttons on start/end of editing 
    $grid.bind("jqGridInlineEditRow jqGridInlineAfterSaveRow jqGridInlineAfterRestoreRow", function() { 
     var $self = $(this), 
      savedRows = $self.jqGrid("getGridParam", "savedRow"); 
     if (savedRows.length > 0) { 
      // some row is editing now 
      $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").removeClass("ui-state-disabled"); 
      $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").addClass("ui-state-disabled"); 
     } else { 
      // No row is editing now 
      $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").addClass("ui-state-disabled"); 
      $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").removeClass("ui-state-disabled"); 
     } 
    }); 
}); 
</script> 

Любые предложения оценили

Answer 1

решаемая. Проблема была вызвана другим элементом с тем же идентификатором на странице, с которой она была загружена.

Answer 2

Попробуйте переписать это с современным способом, как это:

<table id="jqGrid"></table> 
<div id="jqGridPager"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#jqGrid").jqGrid({ 
      url:'xtras/Products.php', 
      mtype: "GET", 
      datatype: "jsonp", 
      colModel: [ 
       { label: 'OrderID', name: 'OrderID', key: true, width: 75 }, 
       { label: 'Customer ID', name: 'CustomerID', width: 150 }, 
       { label: 'Order Date', name: 'OrderDate', width: 150 }, 
       { label: 'Freight', name: 'Freight', width: 150 }, 
       { label:'Ship Name', name: 'ShipName', width: 150 } 
      ], 
      viewrecords: true, 
      width: 780, 
      height: 250, 
      rowNum: 20, 
      pager: "#jqGridPager" 
     }); 
    });