jQuery UI Widgets › Forums › Grid › error reloading grid
Tagged: grid, gridview, javascript grid, jquery grid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 3 months ago.
-
Authorerror reloading grid Posts
-
hi
i have some trouble with reloading grid data in an ajax application. When I load the first time everything is ok. Reloading the same grid by event function then the following error occurs.
Uncaught TypeError: Cannot read property ‘length’ of undefined   jqxgrid.js:2678
— php —-
/* connect to database */$dsn = “mysql:host=127.0.0.1;dbname=mydb”;Â
$username = “user”;Â
$password = “pw”;Â/* Connect to Database */
$pdo = new PDO($dsn, $username, $password);Â
/* request list of users */
$stmt = $pdo->prepare(“select UserNr,Benutzer,GroupId from sys_user_table”);
$stmt->execute();Â/* prepare response */
$rows[‘Rows’] = $stmt->fetchAll(PDO::FETCH_ASSOC);
$rows[‘TotalRows’] = count($rows[‘Rows’]);echo json_encode($rows);
?>—- html —-
<!DOCTYPE html>
<html lang=”en”>
<head>
   <link rel=”stylesheet” href=”/jquery/jqwidgets-ver1.7/jqwidgets/styles/jqx.base.css” type=”text/css” />
   <link rel=”stylesheet” href=”/jquery/jqwidgets-ver1.7/jqwidgets/styles/jqx.classic.css” type=”text/css” />
  Â
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/scripts/jquery-1.7.1.min.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxcore.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxbuttons.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxscrollbar.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxmenu.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxcheckbox.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxlistbox.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxdropdownlist.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxgrid.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxgrid.pager.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxgrid.selection.js”></script>
   <script type=”text/javascript” src=”/jquery/jqwidgets-ver1.7/jqwidgets/jqxdata.js”></script>   <script type=”text/javascript”>
Â
   var theme = ‘classic’;   // Load data from database and display as grid
   function DisplayTableFromdB() {
Â
       var source =
    {
        datatype: “json”,
         datafields: [
            { name: ‘UserNr’},
             { name: ‘Benutzer’},
             { name: ‘GroupId’}
        ],
        url: ‘/jqwidgets/jqxgrid.php’,
        root: ‘Rows’,
        beforeprocessing: function(data) {
            source.totalrecords = data.TotalRows;
        }
    };     Â       var dataadapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
           //width: 500,
         source: dataadapter,
        theme: theme,
        virtualmode: false,
        rendergridrows: function() {
             return dataadapter.records;
        },
        columns: [
              { text: ‘UserNr’, datafield: ‘UserNr’, width: 250 },
              { text: ‘Benutzer’, datafield: ‘Benutzer’, width: 200 },
              { text: ‘GroupId’, datafield: ‘GroupId’, width: 150 }
          ]
    });
   }
Â
   // reload the table an display as grid
   function ReloadTable(evt) {
    // Clear content of container
   Â
    $(“#jqxgrid”).empty();
   Â
    // Display the grid
   Â
    DisplayTableFromdB();
    }
  Â
   $(document).ready(function () {
           // mark button as jqxButton
           $(“button”).each(function(index,value) {              Â
               $(this).jqxButton({theme: theme });
           });
         Â
           // Trigger the reload function
           $(“#reload”).click(function (evt) {ReloadTable(evt) } );
          Â
           // Display then grid the first time ()
          Â
   DisplayTableFromdB();
         Â
         });
   </script>
</head>
<body class=’default’>
 <h1>Trouble reloading grid</h1>
   <div id=’jqxWidget’ style=”width:600px;height:400px”>
       <div id=”jqxgrid”></div>
   </div>
  Â
   <div id=’buttons’>
  <button id=’reload’ type=’button’ style=”width: 100px;margin: 20px” >reload</button>
 </div></body>
</html>Best Regards,
Peter WenkHi Peter,
The first call of the DisplayTableFromdB function creates the Grid, but the second call will try to set its properties again as the Grid’s instance is live. It is more correctly to update only the data source, if you update the data. However, if you want to continue with the same code, the solution should be something like this:
var parent = $("#jqxgrid").parent(); $("#jqxgrid").jqxGrid('destroy'); $("<div id='jqxgrid'></div>").appendTo(parent); DisplayTableFromdB ();
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com- This reply was modified 11 years, 3 months ago by Peter Stoev.
-
AuthorPosts
You must be logged in to reply to this topic.