Geek Answers Handbook

Pass array from javascript to back bean

I have a problem with passing an array of location points from javascript to back bean. I am going to use this array of points to create a polygon. For this purpose I have to get an array from javascript for my back bean in order to store them in the database.

Here is my xhtml snippet:

<head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <title>Drawing Tools</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> #map, html, body { padding: 0; margin: 0; height: 400px; width: 400px; } #panel { width: 200px; font-family: Arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #color-palette { clear: both; } .color-button { width: 14px; height: 14px; font-size: 0; margin: 2px; float: left; cursor: pointer; } #delete-button { margin-top: 5px; } </style> <script type="text/javascript"> var drawingManager; var selectedShape; var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; var selectedColor; var colorButtons = {}; var polyOptions; function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); //selectColor(shape.get('fillColor') || shape.get('strokeColor')); } function deleteSelectedShape() { if (selectedShape) { selectedShape.setMap(null); } } function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(40.344, 39.048), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, zoomControl: true }); polyOptions = new google.maps.Polygon({ strokeColor: '#ff0000', strokeOpacity: 0.8, strokeWeight: 0, fillOpacity: 0.45, fillColor: '#ff0000', editable: false, draggable: true }); polyOptions.setMap(map); google.maps.event.addListener(map, 'click', addPoint); } function addPoint(e) { var vertices = polyOptions.getPath(); vertices.push(e.latLng); document.getElementById('verticeForm:sth').value= vertices; } google.maps.event.addDomListener(window, 'load', initialize); </script> </meta></meta> </head> <body> <div id="map"></div> <p:commandButton onclick="o.show();" value="Show"> <p:dialog widgetVar="o" > <h:form id="verticeForm"> <h:outputLabel id="input"> <h:inputHidden id="sth" value="#{projectsController.list}" /> </h:outputLabel> </h:form> <h:outputText value="#{projectsController.asd}" /> </p:dialog> </p:commandButton> </body>

And here is my bean rollback:

  private String sth; public String getSth() { return sth; } public void setSth(String sth) { this.sth = sth; } private List<String> list = new ArrayList<String>(); public List<String> getList() { return list; } public void setList(List<String> list) { this.list = list; } private String asd; public String getAsd() { if(list.size()>0){ asd = list.get(0); System.out.println(asd); } return asd; } public void setAsd(String asd) { this.asd = asd; } }

Basically, how can I send an array of vertices (which has points on gmap) to my bean back in JSF?

+1
source share
1 answer

Add this array (JSON will be better) as the value of the field of your managed bean, and then set it to <h:inputHidden/> , which you can execute, and execute it via <f:ajax/> to send and receive data

 <h:inputHidden id="verticesHiddenContainer" value="#{yourBean.vertices}" />

Then your bean should have both a setter and a getter for it. If you decide to send it as JSON, I suggest you use Gson (since you are already on Google sites) to analyze it.

The procedure will be something like this:

First of all, you create vertices JSON that combines the data you want to send to the server, then you set it to hidden input. I use jQuery, but if you use simple javascript, you have to do the same, but use document#getElementById instead:

 var vertices = // You set your JSON here. $("input[id='verticesHiddenContainer'").val(vertices);

Then execute the hidden component with f:ajax and commandLink , for example:

 <h:commandLink value="Send data to server" action="#{yourBean.process}" > <f:ajax execute="verticesHiddenContainer" /> </h:commandLink>

Now the link activates the ajax request, which updates the field in the bean with the input current value. Remember that as you go through JSON, you will have to parse it. Pretty simple if you use Gson:

 public void setVertices(String verticesString) { //Since I don't know what kind of structure you use, I suposse //something like [[x,y]]. It can be more complex, but the //idea would be the same. You parse the string here. }

SO already has great answers about serializing and parsing JSON. I suggest you take a look at them if you are in doubt:

+3
source

More articles:


All Articles