Die übergabe von Formulardaten über JavaScript-Code in eine backing-bean mit JSF und primefaces

Ich versuche zu verarbeiten, ein paar Zeilen von input-Daten mit Hilfe einer JavaScript-Methode beschäftigt, dass ein von Google zur Verfügung gestellte geocoding-Dienst, und Ort, die verarbeiteten Daten in einer backing bean.

Benutzern eine login-Seite, in dem Sie geben Sie Ihre Adressdaten ein. Sobald der submit-button geklickt wird, versuche ich geocode Ihre Adresse durch den Aufruf einer JavaScript-Methode. Diese Methode liest die eingegebenen Daten des Nutzers und sendet Sie an die geocode-service. Dieser service erfolgt in wenigen Millisekunden abgeschlossen ist. Sobald es abgeschlossen ist möchte ich die Daten speichern, die Sie gefunden hat in der backing-bean von der login-Seite.

Die folgende JavaScript-Funktion wird verwendet, um die Geokodierung der Adresse.

    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);
          }
        });
      }

Er speichert seinen Wert in ein verstecktes Feld in das Formular. Ich weiß nicht, ob oder nicht, dies ist die beste Sache zu tun, es ist einfach etwas, was ich gesehen habe, in vielen Beispielen. Ich nehme an, der Wert dieser Komponente aufrufen, die entsprechende Position Einrichter in der loginBean.

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

Ich versuche, dies alles geschieht mit dem button zum Absenden des Formulars.

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

Ich muss hinzufügen, dass ich bin nicht sicher, von diesem Bau. Drücken Sie die Schaltfläche senden wahrscheinlich lädt die nächste Seite sofort, sogar ohne Angabe der ajax-Aufruf eine chance.

Versucht zu erreichen, dies brachte mir einige Probleme.
Mit dem obigen code wird die JavaScript-Funktion wird nie aufgerufen. Aus Gründen der Einfachheit habe ich erklärt, diese Funktion an der Spitze der Seite in einem script-tag.
Das zweite problem ist, dass ist es mir unklar, was ist der beste Ansatz, diesen Wert aus einer JavaScript-Methode, um die loginBean. Soll ich einige versteckte Tags in das Formular ein und verknüpfen es mit dem Wert-tag, um eine Eigenschaft loginBean? Sollte ich einen listener hinzufügen, um die ajax-Komponente?

Ist dieser Tippfehler oder Sie haben wirklich onstart="codeAddress"? Wenn es ist, ersetzen Sie diese mit onstart="codeAddress()".
Sorry, das war tatsächlich ein Tippfehler.
wenn Ihr js nicht aufgerufen wird, es bedeutet, dass Sie noch nicht enthalten, es proprely in Ihre Seite ein <h:outputScript name="js/myFile.js" target="head" /> platzieren Sie die js-Datei in WebContent\resource Ordner
OP sagt, dass sein js ist definiert in der Ansicht

InformationsquelleAutor malebox | 2013-02-26

0

Den JavaScript-callback-Funktion der service löst das Formular Absenden (auf Erfolg). Auf diese Weise würde es immer Zeit haben, zu beenden, bevor das senden.

InformationsquelleAutor Christophe Roussy
0

Ich gehe davon aus, dass Sie sich gut mit javascript.

Können Sie versuchen, mit einem trick.
1. Zusammen mit Befehl-Taste verwenden Sie einfache html-Taste, die sichtbar wären und den Befehl Schaltfläche versteckt in einem div.
2. Wenn Benutzer auf die html-Schaltfläche führen Sie Ihre geolocation-ajax-call, bei Erfolg und nach der Aktualisierung verstecktes Feld, rufen Sie einfach javascript ein, um programmatisch auf die versteckten Befehl.
Hoffe, das hilft.

InformationsquelleAutor baba.kabira

Den <p:ajax/> ist unnötig und ist die Ursache, warum die javascript-Funktion nicht aufgerufen. Eine schnelle und schmutzige Art und Weise dies geschehen ist. Loswerden <p:ajax/>. <p:commandButton/> ist ausreichend für Ihre Nutzung Fall ist.

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

Ihren Modus der übergabe der variable funktioniert, ist aber nicht besonders effizient oder sicher.

Alternative primefaces verwenden der javascript-api addSubmitParam zu schicken, um die generierten Werte der backing-bean als 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);
      }
    });
  }

InformationsquelleAutor kolossus

Ich würde vorschlagen, etwas wie:

<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);
      }
    });
  }

Dieser Ansatz nutzt PF widgets anstatt sich auf IDs, die kann sich ändern.

Überlegen Sie auch, mit Google-autocomplete-API. Es ist eine JSF-Komponente für das.

InformationsquelleAutor rootkit

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.