jQWidgets Forums

jQuery UI Widgets › Forums › Grid › error reloading grid

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 13 years, 1 month 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.