error reloading grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, gridview, javascript grid, jquery grid

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 13 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

error reloading grid Posts
February 27, 2012 at 9:16 am error reloading grid #2445

pwenk
Participant

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 Wenk

February 27, 2012 at 9:37 am error reloading grid #2451
Peter Stoev
Keymaster
Hi 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 Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.