jQWidgets Forums

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

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

Author

TypeError: record is undefined Posts

October 20, 2014 at 8:53 pm TypeError: record is undefined #61403

plexor

Participant

I copied a demo and modified it to meet my needs but i’m getting ‘TypeError: record is undefined’ and i don’t know how to solve it.

Here is my HTML code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,plexor">
<meta name="description" content="Plexor AB - Platform independent IT-consultants">
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.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/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.selection.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script> 
<style type="text/css">
        table {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
            table th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #dedede;
            }
            table td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "servlet/ProductServlet";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'prd_id', type: 'int' },
                    { name: 'prd_descr', type: 'string' }
                ],
                id: '<prd_id></prd_id>',
                url: url,
                type: 'POST'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (records) {
                    // get data records.
                    var records = dataAdapter.records;
                    // get the length of the records array.
                    var length = records.length;
                    // loop through the records and display them in a table.
                    var html = "<table border='1'><tr><th align='left'>ID</th><th align='left'>Description</th></tr>";
                    for (var i = 0; i < 20; i++) {
                        var record = records[i];
                        html += "<tr>";
                        html += "<td>" + record.prd_id + "</td>";
                        html += "<td>" + record.prd_descr + "</td>";
                        html += "</tr>";
                    }
                    html += "</table>";
                    $("#table").html(html);
                },
                loadError: function (jqXHR, status, error) {
                },
                beforeLoadComplete: function (records) {
                }
            });
            // perform data binding.
            dataAdapter.dataBind();
        });
    </script>
</head>
<body class='default'>
    <div id="table">
        Loading...
    </div>
 </body>
</html>

.. and here is my Java servlet that provides the HTML page with JSON data:

package se.plexor;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import se.plexor.ProductBean;
import se.plexor.DBUtil;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class ProductServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {

		//response.setContentType("text/html");
		response.setContentType("application/json");
		PrintWriter out = response.getWriter();
		System.out.println("Get...");
		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {

		//response.setContentType("text/html");
		response.setContentType("application/json");
		PrintWriter out = response.getWriter();

		//Define Database Connection & ResultSet
		DBUtil db=new DBUtil();
		Connection con=db.getConnect();
		ResultSet rs=null;
		PreparedStatement ps=null,ps1=null;

		//JSON object
		JSONObject json = new JSONObject();

		//Create List to store all objects
		List<ProductBean> pb = new ArrayList<ProductBean>();

		//SQL query
		String sql = "SELECT prd_id, prd_descr ";
		sql = sql +  "FROM prd ORDER BY prd_id";

		//Execute all queries here
		try {

			ps1 = con.prepareStatement(sql);
			rs = ps1.executeQuery();

			while (rs.next())
			{
				//create every time a new object to store rows data
				ProductBean p = new ProductBean();
				p.setprd_id(rs.getInt("prd_id"));
				p.setprd_descr(rs.getString("prd_descr"));
				pb.add(p);
			}

			//put arraylist in json with rows key
			json.put("rows", pb);

		} catch (SQLException e1) {
			e1.printStackTrace();
		}
		finally {
			try {if(rs!=null)rs.close();}catch(SQLException e) {e.printStackTrace();}
			try {if(ps!=null)ps.close();}catch(SQLException e) {e.printStackTrace();}
			try {if(ps1!=null)ps1.close();}catch(SQLException e) {e.printStackTrace();}
			try {if(con!=null)con.close();}catch(SQLException e) {e.printStackTrace();}}
		
		//return json data to JSP page
		out.print(json);		
		out.flush();
		out.close();
	}

}

October 21, 2014 at 3:58 am TypeError: record is undefined #61405

Peter Stoev

Keymaster

Hi plexor,

If you get record is undefined then this means that the below code crashes:

  for (var i = 0; i < 20; i++) {
                        var record = records[i];
                        html += "<tr>";
                        html += "<td>" + record.prd_id + "</td>";
                        html += "<td>" + record.prd_descr + "</td>";
                        html += "</tr>";
                    }

It also means that records[i] is undefined because var record = records[i]. This makes me to think that your binding it not much successful. Could you provide the JSON or sample JSON similar to the original which would allow us to test your scenario?

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.