How save dynamically result from Javascript into Bean in JSF?

Question

I'm trying to use the autocomplete map from Google Maps, my whole code works :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>

    <title>Places Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"></meta>
    <meta charset="utf-8"></meta>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"></link>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map-canvas, #map_canvas {
            height: 100%;
        }

        @media print {
            html, body {
                height: auto;
            }

            #map_canvas {
                height: 650px;
            }
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }

        input {
            border: 1px solid  rgba(0, 0, 0, 0.5);
        }
        input.notfound {
            border: 2px solid  rgba(255, 0, 0, 0.4);
        }
    </style>

    <script>
    // <![CDATA[
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(-33.8688, 151.2195),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

          var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.bindTo('bounds', map);

          var infowindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
            map: map
          });

          google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            input.className = '';
            var place = autocomplete.getPlace();
            if (!place.geometry) {
              // Inform the user that the place was not found and return.
              input.className = 'notfound';
              return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
            }
            marker.setIcon(/** @type {google.maps.Icon} */({
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(35, 35)
            }));
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            if (place.address_components) {
              address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
              ].join(' ');
            }

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
          });

          // Sets a listener on a radio button to change the filter type on Places
          // Autocomplete.
          function setupClickListener(id, types) {
            var radioButton = document.getElementById(id);
            google.maps.event.addDomListener(radioButton, 'click', function() {
              autocomplete.setTypes(types);
            });
          }

          setupClickListener('changetype-all', []);
          setupClickListener('changetype-establishment', ['establishment']);
          setupClickListener('changetype-geocode', ['geocode']);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    // ]]>
    </script>
</h:head>

<h:body>
    <div id="panel" style="margin-left: -260px">
        <h:inputText id="searchTextField" value="#{propertyC.property.street}" size="100" >
            <f:ajax listener="#{propertyC.showAddress}" />
        </h:inputText>
    </div>

    <div id="map-canvas"></div>

</h:body>
</html>

But I want to save, the result of this autocomplete operation into my bean attribute propertyC.property.street.

How can I do that ?

actually, I don't know which variable contains the new value selected from the autocomplete list. — Valter Silva
– Valter Silva, Commented May 5, 2013 at 15:36
In your situation: google.maps.event.addListener(autocomplete, 'place_changed' ; .... var place_dest=autocomplete.getPlace(); var vlocation = place_dest.geometry.location; // value — Rong Nguyen
– Rong Nguyen, Commented May 5, 2013 at 15:41

BalusC · Accepted Answer · 2013-05-06 11:45:37Z

2

The input component needs to go inside a form component and when changing the value by JS means and relying on the change event, then you should also manually trigger the event by onchange() function call on the HTML DOM element.

Thus so, inside a form:

<h:form id="searchForm">
    <h:inputText id="searchTextField" value="#{propertyC.property.street}" size="100">
        <f:ajax listener="#{propertyC.showAddress}" />
    </h:inputText>
</h:form>

And fix the JS code accordingly to include the form ID and to trigger the change event:

var input = document.getElementById("searchForm:searchTextField");
input.value = newvalue;
input.onchange();

answered May 6, 2013 at 11:45

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valter Silva Over a year ago

BalusC, for some reason if I put the input inside the form only, as you suggested, the map doesn't work anymore, only outside the form it does work, but I can't get the selected value.

Valter Silva Over a year ago

I take care about the id in the form, replacing the prefix as you showned but nothing so far.

Adarsh · Accepted Answer · 2013-05-05 18:36:35Z

-1

Try

document.getElementById(panel:searchTextField).value = <value you need to set>.

answered May 5, 2013 at 18:36

Adarsh

3,6592 gold badges23 silver badges38 bronze badges

1 Comment

BalusC Over a year ago

The <div> is not a NamingContainer component, let alone a JSF component. It's just basic HTML which basically plain template text to JSF.

Collectives™ on Stack Overflow

How save dynamically result from Javascript into Bean in JSF?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related