使用JSF和primefaces通过JavaScript将表单数据传递到支持bean

Question

I am trying to process a few lines of input data, using a JavaScript method that employs a Google provided geocoding service, and place that processed data into a backing bean.

Users are presented with a login page in which they enter their address details. As soon as the submit button is clicked, I try to geocode their address by calling a JavaScript method. This method reads the data entered by the user and sends it to the geocode service. This service takes a few miliseconds to complete. As soon as it completes I wish to store the data it has found in the backing bean of the login page.

The following JavaScript function is used to geocode the address.

    function codeAddress() {
        alert('coding address');
        geocoder = new google.maps.Geocoder();
        postcode = document.getElementById('loginForm:address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              alert('setting location: '+results[0].geometry.location);
              document.getElementById('loginForm:location').value = results[0].geometry.location;
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

It stores its value in a hidden field placed inside the form. I do not know whether or not this is the best thing to do, it's simply something I have seen in many examples. I assume setting the value of this component will call the corresponding location setter in the loginBean.

    <h:inputHidden id="location" value="#{loginBean.location}" />

I am trying to make this all happen using the button used to submit the form.

        <p:commandButton id="submitButton" value="login"
            action="#{loginBean.doLogin}"
            styleClass="blue login" update="growl">
                <p:ajax event="click" onstart="codeAddress()" />
        </p:commandButton>

I do have to add that I am unsure of this construction. Pressing the submit button probably loads the next page right away, without even giving the ajax call a chance.

Trying to accomplish this has presented me with several problems. Using the code above, the JavaScript function is never called. For sake of simplicity I have declared this function at the top of the page in a script tag. The second problem is that it is unclear to me what is the best approach to pass this value from a JavaScript method to the loginBean. Should I place some hidden tag inside the form and link it's value tag to a loginBean property? Should I add a listener to the ajax component?

Answer 1

The JavaScript callback function of the service should trigger the form submit (on success). This way it would always have time to finish before the submit.

Answer 2

I am assuming you are good with javascript.

You can try a trick.

1. Along with command button use simple html button which would be visible and command button hidden in a div.
2. When user clicks the simple html button perform your geolocation ajax call, on success and after updating hidden field, simply call javascript to programmatically click the hidden command button.

Hope this helps.

Answer 3

The <p:ajax/> is unnecessary and is the root cause why the javascript function isn't called. A quick and dirty way to get this done is. Get rid of <p:ajax/> . <p:commandButton/> is sufficient for your use case as is.

    <p:commandButton id="submitButton" onclick="codeAddress();" value="login" action="#{loginBean.doLogin}" styleClass="blue login" update="growl"/>

Your mode of passing the variable will work, but isn't particularly efficient or secure.

An alternative use primefaces' javascript api, addSubmitParam , to send the generated values to the backing bean as a request param

    function codeAddress() {
    alert('coding address');
    geocoder = new google.maps.Geocoder();
    postcode = document.getElementById('loginForm:address').value;

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          alert('setting location: '+results[0].geometry.location);
         PrimeFaces.addSubmitParam(results[0].geometry.location); //addSubmitParam sends a request parameter
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

Answer 4

I would suggest something like:

<h:form>
<p:inputText widgetVar="widget_postcode" value="#{backingBean.address}"/>
<p:inputText style="display:none;" widgetVar="widget_geocode" value="#{backingBean.geocode}"/>
<p:commandButton id="submitButton" value="login" type="button" 
            styleClass="blue login" onclick="codeAddress();">
        </p:commandButton>
<p:remoteCommand name="sendData" process="@form" update="growl"/>
</h:form>



function codeAddress() {
    alert('coding address');
    geocoder = new google.maps.Geocoder();
    postcode = widget_postcode.getJQ().val();

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          alert('setting location: '+results[0].geometry.location);
         widget_geocode.getJQ().val(results[0].geometry.location);
         sendData();
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

This approach uses PF widgets instead of relying on IDs which can change.

Also, consider using Google address autocomplete API. There is a JSF component for that.