jQWidgets Forums

jQuery UI Widgets Forums Grid beforeLoadComplete Uncaught TypeError: Cannot read property of undefined

This topic contains 4 replies, has 2 voices, and was last updated by  lucianonapoli 11 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • lucianonapoli
    Participant

    Hi, I have this error
    “Uncaught TypeError: Cannot read property ‘idlink’ of undefined” on beforeLoadComplete
    it occurs only when go to the second page.

                
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'ID', type: 'string' },
                        { name: 'DataIngresso', type: 'string' },
                        { name: 'Modello', type: 'string' },
                        { name: 'Serialnumber', type: 'string' },
                        { name: 'NumeroScheda', type: 'string' },
                        { name: 'StatoRiparazione', type: 'string' },
                        { name: 'idlink', type: 'string' }
                    ],
                    root: "data",
                    id: "ID",
                    url: "test.php",
                    cache: false,
    				beforeprocessing: function(data) {		
                        source.totalrecords = data[0].TotalRows;
    				},
        
                };
                    
                // load virtual data.
                var rendergridrows = function() {
                    return dataAdapter.records;     
                }
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (records) {
                        var data = new Array();
                        // update the loaded records dynamically 
                        for (var i = 0; i < records.length; i++) {
                            var row = records[i];
    						
                            // THIS LINE WORKS WELL ONLY ON THE FIRST PAGE. IF CHANGE PAGE, THIS ERROR OCCURS IN CONSOLE
    						// Uncaught TypeError: Cannot read property 'idlink' of undefined 
    						// IF REMOVE THE LINE EVERYTHING GOES WELL ALSO CHANGING PAGES
                            row.idlink = "<a href='view.php?ID=" + row.idlink + "'>edit</a>";
    						
                            data.push(row);
                        }
                        return data;
                    },
                    loadError: function(jqXHR, status, error)
                    {
                        $('#err').text(status + ' ' + error);
                    },                        
                });
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    autoheight: true,
                    source: dataAdapter,                
                    virtualmode: true,
                    pageable: true,
                    rendergridrows: rendergridrows,
                    columns: [
                        { text: 'ID', datafield: 'ID', width: 50 },
                        { text: 'Ingresso', datafield: 'DataIngresso', width: 120 },
                        { text: 'Modello', datafield: 'Modello', width: 120 },
                        { text: 'Seriale', datafield: 'SerialNumber', width: 180 },
                        { text: 'Num Scheda', datafield: 'NumeroScheda', width: 100, cellsalign: 'right' },
                        { text: 'Stato', datafield: 'StatoRiparazione', width: 100, cellsalign: 'right', cellsformat: 'c2' },
                        { text: 'view', datafield: 'idlink', width: 100 }
                    ]
                });
    

    Peter Stoev
    Keymaster

    Hi lucianonapoli,

    Could you sent an example of your application scenario which we would be able to run locally and test with?

    Best Regards,
    Peter Stoev

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


    lucianonapoli
    Participant

    Hi Peter, I sent you an e-mail with an attachment of the application.

    Thanks


    Peter Stoev
    Keymaster

    Hi lucianonapoli,

    The solution can be found below:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>list</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css" media="screen">
        <!-- jQWidgets CSS -->
        <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
        <link href="jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
        
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->
        </script>
      </head>
      <body>
        <div class="container">
    
            <div class="row">
              <div class="col-lg-12">
                <div class="page-header">
                  <h1 id="titolo">Lista Apparecchiature</h1>
                </div>
              </div>
            </div>
            
            
                <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
                    <div id="jqxgrid"></div>
                </div>        
            
        </div>
    
        <!-- Bootstrap core JavaScript -->
        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        
        <!-- jQWidgets core JavaScript -->
        <script src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>   
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>     
        <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>    
        <!-- ================================================== -->
        <!-- Add addition JavaScript files here -->
        <script type="text/javascript">
            $(document).ready(function () {
                loaddata();
            });
    
            function loaddata() {
                
    			var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'ID', type: 'string' },
                        { name: 'DataIngresso', type: 'string' },
                        { name: 'Modello', type: 'string' },
                        { name: 'Serialnumber', type: 'string' },
                        { name: 'NumeroScheda', type: 'string' },
                        { name: 'StatoRiparazione', type: 'string' },
                        { name: 'idlink', type: 'string' }
                    ],
                    root: "data",
                    id: "ID",
                    url: "test.php",
                    cache: false,
    				beforeprocessing: function(data) {		
                        source.totalrecords = data[0].TotalRows;
    				},
        
                };
                    
                // load virtual data.
                var rendergridrows = function() {
                    return dataAdapter.records;     
                }
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (records) {
                        // update the loaded records dynamically 
                        $.each(records, function()
    					{
    						this.idlink = "<a href='view.php?ID=" + this.idlink + "'>edit</a>";										
    					});
    					return records
                    },
                    loadError: function(jqXHR, status, error)
                    {
                        $('#err').text(status + ' ' + error);
                    },                        
                });
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    autoheight: true,
                    source: dataAdapter,                
                    virtualmode: true,
                    pageable: true,
                    rendergridrows: rendergridrows,
                    columns: [
                        { text: 'ID', datafield: 'ID', width: 50 },
                        { text: 'Ingresso', datafield: 'DataIngresso', width: 120 },
                        { text: 'Modello', datafield: 'Modello', width: 120 },
                        { text: 'Seriale', datafield: 'SerialNumber', width: 180 },
                        { text: 'Num Scheda', datafield: 'NumeroScheda', width: 100, cellsalign: 'right' },
                        { text: 'Stato', datafield: 'StatoRiparazione', width: 100, cellsalign: 'right', cellsformat: 'c2' },
                        { text: 'view', datafield: 'idlink', width: 100 }
                    ]
                });            
                
               
                
            }
        </script>    
      </body>
    </html>
    

    Best Regards,
    Peter Stoev

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


    lucianonapoli
    Participant

    Thanks Peter!

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

You must be logged in to reply to this topic.