1

I have tried various methods of getting the mouse coordinates into the backing bean when a user clicks on an image. I can get the coordinates in the javascript, it then calls the ajax listener, but the parameters are not in the request.

my js:

if (!cis) var cis = {}
if (!cis.sarwinds) {
  var focusLostTimeout
  cis.sarwinds = {   
    errorHandler: function(data) { 
      alert("Error occurred during Ajax call: " + data.description) 

    },

    updateZoomValues: function(input, event) { 



       jsf.ajax.addOnError(cis.sarwinds.errorHandler)
          var offset = jQuery(input).offset();       

          jsf.ajax.request(input, event, { 
             render: "imagePan2 message",
             x: event.pageX - offset.left,
             y: event.pageY - offset.top
          })
    },

    getGraphicImageId: function(input) {
      var clientId = new String(input.name)
      var lastIndex = clientId.lastIndexOf(":")
      return clientId.substring(0, lastIndex) + ":imagePan2"
    }
  } 
}

My jsf page element:

    <h:graphicImage id="imagePan2" library="images" styleClass="wind_map" name="testImage.jpg" style="#{SarWindsImagesBean.imageStyle('testImage.jpg')}">
           <f:ajax event="click" onevent="cis.sarwinds.updateZoomValues(this, event)" listener="#{SarWindsImagesBean.zoomInClick}" render="imagePan2 message"/>
    </h:graphicImage>

My Backing bean:

    public void zoomInClick(AjaxBehaviorEvent event) {
    double width;
    double height;
    double top;
    double left;
    double mouseX;
    double mouseY;
    String fileName = "testImage";


    Map<String, String> reqParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    mouseX = Double.parseDouble(reqParams.get("x"));
    mouseY = Double.parseDouble(reqParams.get("y"));


    width = imageItems.get(fileName).getImageWidth() * 1.1;
    height = imageItems.get(fileName).getImageHeight() * 1.1;

    // We need the mouse position on the image here, and we need to calculate
    top = mouseY - ((mouseY - imageItems.get(fileName).getImageTop()) * 1.1);
    left = mouseX - ((mouseX - imageItems.get(fileName).getImageLeft()) * 1.1);

    if (this.imageLock == false){

        imageItems.put(fileName, new SarWindImageItem(width, height, top, left));
    } else {
        Iterator<String> it = imageItems.keySet().iterator();
        while (it.hasNext()) {

                String key = (String)it.next();

                imageItems.put(key, new SarWindImageItem(width, height, top, left));
            }
    }
}

The reqParams are empty.

Dan

4

2 に答える 2

0

<input type="image">通常、このタイプのケースで使用できます。90年代からフォーム提出とともにコーディネートを通過してきました。JSのトリックは必要ありません。

JSを介してこの値を取得する必要がある場合は、次の解決策があります。

javascriptを介して<inputtype='image'>からクリック座標を取得します

于 2012-10-31T15:13:43.813 に答える
0

あなたの使い方jsf.ajax.request()は完全に正しいわけではありません。はすでに 1 つを作成していますが、その中に別の<f:ajax>1 つをネストしています(は、リクエストが送信される前、レスポンスが到着した後、HTML DOM が更新された後に 3 回呼び出されることに注意してください)。これは正しくありません。oneventonevent

技術的には、代わりに属性を呼び出して、完全に削除する必要がjsf.ajax.request()あります。ただし、これには基本的に、適切なモデル値を適切に更新できるように、メソッドでリクエストパラメーター収集ジョブを実行する自作に置き換える必要があります。onclick<f:ajax><h:graphicImage>UIComponentdecode()

jsf.ajax.request()スタンドアロンの使用を忘れてください。UIComponentで目的の後処理を実行するカスタムを実際に開発している場合にのみ使用してくださいdecode()。

プレーンなバニラ HTML は<input type="image" name="foo">、座標がfoo.xおよびfoo.yパラメータとして送信される for this を提供します。これは を使用する JSF で機能し<h:commandButton image="some.png">ますが、 を使用している場合、これらの特別なパラメーターは送信されません<f:ajax>。だから、これを忘れてください。

最善の策は、非表示の入力値を目的の座標で設定し、それらの非表示の入力をマネージド Bean プロパティに通常の方法でバインドすることです。

例えば

<h:form>
    <h:graphicImage id="image" name="image1.png">
        <f:ajax event="click" execute="x y" listener="#{bean.listener}" />
    </h:graphicImage>
    <h:inputHidden id="x" value="#{bean.x}" />
    <h:inputHidden id="y" value="#{bean.y}" />
</h:form>

<h:outputScript>
    jQuery("img[id$=':image']").on("mousedown", function(event) {
        var $form = jQuery(this).closest("form");
        $form.find("input[id$=':x']").val(event.pageX);
        $form.find("input[id$=':y']").val(event.pageY);
    });
</h:outputScript>

(注: jQuery.on()1.7 以降でのみ使用可能です。古いバージョンを使用している場合は、jQuery.bind()代わりに使用してください)

と

@ManagedBean
@RequestScoped
public class Bean {

    private Integer x;
    private Integer y;

    public void listener() {
        System.out.println(x + ", " + y);
    }

    // ...
}

マウスの位置を取得する間違った方法も修正したことに注意してください。マウスポインターの位置ではなく、画像要素自体の位置を返しました。

于 2012-10-31T16:02:53.077 に答える