Author Topic: javascript dataModel - URL value ?  (Read 11978 times)

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
javascript dataModel - URL value ?
« on: December 29, 2016, 12:18:37 am »
Any suggestions greatly appreciated.

I have JSON string generated dynamically using java. (main . java)
Code: [Select]
package com.queryData.main;

import com.queryData.dao.DataDAO;
import com.queryData.services.JsonServices;
import java.sql.ResultSet;
import java.util.List;
import org.json.JSONObject;

public class Main {
ResultSet resultSet = null;
DataDAO datadao = new DataDAO();

public List<JSONObject> getJsonObject() {
resultSet = datadao.getResultSet();
List<JSONObject> resList = JsonServices.getFormattedResult(resultSet);
return resList;
}

public static void main(String[] args) {
Main m = new Main();
List<JSONObject> jObj = m.getJsonObject();
for (int i = 0; i < jObj.size(); i++) {
System.out.println(jObj.get(i));
}
}
}
I have paramQuery grid loading but have a problem with the dataModel to load the data. (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>
<!--jQuery dependencies-->
<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>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<h:outputStylesheet name="css/pqgrid.min.css" />
<h:outputScript name="js/pqgrid.min.js" />
<!--Include Touch Punch file to provide support for touch devices-->
<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"}
        ];   
    <!-- reference to load remote data -->   
    var dataModel = {
            recIndx: "personid",
            location: "remote",
            sorting: "local",
            paging: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "lastname",
            sortDir: "up",           
            url: "main.java"
            , getData: function (dataJSON) {
                var data = dataJSON.data;
                return { data: dataJSON.data };
            }
        }   
    <!-- KEY PART TO LOAD DATA -->       
    $("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
Re: javascript dataModel - URL value ?
« Reply #1 on: December 29, 2016, 01:46:04 pm »
Can I receive some direction to bind ParamQuery to MySQL as reviewed here as well as http://stackoverflow.com/questions/41368416/datamodel-url-javascript-function-does-not-populate-grid

It is my interest to have a CRUD grid that incorporates import/export CSV.

I strongly believe ParamQuery may be able to accomplish this, but I have tried for weeks and have yet to populate the grid even once.

I did a site search: 
dataType json url getData site:http://paramquery.com

which returned 314 results

I am going to view each to see if there is anything that resembles what I am trying to accomplish.

Jon

Currently the failing javascript in index . xhtml is

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>
<!--jQuery dependencies-->
<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>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<h:outputStylesheet name="css/pqgrid.min.css" />
<h:outputScript name="js/pqgrid.min.js" />
<!--Include Touch Punch file to provide support for touch devices-->
<h:outputScript name="js/jquery.ui.touch-punch.js" />

<script>
$(function()
{
    var obj = {dataModel:dataModel};   
    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"}
        ];
   
    <!-- reference to load remote data -->
 
    var dataModel = {
        location: "remote",   
        sorting: "local",                     
        dataType: "JSON",
        method: "GET",
        url: "json",
        getData: function (dataJSON) {return { data: dataJSON.data };}
    }
 // Initiate the request!       
    $("div#grid_array").pqGrid( obj );
}
);
</script>

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



« Last Edit: December 30, 2016, 10:42:35 am by paramquery »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
formatted javascript function better for reviewing WHAT the URL may need to be
« Reply #2 on: December 29, 2016, 09:33:58 pm »
formatted javascript function better for reviewing WHAT the URL may need to be to retrieve the JSON string in the variable

Code: [Select]
System.out.println(jObj);

Updated 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>
<!--jQuery dependencies-->
<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>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<h:outputStylesheet name="css/pqgrid.min.css" />
<h:outputScript name="js/pqgrid.min.js" />
<!--Include Touch Punch file to provide support for touch devices-->
<h:outputScript name="js/jquery.ui.touch-punch.js" />

<script>
$(function()
{
<!-- reference to load remote data -->
    var dataModel =
{
            location: "remote",   
            sorting: "local",                     
            dataType: "JSON",
            method: "GET",
            url: "json",
            getData: function (dataJSON) {return { data: dataJSON.data };}   
        }
<!-- reference to create column titles -->
    var obj = {dataModel:dataModel};   
    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"}
        ];
<!-- reference to initiate the request -->
    $("div#grid_array").pqGrid( obj );
}
);
</script>

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

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5089
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #3 on: December 29, 2016, 09:53:19 pm »
[ Only Pro members may read this post. ]
« Last Edit: December 29, 2016, 09:56:21 pm by paramquery »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #4 on: December 29, 2016, 09:59:37 pm »
Thank you, is the URL correct ?

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #5 on: December 29, 2016, 10:14:16 pm »
The JSON string is:

[{"LASTNAME":"Leonard","PERSON_ID":"0","FIRSTNAME":"Erick","FULLNAME":"Erick Leonard"}, {"LASTNAME":"Proctor","PERSON_ID":"1","FIRSTNAME":"Gretchen","FULLNAME":"Gretchen Proctor"}]

What is missing is the

{"data":

as in

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

?

OK, shall figure out how to incorporate the prefix {"data": either in the backing bean or in the view [index . xhtml]

Also, please, I LOVE ParamQuery and think it is the greatest.  I am not looking for a HAND OUT in code, I am seeking a HAND UP, to discover and understand and learn.  Any references of instruction you may point to in resolving any ParamQuery issues, please share the reference -- that I may study and resolve the ParamQuery challenges.

Please, what would the URL be ?




paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5089
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #6 on: December 30, 2016, 10:18:48 am »
[ Only Pro members may read this post. ]
« Last Edit: December 30, 2016, 10:44:14 am by paramquery »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #7 on: December 30, 2016, 01:20:30 pm »
I know what URL is abbreviated from.  What I have yet to discover is it's usage in JSON JAVA.

Thank you, I have reviewed the link you shared in the editing batch demo and do see the controller code.

The code I have dynamically gathers the columns from remote MySQL, and uses five beans:
1.  DbProperty - contains four items for connection: mysql driver, remote URL string, username, password
2.  DbConnection - performs the remote connection
3.  DataDAO - sends the prepared statement sql select string

the next two beans is where I believe I need to discover how to link ParamQuery to my data set

4.  JsonServices - gets the data and returns a resultset
5.  Main - formats the resultset

If possible, please.  how may I modify my script in my VIEW index.xhtml to view the data?

6.  Index . xhtml - contains the script and presents the ParamQuery grid view

Please, my hope is to witness one run of ParamQuery grid with the data.  Attached is the war file for Tomcat v8.5
https://drive.google.com/open?id=0B420RdP1txLuUEFpTGt1a091RGs

The area of focus, I believe is:  JQuery.GetJson -- Load JSON-encoded data from the server using a GET HTTP request?
If this is not the correct TOPIC of what I am discovering to do, please inform, that I may focus my energy and study to get ParamQuery Grid data bound.

Thank you.

Jon





paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5089
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #8 on: December 30, 2016, 03:23:54 pm »
[ Only Pro members may read this post. ]
« Last Edit: December 30, 2016, 03:25:40 pm by paramquery »

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #9 on: December 30, 2016, 09:35:18 pm »
Thank you!

From the example you shared, I can see how to add the

{\"data\":" +

to the result JSON string generated from my bean

Code: [Select]
    //get all products
    @RequestMapping(value="/products/get",method=RequestMethod.GET)
    public @ResponseBody String products(ModelMap model, HttpServletRequest request ){
       
        HttpSession ses = fillInSession(request);       
       
        List<Product> products = (List<Product>)ses.getAttribute("Products");

        String serializedProducts = serialize(products);
       
        String responseStr = "{\"data\":" + serializedProducts + "}";       
        return responseStr;       
    }               
}


I do not understand HOW to take the Json result sting and make it into a HTTP URL...

The bean is pulling the remote data and processing it locally -- there is no URL link to that processed data

Would studying Knockout educate me as to HOW to take a generated JSON string result and make it into a URL ?

http://knockoutjs.com/

Any suggestions greatly appreciated.

Thank you.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5089
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #10 on: December 30, 2016, 10:03:01 pm »
[ Only Pro members may read this post. ]

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #11 on: December 30, 2016, 10:16:45 pm »
Thank you, shall search with the keywords JSON URL web.xml to discover how to create a URL from my bean created JSON string -- when that same JSON string is not deployed anywhere, the remote data is pulled from MySQL database and then processed by the bean to convert that same MySQL data into a formatted JSON string.

Where would there every be a URL ?

The initial URL is to the server where the data is: jdbc:mysql://querydatabase.cn2wifbapzhr.us-west-2.rds.amazonaws.com:3306/webData

This is obviously my weakest point of knowledge, and I am determined to make it my strongest point of knowledge.

Thank you, for your assistance. Do you have any examples on your site paramquery.com that accomplishes a paramquery grid data population of data from a remote MySQL server in java, I have viewed you many examples and have not located one yet, as I agree with you the process should be very basic and simple to data bind, but THEN AGAIN, still I have not accomplished it.

What option to do I have -- with no successful examples to mimic, and with no understanding of the URL being created to match the process of data conversion from remote MySQL to JSON string (the new string data is not stored, it is simply processed / converted LIVE by a bean)




dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #12 on: December 30, 2016, 10:23:30 pm »
I am quite confident I shall locate the answer.

Thank you for all your assistance, I do not mean to take up so much of your valuable time.

I think I may have it.

The URL is calling the JSON servlet BEAN:

"Using $.ajax calling GetMessages servlet then reading JSON data with $.each method and appending data into content div. "

$(document).ready(function()
{
$.ajax
({
type: "GET",
url: "GetMessages",
dataType:"json",
success: function(data)

« Last Edit: December 30, 2016, 10:45:52 pm by dataSQL_ »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5089
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #13 on: December 30, 2016, 10:53:28 pm »
[ Only Pro members may read this post. ]

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: javascript dataModel - URL value ?
« Reply #14 on: December 31, 2016, 12:25:02 am »
yes, Thank you!

Boy oh boy, do I love ParamQuery Grid, cannot wait to see it run like lightening!