liferay, jsf. How to javascript json object save to database

Question

Need some help in the following case:

I have set an application as Liferay portlet and i am using JSF/Primefaces for builing my views. For data modelling i am using Hibernate.

In a certain view i load a so called "image annotator" which is using Javascript tools for gathering user input (annotation on an image canvas). This information i would like to be able to save in a file/database and then re-use when the user edits again a specific image.

Here is my view:

<h:head>
    <script src="#{facesContext.externalContext.requestContextPath}/js/OpenLayers.js" />
    <script src="#{facesContext.externalContext.requestContextPath}/js/image-viewer.js" />
    <script src="#{facesContext.externalContext.requestContextPath}/js/xml2js/xml2json.js" />
    <script src="#{facesContext.externalContext.requestContextPath}/js/xml2js/xml2json.min.js" />
    ...
</head>
...
<p:fieldset legend="Viewer">
    <p:outputPanel layout="block" styleClass="imageEditorImagePanel" />
</p:fieldset>
....

So the image and the relevant jscript tools (OpenLayers) are loaded in imageEditorPanel placeholder.

The javascript code (image-viewer.js) gathers user input in a json (GEOJson) object, and this object i would like to pass to a back bean controller when Save button (jscript) is selected:

...
//define save button
var save = new OpenLayers.Control.Button({
        title: 'Save', text: 'Save',
        trigger: function(){

        var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON();        
        var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features);
        ...

So i want to pass 'vectorLayerAsJson' object to a java controller (backbean) ...

I am trying to implement an ajax call like:

jQuery.ajax({
    type: 'POST',
    url: 'imageannotations',
    contentType: 'application/json',
    data: vectorLayerAsJson,
    success : function(data) { alert("success")}
});

can anybody help on how am i going to make this ajax request as also how am i going to implement my controller class?

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

You can initiate a call to a java managed bean via Javascript using primefaces p:remoteCommand. Answers how to send the String as an argument can be found here.

In the managed bean/java controller, just have a String variable with getter/setter and an action method to start the unserialization (following is untested code):

@ManagedBean(name="testBean")
public class Test {
  public String actionOnString() {
    String value = FacesContext.getCurrentInstance()
                     .getExternalContext().getRequestParameterMap().get("param");
  // do your unserialize and actions here
  return "";
  }
}

Within JSF have something like

<p:remoteCommand name="sendJSONToServer" action="#{testBean.actionOnString}" />

and as javascript on the desired position

sendJSONToServer({param: vectorLayerAsJson});

should do the job.

Direct ajax-push is also possible via PrimePush, using the athmosphere framework. Possibly, that might be overkill for what you try to achieve.

Update 1

Of course, when you get a JSON-Object serialized (so to say "n String format), you have to JSONize it in Javascript - this answer "How to parse JSON in JavaScript" might help you further regarding that.

Hope it helps...

edited May 23 '17 at 12:20

Community

1
1

answered Dec 16 '13 at 14:56

L-Ray

1,637
1
16
29

I do not think this is what exactly i want, since everything is built via javascript. Actually i have just a placeholder "imageEditorImagePanel" which loads an imaging tool. This imaging tool has several image processing sub-tools which generate the json object. So i would like to pass json object to the managed bean directly from my javascript code. – thanili Dec 17 '13 at 10:11
So, what will you do/how do you plan to receive the json-data on server side? Just setting it as a String via getter/setter there and starting unserializing from there is how we did it in former projects. – L-Ray Dec 17 '13 at 10:16
Yeap something like that. Since it is my first time implementing such functionality, the first thing i am trying to achieve is just post my JSON object to java bean. Then i am either going to manipulate it there or i am going to post-process it before sending. But at this phase my point of interest is to just make an appropriate ajax post call and receive it via my back bean! Hope it is clear enough. – thanili Dec 17 '13 at 10:22
L-Ray, since i am newbie on that (JSON), i have a newbie question: by the way proposed (which i have implemented and i successfuly get the Json string) i guess that what i get is a de-serialized version of the actual Json object! Is that true? So in order to feed it back to the javascript later i will have to build again a Json object of the correct form. Is that true also? – thanili Jan 16 '14 at 11:43
Thanks! and a last one: Does any similar method exists (jQuery?) as sendJSONToServer for fetching a JSON object (deserialized) from server? Something like getJSONFormServer? Then in my back bean i should have a method returning a String to post the JSON string and a similar to element in my xhtml in order to get from backbean and post to javaascript container... – thanili Jan 16 '14 at 12:26
Usually you fill that kind of content into a `` field. But for details, I recommend opening up an own question (before we both have to talk about a consultant contract over here ;-) ) – L-Ray Jan 16 '14 at 12:35
Yeap! that's true and i really appreciate your help! :) i am going to open a new question ... – thanili Jan 16 '14 at 12:42
http://stackoverflow.com/questions/21163667/liferay-jsf-how-to-post-backbean-object-to-jsf-element-reffering-to-javascript – thanili Jan 16 '14 at 14:04

liferay, jsf. How to javascript json object save to database

1 Answers1