0

次のような HTML があります。

<div>
<form>
  <input type="text" />
  <button class="sendForm" value="Send form" />
</form> 
</div>
<script>
// post the form with Jquery post
// register a callback that handles the response
</script>

私はこのタイプのフォームを、フォームを表示する JavaScript/JQuery オーバーレイと共によく使用します。これは、たとえばFancyBoxなどのプラグインで処理できます。Ajax コンテンツには Fancybox を使用しています。

また、このフォームを GWT ビューに埋め込んで使用したいと考えています。一部のモデル データを設定するためのサーバー ベースのマークアップ言語が内部にあるため、クライアント側で for を作成できないと仮定します。

このフォームを GWT で使用したい場合は、次のことを行う必要があります。GWT にフォーム リクエストの URL を伝え、RequestBuilder を使用してこのフォームの html コンテンツをクエリします。次に、GWT によって生成された div に挿入できます。ここまでは順調ですね。

問題：

ユーザーが送信ボタンを押すと、フォームの下のスクリプト内にある JQuery コールバックによって応答が処理されます。

  • GWT 内からこのコールバックにアクセスする方法はありますか?

  • JQuery send アクションを上書きする方法はありますか? コードは HTML であり、サーバーから取得されるため、これらの DOM 要素にアクセスするために ui-binder UiFields を内部に配置することはできません。

  • 送信されたフォームが GWT にアクセスできる場合は、応答を取得する必要があります。

JSNIでこれを達成する方法はありますか?

4

2 に答える 2

1

各質問への回答:

1Is there a way to access this callback from within GWT?実際には、コールバック自体を変更することはできません。GWT からできることは、任意の jquery メソッドを呼び出すことです。したがって、以前に追加されたハンドラーをバインド解除して、独自のハンドラーを設定できます。

  //NOTE: not wrapping code in $entry() to make a clearer code.
  private static native unbindForm() /*-{

    // remove all jQuery handlers added previously to my form
    $wnd.$("my_form_selector").off();

    // add a new handler for the submit event
    $wnd.$("my_form_selector").on("submit", function(event) {
       event.preventDefault();
       $wnd.$(this).post(url, ...).done(function(data) {

         // Use JSNI to call a GWT method
         @.com.example.MyClass.handleFormResponse(*)(data);
         // NOTE: that you can use a star instead of having to write parameter
         // types, when you only have one method signature in your class.
       });
    } 
  }-*/

  // handle the form response in GWT
  public static void handleFormResponse(String data) {
    // handle form response in GWT
  }

GWT でできるもう 1 つのことは、 でラップformし、FormPanel特定のウィジェット メソッドを使用してハンドラーを設定し、応答を読み取ることです。しかし、これはあなたが求めているものではないと思います。

2Is there a way to overwrite the JQuery send actionはい、JSNIを使用して、jQuery に以前に設定されたイベントのバインドを解除するように依頼します。＃1のコードを参照してください。

3 I need to get the response if the submitted form accessible to GWT. GWT の静的メソッドを呼び出すコードを jquery.post コールバックに含める必要があります (非静的メソッドを使用することもできますが、この方法の方が簡単です)。これもJSNIです。＃1のコードを参照してください。

4Is there a way how I can achieve this with JSNI?もちろん、JSNI は GWT から手書きの JavaScript を操作する方法です。

追記:

  • GWT は、非常に最適化された js コードを使用して RIA アプリを構築するように設計されています。それぞれに外部ライブラリを使用する理由があることは知っていますが、サードパーティの JavaScript をアプリに追加することは、gwt コンパイラremove death codeとoptimize output. GWT の構文と機能のような jquery が好きなら、gwt で完全に記述されている gwtquery を使用することをお勧めします。したがって、コンパイラには使用するコードだけが含まれます。

  • JSNI の記述は、デバッガーで処理するのが難しいミスの元です。そのため、gwt -exporterを使用して Java メソッド/クラスを設定するか、gwtqueryを使用して外部 JavaScript を呼び出すことをお勧めします。少し前に書いた記事を参照してください: Pass value from GWT to Javascript via JSNIおよびCalling GWT Java function from JavaScript

于 2013-10-29T07:25:45.817 に答える
0

Javascript => GWT および GWT => 両方を渡す JavaScript 値は、 JSNI を使用して実行できます。JSNIについて詳しくはこちらをご覧ください

于 2013-10-25T07:52:47.407 に答える