jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Vrushali 8 years, 8 months ago.

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

Author

JSP error 'Cannot read property 'dataAdapter' of undefined' Posts

August 23, 2016 at 1:41 pm JSP error 'Cannot read property 'dataAdapter' of undefined' #86781

Participant

Hello,

I am using a dataTable along with a dataAdapter inside a JSP page. It works fine if there are no page imports specified on top of the page. The moment I add a import statement, page gives me an error as ‘Cannot read property ‘dataAdapter’ of undefined’ for the following line.

var detailsSource =
{
dataType: “json”,
dataFields: [
{ name: ‘JOB_CODE’, type: ‘string’ },
{ name: ‘TASK_SR_NO’, type: ‘string’ },
{ name: ‘MACHINE_CODE’, type: ‘string’ },
{ name: ‘TASK_EST_DURATION’, type: ‘string’ },
{ name: ‘TASK_STATUS’, type: ‘string’ },
{ name: ‘TASK_STR_TIME’, type: ‘string’ },
{ name: ‘TASK_END_TIME’, type: ‘string’ }
],
async: false,
id: ‘JOB_DETAIL_TAB’,
url: ‘MaintJsps/populateJobDetailTab.jsp’
};

var detailsDataAdapter = new $.jqx.dataAdapter(detailsSource,{

loadComplete: function() {
alert(‘Data loaded.’);
},
autoBind: true
});

Please help.

August 23, 2016 at 1:42 pm JSP error 'Cannot read property 'dataAdapter' of undefined' #86782

Vrushali

Participant

Error is for the following line….

var detailsDataAdapter = new $.jqx.dataAdapter(detailsSource,{

August 23, 2016 at 1:48 pm JSP error 'Cannot read property 'dataAdapter' of undefined' #86785

Peter Stoev

Keymaster

This basically points out that there is a missing Javascript reference to jqxdata.js on your web page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 24, 2016 at 5:52 am JSP error 'Cannot read property 'dataAdapter' of undefined' #86792

Vrushali

Participant

Hi Peter,

I have included the jqxdata.js. Here is the full source. Interesting thing is that, when I remove the import statement and all related references from JSP, the page works fine. It gives me error when I add JSP import and then the scriplet code.



<!DOCTYPE HTML>
<jsp:directive.page import="jts.beans.JobDetailMaintenance,jts.beans.JobMaintenance;"/>

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Display Job information </title>
   
    <!-- Bootstrap -->
    <link href="KNEOLib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="KNEOLib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="KNEOLib/nprogress/nprogress.css" rel="stylesheet">
    
    <!-- Custom Theme Style -->
    <link href="build/css/custom.min.css" rel="stylesheet">
    <link href="images/logo.ico" rel="shortcut icon" type="image/x-icon">
    <link href="css/KneoCss.css" rel="stylesheet"> 
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatatable.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/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    
    
    <script type="text/javascript">
    
     $(document).ready(function () {
    
            // create detail source object.
            var detailsSource =
            {
                dataType: "json",        
                dataFields: [
                    { name: 'JOB_CODE', type: 'string' },
                    { name: 'TASK_SR_NO', type: 'string' },
                    { name: 'MACHINE_CODE', type: 'string' },
                    { name: 'TASK_EST_DURATION', type: 'string' },
                    { name: 'TASK_STATUS', type: 'string' },  
                    { name: 'TASK_STR_TIME', type: 'string' },
                    { name: 'TASK_END_TIME', type: 'string' }                                   
                ],
                async: false,
                id: 'JOB_DETAIL_TAB',
                url: 'MaintJsps/populateJobDetailTab.jsp'
                
            };
            
            // create details DataAdapter.
            var detailsDataAdapter = new $.jqx.dataAdapter(detailsSource, { autoBind: true });
            jobDetails = detailsDataAdapter.records;
       

            // create subtasks source object.
            var subtaskSource =
            {
                dataType: "json",        
                dataFields: [
                    { name: 'JOB_CODE', type: 'string' },
                    { name: 'TASK_SR_NO', type: 'string' },
                    { name: 'ST_SR_NO', type: 'string' },
                    { name: 'ST_EST_DURATION', type: 'string' },
                    { name: 'ST_STATUS', type: 'string' },
                    { name: 'ST_DESC', type: 'string' }                                                   
                ],
                async: false,
                id: 'JOB_SUBTASK_TAB',
                url: 'MaintJsps/populateJobSubtaskTab.jsp'
                
            };
            
            // create subtask DataAdapter.
            var subtaskDataAdapter = new $.jqx.dataAdapter(subtaskSource, { autoBind: true });
            subtasks = subtaskDataAdapter.records;

          // create subtask DataTable.
            $("#subtaskDataTable").jqxDataTable({
                pageable: true,
                pageSize: 5,
                width: 1000,               
                columns: [
                  { text: 'Code', dataField: 'JOB_CODE', width: 100 },
                  { text: 'Task No.', dataField: 'TASK_SR_NO', width: 100 },
                  { text: 'Subtask No.', dataField: 'ST_SR_NO', width: 100 },
                  { text: 'Description', dataField: 'ST_DESC', width: 700 }                 
                ]
            });
            

            // create details DataTable.
            $("#detailsDataTable").jqxDataTable({
            
                source: detailsDataAdapter,
                serverProcessing: true,
                pageable: true,
                pageSize: 5,
                filterable: true,
            //  filterMode: 'simple',
                sortable: true,
                width: 1000,               
                columns: [
                  { text: 'Code', dataField: 'JOB_CODE', width: 85 },
                  { text: 'Task No.', dataField: 'TASK_SR_NO', width: 85 },
                  { text: 'Machine', dataField: 'MACHINE_CODE', width: 100 },
                  { text: 'Est Duration', dataField: 'TASK_EST_DURATION', width: 130 },
                  { text: 'Status', dataField: 'TASK_STATUS', width: 150 },
                  { text: 'Start Time', dataField: 'TASK_STR_TIME', width: 225 },
                  { text: 'End Time', dataField: 'TASK_END_TIME', width: 225 }                
                ]
            });

            // update subtask DataTable when the selection of the detail DataTable is changed.
            $("#detailsDataTable").on('rowSelect', function (event) {
                // event.args
                // row key - event.args.key
                // row index - event.args.index
                // row data - event.args.row
				
                var row = event.args.row ;
                //var key = event.args.key;
                var keyJobCode = row.JOB_CODE;
                var keySrNo = row.TASK_SR_NO;
                var filterGroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filterValue1 = keyJobCode;
                var filterValue2 = keySrNo;
                var filterCondition = 'equal';
                // create string filter
                var filter1 = filterGroup.createfilter('stringfilter', filterValue1, filterCondition);
                var filter2 = filterGroup.createfilter('stringfilter', filterValue2, filterCondition);
              
                var subtasksbyid = [];
               
                for (var m = 0; m < subtasks.length; m++) {
                    var result = filter1.evaluate(subtasks[m]["JOB_CODE"]);
                    var result1= filter2.evaluate(subtasks[m]["TASK_SR_NO"]);
                    
                    if (result == true && result1 == true)
                        subtasksbyid.push(subtasks[m]);
                }

                var subtaskSource = {
                    dataFields: [
                        { name: 'JOB_CODE', type: 'string' },
                        { name: 'TASK_SR_NO', type: 'string' },
                        { name: 'ST_SR_NO', type: 'string' },
                        { name: 'ST_EST_DURATION', type: 'string' },
                        { name: 'ST_STATUS', type: 'string' },
                        { name: 'ST_DESC', type: 'string' }                      
                    ],
                    id: 'SubtaskID',
                    localdata: subtasksbyid
                }
                // update the details DataTable.
                var subtaskAdapter = new $.jqx.dataAdapter(subtaskSource);
                $("#subtaskDataTable").jqxDataTable({ source: subtaskAdapter });
            });            
            
            $('#detailsDataTable').on('bindingComplete', function (event) {
  				   console.log("Binding is complete");
   				   $("#detailsDataTable").jqxDataTable('selectRow', 0); 
  		   });
            
      }); 

   </script>    
  </head>

 <body class="nav-md">
   <jsp:include page="TemplateNavBar.jspf"/>

    <!-- page content Start -->
  
    <div class="right_col" role="main">
    
     <%
   		JobDetailMaintenance jobDets = new JobDetailMaintenance();   		
      
      	String jobCode = request.getParameter("jobCode");
      	if (jobCode == null) jobCode = "";

      	String mode = request.getParameter("mode");
      	if (mode == null) mode = "Display";
      	
      	// Get Job Details
	      	
	      	String JobName="",JobType="",JobStatus="",JobHMI="",IssueDate="";
	      	String JobDesc="",IssuedBy="",Priority="";
	      	
	      	String StartDate="",EndDate="";
	      	JobMaintenance jobHead = new JobMaintenance();
			boolean ret = jobHead.populateSingleJobRec(jobCode);
	      	
    		if (ret==true)
    		{    			
    			 ret = jobHead.getNextRecord();
              	 if(ret==true)
              	 {           	
                 	JobName = jobHead.getString("JOB_NAME");   
                 	JobType = jobHead.getString("JOB_TYPE");   
                 	JobStatus = jobHead.getString("JOB_STATUS");
                 	JobHMI = jobHead.getString("JOB_HMI_CODE");   
                 	IssueDate = jobHead.getString("JOB_ISSUE_DATE");   
                 	IssuedBy = jobHead.getString("JOB_ISSUED_BY_CODE");   
                 	StartDate = jobHead.getString("JOB_START_DATE");   
                 	EndDate = jobHead.getString("JOB_END_DATE_APPROX");     	                 	
                 	Priority = jobHead.getString("JOB_PRIORITY"); 
                 	JobDesc = jobHead.getString("JOB_DESCRIPTION"); 
                 }
            }
              	            
            jobHead.closeConnection();  	      		      	
    %>
 
		<div id="staticJobHeader">
   		<table id="jobHeaderTab">
			<tr>
			<td id="jobHeaderTd"><b> Job Name :</b><%=JobName%></td>
			<td id="jobHeaderTd"><b>Type : </b><%=JobType%></td>
			<td id="jobHeaderTd"><b>HMI Code : </b><%=JobHMI%></td>
			<td id="jobHeaderTd"><b>Priority : </b><%=Priority%></td>
			<td id="jobHeaderTd"><b>Status : </b><%=JobStatus%></td>
			<td id="jobHeaderTd"><b>Issued By : </b><%=IssuedBy%></td>
			</tr>				
			<tr>
			<td id="jobHeaderTd" colspan="2"><b> Issue Date :</b> <%=IssueDate%></td>		
			<td id="jobHeaderTd" colspan="2"><b>Start Date : </b><%=StartDate%></td>		
			<td id="jobHeaderTd" colspan="2"><b>End Date : </b><%=EndDate%></td>		
			</tr>
			<tr>
			<td id="jobHeaderTd" colspan="6"><b> Description :</b> <%=JobDesc%></td>					
			</tr>
			
		</table>				
		</div>
   
        <h3>Job Tasks</h3>
	    <div id="detailsDataTable"></div>
	    
	    <h3>Job Subtasks</h3>
	    <div id="subtaskDataTable"></div>
    
   	    <jsp:include page="TemplateFooter.jspf"/>  
    
  </body>
</html>

Author

Posts

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

You must be logged in to reply to this topic.