pass array from javascript to back bean

Question

I have a problem about passing array of location points from javascript to back bean. I am going to use this array of points to create a polygon. For that aim, I should get the array from javascript to my back bean to save them on 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 back-bean snippet:

    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 vertices array (which has the points on the gmap) to my back bean in JSF?

Can you point which exact variable do you want to pass and in which point (action)? — partlov, Mar 11 '13 at 14:42
Actually I would like to send vertices value in the function of addPoint in JS, to list object in my back bean.So that I can store it to save. — Ali Yucel Akgul, Mar 11 '13 at 14:45
You could consider using Primefaces' p:remoteCommand for that reason: first update hidden input via JavaScript and then call remote command to process it on server as a string. — skuntsel, Mar 11 '13 at 14:51
Your structure of code is somehow strange. You have `p:dialog` inside `p:commandButton`!? — partlov, Mar 11 '13 at 14:53
@partlov That's for sure either a BIG typo, or a BIG misunderstanding :) But the question concerns a different thing! — skuntsel, Mar 11 '13 at 14:56

score 3 · Accepted Answer · edited May 23 '17 at 12:32

Add that array (a JSON would be better) as the value of a field of your managed bean, then set it to an <h:inputHidden/> you can execute and render it through <f:ajax/> to send and receive the data:

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

Then, your bean should have both a setter and a getter for it. If you choose to send it as a JSON I suggest you use Gson (since you're on Google grounds already) to parse it.

The procedure would be something like this:

First of all, you generate the vertices JSON that cointains the data you want to send to the server, then you set it to the hidden input. I'm using jQuery but if you use plain javascript you will have to do the same but using document#getElementById instead:

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

Then, execute the hidden component using f:ajax and a commandLink, like this:

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

The link will now trigger an ajax request that updates the field in the bean with the input's current value. Remember, that since you're passing a JSON you'll have to parse it. Quite simple if you're using 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.
}

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

JSON to HashMap
String to JSON array (If your JSON structure is not that complex)

Could you explain it more? – Ali Yucel Akgul Mar 11 '13 at 14:57 — Ali Yucel Akgul, Mar 11 '13 at 14:57

pass array from javascript to back bean

1 Answers1

Linked