jqxGrid won't load when JSP opens

[hirenrParticipant]

I am currently working on displaying a jqxgrid (jqWidgets) in my JSP page. While I run the project in localhost, the grid loads perfectly and it fetches data from the DB. But when the same project is accessed via VPN (for the project to be accessible from home), the grid won’t load and it keeps saying “Uncaught TypeError: Cannot read property ‘attr’ of undefined” in console.

PS: The project can correctly perform login from VPN. The problem arises just after login page. Everything loads perfectly except jqxGrid. The page has only one component i.e. jqxGrid. Other elements are HTML which load perfectly.

IDE: Eclipse (while testing on localhost)

DB: SQL Server

Framework: JSP and jqWidgets

STACKTRACE:
Uncaught TypeError: Cannot read property 'attr' of undefined at a.(anonymous function).createInstance (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/JQWidgets/jqxgrid.js:6:15628) at Object.a.jqx.applyWidget (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/JQWidgets/jqxcore.js:8:24607) at HTMLDivElement. (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/JQWidgets/jqxcore.js:8:28887) at Function.each (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/CSS/bootstrap-3.3.7/docs/assets/js/vendor/jquery.min.js:2:2881) at n.fn.init.each (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/CSS/bootstrap-3.3.7/docs/assets/js/vendor/jquery.min.js:2:846) at n.fn.init.a.fn.(anonymous function) [as jqxGrid] (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/JQWidgets/jqxcore.js:8:28822) at HTMLDocument. (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/JQWidgets/jobcard.logic.js:41:20) at i (https://xxx.xxx.xxx.xxx:xxxx/proxy/http/192.168.41.94:9999/ASAP-Job-Card/CSS/bootstrap-3.3.7/docs/assets/js/vendor/jquery.min.js:2:27756)

my JS:

$(document)
        .ready(
                function() {
                    var masterSource = {
                        datafields : [ {
                            name : 'JC_ID'
                        }, {
                            name : 'JC_Name'
                        }, {
                            name : 'JC_Code'
                        }, {
                            name : 'JC_Description'
                        }, {
                            name : 'JC_TriggerExecution'
                        }, {
                            name : 'JC_CreationTime'
                        }, {
                            name : 'JC_ModificationTime'
                        } ],
                        id : 'JC_ID',
                        autoheight : true,
                        datatype : "json",
                        async : false,
                        url : './JSP/Home2.jsp',
                    };
                    var masterDataAdapter = new $.jqx.dataAdapter(masterSource);

var photorenderer = function(row, column, value) {
                        var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                        var imgurl = './Images/' + name + '.png';
                        var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="./Images/7.png"></div>';
                        return img;
                    }

                    var renderer = function(row, column, value) {
                        return '<span style="margin-left: 4px; margin-top: 9px; float: left;">'
                                + value + '</span>';
                    }

                    $("#jqxgrid")
                            .jqxGrid(
                                    {
                                        width : '100%',
                                        height : 650,
                                        columnsresize : true,
                                        filterable : true,
                                        sortable : true,
                                        theme : 'energyblue',
                                        source : masterDataAdapter,
                                        rowdetails : true,
                                        rowsheight : 35,
                                        initrowdetails : initrowdetails,
                                        rowdetailstemplate : {
                                            rowdetails : "<div id='grid' style='margin: 10px;'></div>",
                                            rowdetailsheight : 220,
                                            rowdetailshidden : true
                                        },

                                        ready : function() {
                                            // TO PRESELECT ANY ENTRY ON GRID
                                            // LOAD
                                            // $("#jqxgrid").jqxGrid('showrowdetails',
                                            // 1);
                                            var datainformation = $('#jqxgrid')
                                                    .jqxGrid(
                                                            'getdatainformation');
                                            var rows = datainformation.rowscount;
                                            for (var i = 1; i <= rows; i++) {
                                                var buttontext = $('#jqxgrid')
                                                        .jqxGrid(
                                                                'getcellvalue',
                                                                i - 1,
                                                                'JC_TriggerExecution');
                                                $("#jqxgrid").jqxGrid(
                                                        'setcellvalue', i - 1,
                                                        "Execute", buttontext);
                                            }
                                        },

                                        columns : [
                                                {
                                                    text : '',
                                                    width : 50,
                                                    cellsrenderer : photorenderer,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card ID',
                                                    datafield : 'JC_ID',
                                                    cellsrenderer : renderer,
                                                    hidden : true,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card Name',
                                                    datafield : 'JC_Name',
                                                    cellsrenderer : renderer,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card Code',
                                                    datafield : 'JC_Code',
                                                    cellsrenderer : renderer,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card Description',
                                                    datafield : 'JC_Description',
                                                    cellsrenderer : renderer,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card Trigger',
                                                    datafield : 'JC_TriggerExecution',
                                                    cellsrenderer : renderer,
                                                    hidden : true,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card Creation Time',
                                                    datafield : 'JC_CreationTime',
                                                    hidden : true,
                                                    align : 'center',
                                                },
                                                {
                                                    text : 'Job Card Modification Time',
                                                    datafield : 'JC_ModificationTime',
                                                    hidden : true,
                                                    align : 'center',
                                                }, {
                                                    text : 'Execute',
                                                    width : '150px',
                                                    columntype : 'button',
                                                    datafield : 'Execute',
                                                    align : 'center',
                                                } ]
                                    });
    });

my HTML:

<div class="col-md-12">
    <div class="row">
        <h2 style="text-align: center;">Execution Portal</h2>
        <div class="col-md-1"></div>
        <div class="col-md-10" style="text-align: right; margin-top: 10px;">
            <b style="text-transform: uppercase;"> Welcome <%=request.getAttribute("FirstName")%>,
            </b>
            <hr />
            <div id="jqxgrid"></div>
        </div>
        <div class="col-md-1"></div>
    </div>

</div>

[juamar100Participant]

Let me try to help, since i don’t know exactly what is the problem.

Hmmm… Why are you using . on your url ‘./JSP/Home2.jsp’? better if you use relative url from httproot folder (something like ‘/JSP/home2.jsp’).
check also that you are using comas (,) at the end of objects. The last property never take coma. Your are doing this wrong in columns object within array and in mastersource.

For example, masterSource will be:

var masterSource = {
                        datafields : [ {
                            name : 'JC_ID'
                        }, {
                            name : 'JC_Name'
                        }, {
                            name : 'JC_Code'
                        }, {
                            name : 'JC_Description'
                        }, {
                            name : 'JC_TriggerExecution'
                        }, {
                            name : 'JC_CreationTime'
                        }, {
                            name : 'JC_ModificationTime'
                        } ],
                        id : 'JC_ID',
                        autoheight : true,
                        datatype : "json",
                        async : false,
                        url : './JSP/Home2.jsp' //no coma here! ;D
                    };

Did you tried accessing this application with no VPNs, proxys, or firewalls in the middle? maybe there is some configuration in your VPN, network, etc, that is bothering. There can be many factors.
You can try access your application within any localnetwork, accessing it by IP:port (and of course, netbeans and Glassfish or tomcat listening) from another computer at home or some network you can handle to see what can be the problem. Or even better, you can try access it from internet using no-ip, or similar service.

Hope it helps, keep me updated!

[juamar100Participant]

By the way, it will be better if you show all your HTML/JSP to see how you are calling your scripts.

[Author]

Posts