JavaScriptからWicketコードを呼び出す

Question

私はWicketのJavascriptからいくつかのJavaコードを呼び出そうとしています。

これは私のJavaコードです：

public ShowUnternehmen() { 

    add(new AbstractDefaultAjaxBehavior() { 
     @Override 
     protected void respond(AjaxRequestTarget ajaxRequestTarget) { 
      System.out.println("respond"); 
     } 

     @Override 
     public void renderHead(Component component, IHeaderResponse response) { 
      super.renderHead(component, response); 
      System.out.println(getCallbackUrl()); 
     } 
    }); 

}

そして、これは、Javascriptコードです：

<wicket:head> 
    <script type="text/javascript" > 
     $(function() { 
      $.contextMenu({ 
       selector: '.context-menu-one', 
       callback: function(key, options) { 
        var m = "clicked: " + key; 
        alert("BLA"); 
        Wicket.Ajax.get({"u":"./com.emg.panels.unternehmen.ShowUnternehmen?1-1.IBehaviorListener.0-"}) 
       }, 
       items: { 
        "edit": {name: "Editieren", icon: "edit"}, 
        "quit": {name: "Abbrechen", icon: function(){ 
         return 'context-menu-icon context-menu-icon-quit'; 
        }} 
       } 
      }); 

      $('.context-menu-one').on('click', function(e){ 
       console.log('clicked', this); 
      }) 
     }); 
    </script> 
</wicket:head> 

しかし、応答方法が実行されることはありません。私は他の例を見ていたが、すべてが混乱しているようだ。

私はrenderHead方法

Answer 1

あなたは良い方法です。 wicketがコールバック関数をページにレンダリングするようにすると、よりリラブルになります。次の2つの例は、その方法を示しています。

A）グローバルコールバック関数をレンダリングします。欠点は、コールバックエンドポイントが1つしかないことです。

（1）以下のような振る舞いを作成します。

public class CallFromJavascriptBehavior extends AbstractDefaultAjaxBehavior { 
@Override 
protected void respond(AjaxRequestTarget target) { 
    final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName"); 
    System.out.println(String.format("Hello %s", parameterValue.toString())); 
} 

@Override 
public void renderHead(Component component, IHeaderResponse response) { 
    super.renderHead(component, response); 
    response.render(JavaScriptHeaderItem.forScript(String.format("nameOfFunction=%s", getCallbackFunction(CallbackParameter.explicit("yourName"))), "CallFromJavascriptBehavior")); 
}} 

（2）あなたの改札ページに、この動作を追加します。

（3）これで、nameOfFunction（ 'Markus'）を呼び出すことができます。あなたのjavascriptから。

B）ページ上のコンポーネントのインスタンスごとに初期化関数を呼び出します。

（1）（2）初期化関数を呼び出し、必要なセレクタとコールバック関数を渡し、次のような振る舞いを作成し、あなたのページ

<script> 
    function initMyComponent(selector, callback){ 
     $(selector).click(function(){ 
      callback("Markus"); 
     }); 
    } 
</script> 

に初期化機能を追加します。

public class ComponentBehavior extends AbstractDefaultAjaxBehavior{ 
@Override 
protected void respond(AjaxRequestTarget target) { 
    final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName"); 
    System.out.println(String.format("Hello %s", parameterValue.toString())); 
} 

@Override 
public void renderHead(Component component, IHeaderResponse response) { 
    super.renderHead(component, response); 
    response.render(OnDomReadyHeaderItem.forScript(String.format("initMyComponent('#%s', %s)", component.getMarkupId(), getCallbackFunction(CallbackParameter.explicit("yourName"))))); 
}} 

（3）ウィケットコンポーネントにビヘイビアを追加します。

応答メソッドが呼び出されなかった場合、これにはさまざまな理由があります。まずコンソール（ideとブラウザ）を確認してください。

Answer 2

からこのURLを得たJavaScriptからのJava /改札コードをトリガーする簡単な方法は、フックなどのイベントの動作と隠し入力を使用することです。

隠された入力は、「見えない」フォームの要素ですが、このような場合には非常に便利です。

セットアップWicketのコンポーネント

まず、するSystem.out.printlnのかもしれないので、私は一例として、そのJavascriptのアラートを使用し、当社のWicketのページ上のHiddenFieldを追加し、それにAjaxEventBehavior

final HiddenField<Void> hiddenInput = new HiddenField<>("hiddenInput"); 
add(hiddenInput); 
hiddenInput.add(new AjaxEventBehavior("change") { 

    @Override 
    protected void onEvent(final AjaxRequestTarget target) { 
     // Execute any code you like and respond with an ajax response 
     target.appendJavaScript("alert('Hidden Input Change Event Behaviour!');"); 
     } 
}); 

を与えます一部のロガーシステムでは無視されます。私はchangeイベントも使用しましたが、他のイベントもおそらくうまくいくでしょう。

対応するHTMLマークアップ：

<input type="hidden" wicket:id="hiddenInput" id="hiddenInput1"/> 

注： Iは入力を固定ID値を与えました。 IDはすべてのページで一意でなければならないので、これをWicketパネルに入れてページに複数回追加することはできません。あなたはwicketにID（setOutputMarkupId(true)）を作成させてから、idをjavascriptに渡す方法を見つけなければなりません。しかし、この非常に簡単な例では、これで十分です。 Javascriptを

と

トリガは今、あなたがする必要があるすべては、あなたの隠された入力に変更イベントをトリガし、それはあなたがのonEventメソッドで定義されたコードを実行しますです。 jQueryとIDで

、これはめちゃめちゃ簡単です：

<script> 
    $('#hiddenInput1').change(); 
</script> 

は、この単純な例では、アイデアを得るために、あなたのお役に立てば幸いです。私はすでに私のコメントでは、これはあなたのjavascript呼び出しが応答を気にする必要がなく、あなたがJavaScriptからwicketコードをトリガーできるようにしたいときに、これは本当に便利だと言っています。