[Wicket-ja-user 214] Re: Ajaxでのマウスオーバーイベント処理について

Back to archive index

shinya okino shiny****@gmail*****
2008年 8月 20日 (水) 02:30:22 JST


沖野です。
単純に1回だけAjaxリクエストが発生すれば良いのでしたら、
AjaxEventBehaviorをComponentから削除してしまえば良いと思います。

元のコードだと
final Image buttonImage= new Image( "image", new ResourceReference(
MyPanel.class, "normal.PNG" ) );
buttonImage.setOutputMarkupId( true );
buttonImage.add( new AjaxEventBehavior( "onmouseover" ) {

    @Override
    protected void onEvent( AjaxRequestTarget arg0 ) {

        /* イメージを変更する */
        buttonImage.setImageResourceReference( new ResourceReference(
MyPanel.class, "over.PNG" ) );

        //自身をコンポーネントから削除する
        buttonImage.remove(this);

        /* コンポーネントを再描画対象に指定する */
        arg0.addComponent( closeButtonImage );
    }
}

こうすれば置き換わった画像でAjaxリクエストは発生しなくなります。

再度マウスを載せたときにもAjaxリクエストを発生させたい場合は
javascriptで画像urlだけ書き換えるようにしないと駄目そうです。

final Image buttonImage= new Image( "image", new ResourceReference(
MyPanel.class, "normal.PNG" ) );
buttonImage.setOutputMarkupId( true );
buttonImage.add( new AjaxEventBehavior( "onmouseover" ) {

    @Override
    protected void onEvent( AjaxRequestTarget arg0 ) {

        // 画像urlを取得
        ResourceReference reference = new ResourceReference(
MyPanel.class, "over.PNG" ) ;
        String src = urlFor(reference).toString();

        //javascriptで画像urlを書き換える
        arg0.appendJavascript("Wicket.$('" +
buttonImage.getMarkupId()+ "').src='" + src + "';");
    }
}

これだったらAjaxEventBehaviorを使わないでjavascriptを直接Imageコンポーネントに追加した方が良さそうな気もしますが…。

自分で試した限りではうまく動きましたが、いかがでしょうか。


2008/08/18 12:32 古川 烈 <r_f_315****@hotma*****>:
> 古川です、
> Ajaxでのマウスオーバーイベントで悩んでおります。
>
> やりたいことはImgタグの上にマウスカーソルが乗ったときに、
> 画像を切り替えたいということです。
>
> 以下のようなコードを書いたのですが、
>
> final Image buttonImage= new Image( "image", new ResourceReference(
> MyPanel.class, "normal.PNG" ) );
>
> buttonImage.add( new AjaxEventBehavior( "onmouseover" ) {
>
>     @Override
>     protected void onEvent( AjaxRequestTarget arg0 ) {
>
>         /* イメージを変更する */
>         buttonImage.setImageResourceReference( new ResourceReference(
> MyPanel.class, "over.PNG" ) );
>
>         /* Ajax用のIDを出力指定する */
>         buttonImage.setOutputMarkupId( true );
>
>         /* コンポーネントを再描画対象に指定する */
>         arg0.addComponent( closeButtonImage );
>     }
> }
>
> マウスを画像に乗せたときにマウスオーバーイベントが延々発生します。
> Wicketの仕様上、指定されたIDのノードがDOMツリー上でごっそり置き換わるはずで、
> 置き換わったノードからすれば、マウスがまだ乗っていないことになっているから再度イベントが発生するのでしょうか??
>
> マウスオーバーイベントを一回だけ発生させるのが目標です。
>
> どなたか解決方法をご存知の方がいらっしゃれば、ご教示していただけませんでしょうか?
> ________________________________
> あなたも総裁候補に?世界に一つだけのオリジナルブログパーツを作ろう! MSN相談箱の新ブログパーツ "出馬ナー"
> _______________________________________________
> Wicket-ja-user mailing list
> Wicke****@lists*****
> http://lists.sourceforge.jp/mailman/listinfo/wicket-ja-user
>
>



-- 
沖野信也
shiny****@gmail*****




Wicket-ja-user メーリングリストの案内
Back to archive index