Geek Answers Handbook

SmartGwt - network load data from JSON

I am trying to get started with SmartGwt. I use XJSONDatasource to make a cross-domain call to a sample SmartClient page with JSON data. However, when I run the code, a pop-up window appears that says: “Search for records that match your criteria ...” This never disappears, and the data does not load. I use the free version of SmartGwt (my company stated that this is what we will use). Hope I just missed something obvious.

DataSource dataSource = new XJSONDataSource(); dataSource.setDataTransport(RPCTransport.SCRIPTINCLUDE); dataSource.setDataFormat(DSDataFormat.JSON); dataSource.setDataURL("http://www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js"); DataSourceTextField nameField = new DataSourceTextField("name", "name"); nameField.setValueXPath("name"); dataSource.setFields(nameField); ListGrid grid = new ListGrid(); grid.setDataSource(dataSource); grid.setWidth100(); grid.setHeight(100); grid.setAutoFetchData(true); grid.draw();
+6
smartgwt
source share
2 answers

In the docs I see: http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/data/XJSONDataSource.html

Note, as indicated in the tutorial above, the server is responsible for writing out not only data, but also a call to the JavaScript function, which tells the client that the answer has arrived. The client passes the function call name as a "callback" URL.

But such a callback code in the code is not on the page that you link to www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js

+4
source share

When your smartGWT data source calls this URL:

 http://www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js

(If the data source makes a call to a Java application, skip to the bottom of this answer)

Your data source query will include a GET parameter called a callback, which looks like this:

 callback=isc.Comm._scriptIncludeReply_0

script, contactsData.js, you will need to commit this GET parameter.

contactsData.js will need to enable the library to retrieve the parameters from the URL:

Function to get javascript parameters:

 function getParameter ( queryString, parameterName ) { // Add "=" to the parameter name (ie parameterName=value) var parameterName = parameterName + "="; if ( queryString.length > 0 ) { // Find the beginning of the string begin = queryString.indexOf ( parameterName ); // If the parameter name is not found, skip it, otherwise return the value if ( begin != -1 ) { // Add the length (integer) to the beginning begin += parameterName.length; // Multiple parameters are separated by the "&" sign end = queryString.indexOf ( "&" , begin ); if ( end == -1 ) { end = queryString.length }

Function for getting jQuery parameters

 http://ajaxcssblog.com/jquery/url-read-request-variables/

After you get the value of the callback parameter, you will write the function name with JSON as the parameter in the response body, for example:

 isc.Comm._scriptIncludeReply_0({"item": [ {"id": "1","name": "Monkey"}, {"id": "2","name": "Tree"}, {"id": "3","name": "Banana"} ] })

Thus, the javascript code will look something like this:

 Response.Write(getParameter(URLrequestFromDatasourceString,"callback") + " ( " + JSON + " )" );

Java

If your smartGWT data source calls the Java application URL:

http://www.smartclient.com/getJson.htm

Your Java controller will do the same, but much easier

 String callbackString = request.getParameter("callback"); response.setContentType("text/X-JSON"); response.getWriter().write( callbackString + " ( " + JSONstring + " ) " ); response.setStatus(HttpServletResponse.SC_OK);

Also, here is the link to the blog post about the problem

+3
source share

More articles:


All Articles