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

dataSQL_ · « **on:** December 29, 2016, 12:18:37 am »

Any suggestions greatly appreciated.

I have JSON string generated dynamically using java. (main . java)

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_ · « **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>

dataSQL_ · « **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 · « **Reply #3 on:** December 29, 2016, 09:53:19 pm »

Your remote script needs to return JSON data in this format http://paramquery.com/pro/products/get?pq_datatype=JSON

which is

Code: [Select]

  { "data": [ row1, row2, ... ] }

If it doesn't show up, then errors could be checked in the browser developer tools console.

dataModel.error can also be implemented to check for any Ajax related errors.

http://paramquery.com/pro/api#option-dataModel-error

dataSQL_ · « **Reply #4 on:** December 29, 2016, 09:59:37 pm »

Thank you, is the URL correct ?

dataSQL_ · « **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 · « **Reply #6 on:** December 30, 2016, 10:18:48 am »

This topic is moved from Evaluation Board to Pro members' board.

url is "uniform resource locator" of the resource from where you return the response from server in JSON format. It can be absolute or relative address.

For example in this demo: http://paramquery.com/pro/demos/editing_batch

the url is

Code: [Select]

url: "/pro/products/get"

Reference to API: http://paramquery.com/pro/api#option-dataModel-url

dataSQL_ · « **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 · « **Reply #8 on:** December 30, 2016, 03:23:54 pm »

It's quite simple if you focus on the basics.

Number and type of java beans used is entirely up to you. What matters is that you should be able to generate JSON data in this format.

{"data": [ row1, row2, ..] }

and retrievable through a URL via GET HTTP request.

In your view index.xhtml, you need to assign above url to dataModel.url

An easy way to check whether the url is working correctly is by opening it up in the browser.

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

Hope it helps.

dataSQL_ · « **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 · « **Reply #10 on:** December 30, 2016, 10:03:01 pm »

In Spring MVC, urls are usually defined in WEB-INF/web.xml

Code: [Select]

<servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/products/get</url-pattern>        
</servlet-mapping>

It may be bit different in your environment.

No there is no need to study Knockoutjs for this.

dataSQL_ · « **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_ · « **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)

paramvir · « **Reply #13 on:** December 30, 2016, 10:53:28 pm »

Just want to add to my previous reply.

Urls are mapped to methods with help of annotations:

Code: [Select]

@RequestMapping(value="/products/get",method=RequestMethod.GET)
    public @ResponseBody String products(ModelMap model, HttpServletRequest request ){
        ...
    }

dataSQL_ · « **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!

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

dataSQL_

javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

dataSQL_

formatted javascript function better for reviewing WHAT the URL may need to be

paramvir

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

paramvir

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

paramvir

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

paramvir

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?

paramvir

Re: javascript dataModel - URL value ?

dataSQL_

Re: javascript dataModel - URL value ?