1

Google が提供するジオコーディング サービスを使用する JavaScript メソッドを使用して、数行の入力データを処理し、その処理されたデータをバッキング Bean に配置しようとしています。

ユーザーには、アドレスの詳細を入力するログイン ページが表示されます。送信ボタンがクリックされるとすぐに、JavaScript メソッドを呼び出して住所のジオコーディングを試みます。このメソッドは、ユーザーが入力したデータを読み取り、ジオコード サービスに送信します。このサービスが完了するまでに数ミリ秒かかります。完了するとすぐに、ログイン ページのバッキング Bean で見つかったデータを保存したいと考えています。

次の JavaScript 関数は、住所のジオコーディングに使用されます。

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

フォーム内に配置された非表示フィールドに値を格納します。これが最善の方法であるかどうかはわかりませんが、多くの例で見たことがあるだけです。このコンポーネントの値を設定すると、loginBean で対応するロケーション セッターが呼び出されると想定しています。

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

フォームの送信に使用されるボタンを使用して、これをすべて実現しようとしています。

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

私はこの構造について確信が持てないことを付け加えなければなりません。送信ボタンを押すと、おそらく ajax 呼び出しにチャンスさえ与えずに、次のページがすぐに読み込まれます。

これを達成しようとすると、いくつかの問題が発生しました。上記のコードを使用すると、JavaScript 関数は呼び出されません。簡単にするために、この関数をページ上部の script タグで宣言しました。2 番目の問題は、この値を JavaScript メソッドから loginBean に渡す最善の方法が不明であることです。フォーム内に隠しタグを配置し、その値タグを loginBean プロパティにリンクする必要がありますか? ajax コンポーネントにリスナーを追加する必要がありますか?

4

4 に答える 4

0

これ<p:ajax/>は不要であり、javascript関数が呼び出されない根本的な原因です。これを行うための迅速で汚い方法はです。を取り除き<p:ajax/>ます。<p:commandButton/>そのままのユースケースには十分です。

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

変数を渡すモードは機能しますが、特に効率的または安全ではありません。

別の方法として、primefacesのjavascript api 、、を使用addSubmitParamして、生成された値をリクエストパラメータとしてバッキングBeanに送信します

    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);
      }
    });
  }
于 2013-02-26T14:34:54.680 に答える
0

サービスの JavaScript コールバック関数は、フォームの送信をトリガーする必要があります (成功した場合)。このようにして、送信前に常に終了する時間があります。

于 2013-02-26T11:28:43.073 に答える
0

私はあなたがjavascriptに精通していると仮定しています。

トリックを試すことができます。

  1. コマンド ボタンと一緒に、表示されるシンプルな html ボタンと、div に隠されているコマンド ボタンを使用します。
  2. ユーザーが単純なhtmlボタンをクリックすると、地理位置情報ajax呼び出しが実行され、成功すると非表示フィールドを更新した後、javascriptを呼び出して非表示のコマンドボタンをプログラムでクリックします。

お役に立てれば。

于 2013-02-26T14:20:38.253 に答える
0

私は次のようなものを提案します：

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

このアプローチでは、変更可能な ID に依存する代わりに PF ウィジェットを使用します。

また、Google アドレス オートコンプリート API の使用を検討してください。そのための JSF コンポーネントがあります。

于 2013-02-26T18:18:25.960 に答える