Author Topic: JSON servlet returns string - HURRAY!, but cannot display in paramquery grid  (Read 9258 times)

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Hello, finally am able to get the JSON string in the correct format:

{"data":[{"LASTNAME":"Leonard","PERSON_ID":"0","FIRSTNAME":"Erick","FULLNAME":"Erick Leonard"}]}

Please, why is ParamQuery still not populating?



mapping web.xml:

Code: [Select]
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
 
  <display-name>webData</display-name>
 
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
 
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
   
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
 
  <servlet>
    <servlet-name>queryreturn</servlet-name>
    <servlet-class>com.queryData.Return.QueryReturn</servlet-class>   
  </servlet>
   
  <servlet-mapping>
    <servlet-name>queryreturn</servlet-name>
    <url-pattern>/queryreturn</url-pattern>
  </servlet-mapping>
 
  <context-param>
    <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
 
  <context-param>
    <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
    <param-value>resources.application</param-value>
  </context-param>
 
  <listener>
    <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
  </listener>
 
</web-app>

Here is the index.xhtml

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"/>
<h:outputStylesheet name="css/pqgrid.min.css"/>
<h:outputScript name="js/pqgrid.min.js"/>
<h:outputScript name="js/jquery.ui.touch-punch.js"/>
<script>
$(function(){
    var obj = {};
    obj.width = 700;
    obj.height = 400;   
    obj.colModel = [
    { title: "Person ID", width:100, dataIndx: "person_id"},
    { title: "Full Name", width:200, dataIndx: "fullname"},
    { title: "First Name", width:150, dataIndx: "firstname"},
    { title: "Last Name", width:150, dataIndx: "lastname"}
        ];
    var dataModel = {
            recIndx: "person_id",
            location: "remote",
            sorting: "local",
            paging: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "lastname",
            sortDir: "up",           
            url: "queryreturn"
            , getData: function (dataJSON) {
                var data = dataJSON.data;
                return { data: dataJSON.data };
            }
        }
    $("div#grid_array").pqGrid( obj );
});
</script>
</h:head>
<h:body>
<div id="grid_array"></div> 
</h:body>
</html>

here is the servlet

Code: [Select]
package com.queryData.Return;
//Import required java libraries
import java.io.*;
import java.util.List;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;
import com.queryData.main.Main;
// Extend HttpServlet class
public class QueryReturn extends HttpServlet
{
private static final long serialVersionUID = 1L;
public void init() throws ServletException
  {
      // Do required initialization
  }
  public void doGet(HttpServletRequest request,
                  HttpServletResponse response)
            throws ServletException, IOException
  {
      Main m = new Main();
      List<JSONObject> jObj = m.getJsonObject();
      StringBuilder sb = new StringBuilder();
      for(int i =0 ; i < jObj.size(); i++)
      {
         sb.append(jObj.get(i).toString());
      }         
      String responseStr = "{\"data\":[" + sb + "]}";

      // Set response content type
      response.setContentType("application/json");
      // Actual logic goes here.
      PrintWriter out = response.getWriter();
      out.println(responseStr);

  }
  public void destroy()
  {
      // do nothing.
  }
}
« Last Edit: January 02, 2017, 07:08:48 am by dataSQL_ »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Hello, I posted the same on

http://stackoverflow.com/questions/41419999/when-i-run-java-servlet-to-view-json-result-it-pops-up-file-download-instead

Can not wait to finally see some MySQL data in ParamQuery!

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Forgot to mention the exact same thing happens with

http://paramquery.com/pro/products/get

The OPENING GET pops up

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Make these 2 corrections:

1.  No need to set response content type, just leave it to default value (text/plain), so remove this line: response.setContentType("application/json");

2. Assign the dataModel definition to initialization object obj in the view.

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
servlet returns JSON - data does not load in paramquery grid
« Reply #4 on: January 02, 2017, 02:45:47 pm »
Thank you, by removing the ContentType in the servlet, it works PERFECT, the servlet runs and displays.

I included the obj.dataModel = dataModel below the obj.colModel, still no data loading.

Below is the current index.xhtml with the javascript

Any suggestions greatly appreciated:

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"/>
<h:outputStylesheet name="css/pqgrid.min.css"/>
<h:outputScript name="js/pqgrid.min.js"/>
<h:outputScript name="js/jquery.ui.touch-punch.js"/>

<script>
$(function()
{
        var dataModel =
        {       
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/webData/queryreturn/get",
            getData: function (dataJSON)
            {
                return { data: dataJSON.data };
            }
        }



    var obj = {};
    obj.width = 700;
    obj.height = 400;   
    obj.colModel = [
    { title: "Person ID", width:100, dataType: "int", dataIndx: "person_id"},
    { title: "Full Name", width:200, dataType: "string", dataIndx: "fullname"},
    { title: "First Name", width:150, dataType: "string", dataIndx: "firstname"},
    { title: "Last Name", width:150,  dataType: "string", dataIndx: "lastname"}];
   
        obj.dataModel = dataModel;
    $("div#grid_array").pqGrid( obj );
});
</script>
</h:head>
<h:body>
<div id="grid_array"></div> 
</h:body>
</html>
« Last Edit: January 02, 2017, 03:38:28 pm by dataSQL_ »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
obj.dataModel = dataModel;

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
INCLUDED the

obj.dataModel = dataModel;

data does not load.

Why does the gird not roll up or roll down properly here, when deployed:
http://35.166.148.217/faces/index.xhtml



Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"/>
<h:outputStylesheet name="css/pqgrid.min.css"/>
<h:outputScript name="js/pqgrid.min.js"/>
<h:outputScript name="js/jquery.ui.touch-punch.js"/>

<script>
$(function()
{
    var dataModel =
    {   location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/webData/queryreturn/get",
            getData: function (dataJSON)
          {  return { data: dataJSON.data };  }
    }
   
    var obj = {};
    obj.dataModel = dataModel;
    obj.width = 700;
    obj.height = 400;   
    obj.colModel = [
    { title: "Person ID", width:100, dataType: "int", dataIndx: "person_id"},
    { title: "Full Name", width:200, dataType: "string", dataIndx: "fullname"},
    { title: "First Name", width:150, dataType: "string", dataIndx: "firstname"},
    { title: "Last Name", width:150,  dataType: "string", dataIndx: "lastname"}];
         
    $("div#grid_array").pqGrid( obj );
    });
</script>

</h:head>
<h:body>
<div id="grid_array"></div>
</h:body>
</html>
« Last Edit: January 02, 2017, 04:41:14 pm by dataSQL_ »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Add below error property to dataModel which would help you to locate the problem.

Code: [Select]
error: function(a, b, c){
alert(b);
alert(c);
alert(a.responseText);
console.log(a.responseText);
},
« Last Edit: January 02, 2017, 04:40:54 pm by paramquery »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Thank you, I included the error: function ( I think in the proper placement ) there is no error message, but the grid does not show now, which is usually due to some mistake in the javascript function -=- there must be something ? that is not allowing the data to load.


Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"/>
<h:outputStylesheet name="css/pqgrid.min.css"/>
<h:outputScript name="js/pqgrid.min.js"/>
<h:outputScript name="js/jquery.ui.touch-punch.js"/>

<script>
$(function()
{
    var dataModel =
    {   location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "queryreturn",
            getData: function (dataJSON)
           
              error: function(a, b, c){
alert(b);
alert(c);
alert(a.responseText);
console.log(a.responseText);
},       
           
           
          {  return { data: dataJSON.data };  }       

    }   
    var obj = {};
    obj.dataModel = dataModel;
   
    obj.width = 700;
    obj.height = 400;   
    obj.colModel = [
    { title: "Person ID", width:100, dataType: "int", dataIndx: "person_id"},
    { title: "Full Name", width:200, dataType: "string", dataIndx: "fullname"},
    { title: "First Name", width:150, dataType: "string", dataIndx: "firstname"},
    { title: "Last Name", width:150,  dataType: "string", dataIndx: "lastname"}];
         
    $("div#grid_array").pqGrid( obj );
    });
</script>

</h:head>
<h:body>
<div id="grid_array"></div>
</h:body>
</html>

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Could the data not be binding from the JSON string to ParamQuery grid due to the COLUMN ORDER?

note: the data is dynamically retrieved without Model getters/setter

Below is a schema image of default column order of the table

1-person_id
2-firstname
3-lastname
4-fullname


The servlet is returning the JSON string is a different order


3-lastname
1-person_id
2-firstname
4-fullname


Why would the order change like this?

What would cause this?

Could the data not be binding from the JSON string to ParamQuery grid due to the COLUMN ORDER?

Would this prevent the data bindings?

I changed the obj.colModel to match the JSON STRING - still no data binding.
Code: [Select]
<script>
$(function()
{
    var dataModel =
    {   location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "queryreturn",
            getData: function (dataJSON)
          {  return { data: dataJSON.data };  }
    }
   
    var obj = {};
    obj.dataModel = dataModel;
    obj.width = 700;
    obj.height = 400;   
    obj.colModel = [
    { title: "Last Name", width:150,  dataType: "string", dataIndx: "lastname"},
    { title: "Person ID", width:100, dataType: "int", dataIndx: "person_id"},
    { title: "First Name", width:150, dataType: "string", dataIndx: "firstname"},
    { title: "Full Name", width:200, dataType: "string", dataIndx: "fullname"},
    ];
         
    $("div#grid_array").pqGrid( obj );
    });
</script>

</h:head>
<h:body>
<div id="grid_array"></div>
</h:body>


Below is the JSON string result

Code: [Select]
{"data":[{"LASTNAME":"Leonard","PERSON_ID":"0","FIRSTNAME":"Erick","FULLNAME":"Erick Leonard"}]}

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
1. javascript is case sensitive, so it should be person_id instead of PERSON_ID in JSON data.

2. field order in JSON data is not important.

3. Add below error property to dataModel which would help you to locate the problem.

Code: [Select]
var dataModel = {
   error: function(a, b, c){
alert(b);
alert(c);
alert(a.responseText);
console.log(a.responseText);
   },
   ...other properties....
};

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
YOU are so Excellent... wow, one day my aspiration is to attain your level of coding...

I made the corrections and deployed development to http://35.166.148.217/faces/index.xhtml

I do not understand how to identify or fix the error.
I looked at the TomCat logs

"The full stack trace of the root cause is available in the Apache Tomcat/8.0.39 logs."



1.  Fixed the JSON output to lowercase:

Code: [Select]
package com.queryData.services;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.json.JSONObject;

public class JsonServices {
public static List<JSONObject> getFormattedResult(ResultSet rs) {
List<JSONObject> resList = new ArrayList<JSONObject>();

try {
// get column names
ResultSetMetaData rsMeta = rs.getMetaData();
int columnCnt = rsMeta.getColumnCount();
List<String> columnNames = new ArrayList<String>();
// loop to get all column names
for (int i = 1; i <= columnCnt; i++) {
// adding all retrieved column names to List object
columnNames.add(rsMeta.getColumnName(i).toLowerCase());
}
while (rs.next()) {
// convert each object to an human readable JSON object
JSONObject obj = new JSONObject();
for (int i = 1; i <= columnCnt; i++) {
String key = columnNames.get(i - 1);
String value = rs.getString(i);
obj.put(key, value);
}
resList.add(obj);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return resList;
}
}

here is the revised VIEW (index.xtml)
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"/>
<h:outputStylesheet name="css/pqgrid.min.css"/>
<h:outputScript name="js/pqgrid.min.js"/>
<h:outputScript name="js/jquery.ui.touch-punch.js"/>

<script>
$(function()
{
var dataModel =
{
    error: function(a, b, c)
    { alert(b);
alert(c);
alert(a.responseText);
console.log(a.responseText);},

        location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "queryreturn",
            getData: function (dataJSON)
          {  return { data: dataJSON.data };  }
    }
   
    var obj = {};
    obj.dataModel = dataModel;
    obj.width = 700;
    obj.height = 400;   
    obj.colModel = [
    { title: "Last Name", width:150,  dataType: "string", dataIndx: "lastname"},
    { title: "Person ID", width:100, dataType: "int", dataIndx: "person_id"},
    { title: "First Name", width:150, dataType: "string", dataIndx: "firstname"},
    { title: "Full Name", width:200, dataType: "string", dataIndx: "fullname"},
    ];
         
    $("div#grid_array").pqGrid( obj );
    });
</script>

</h:head>
<h:body>
<div id="grid_array"></div>
</h:body>
</html>


below is the ERROR response (thank you)  How do I find it in a text file to view?



« Last Edit: January 02, 2017, 10:57:59 pm by dataSQL_ »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Ok, fixed one part! one last part to go...
« Reply #12 on: January 03, 2017, 12:07:01 am »
With excellent guidance from a few exceptional and kind persons, I was able to discover the JSON string was being generated incorrectly, it lacked a comma delimiter between records - I tested the generated output from the servlet URL as indicated in web.xml

http://localhost:8080/webData/queryreturn

which produces a JSON result that now is valid according to http://jsonlint.com/

The last issue is to BIND to ParamQuery, I think the issue is somewhere within the var dataModel =

Please, may you please share the MINIMUM items required in the var dataModel =
to accomplish a data binding using HTTPServlet (java servlet) -- as there are a lot of examples for Php and others.

If I could have one example to follow, I KNOW I can get it data bound just like all the others here that are successful in using your
wonderful data table grid component.

Thank you for all your assistance, with great hope, this is the last step to FINALLY seeing some DATA in ParamQuery, which is my aspiration.

Thank you.

« Last Edit: January 03, 2017, 05:24:01 am by dataSQL_ »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
I still see server 500 error in the url shared by you in the previous post. http://35.166.148.217/faces/queryreturn.

Can you please resolve the error, paramquery grid can't be bound to remote data as long as you have errors in your remote scripts.

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Thank you.  I really would LOVE to correct the error, I do not know how to discover the error, as I cannot access the tomcat logs on my windows 7 local box, but I deployed to AWS on a Linux box, but do not know how to access the tomcat logs there.

How would I be able to IDENTIFY the exact error and cause, as with knowing the error, it is impossible to begin a search for a solution?

http://stackoverflow.com/questions/41448741/how-to-access-the-full-stack-trace-of-the-root-cause-is-available-in-the-apache