如何在點擊圖像時將鼠標座標傳遞給後臺bean

Question

當用戶單擊圖像時，我嘗試了將鼠標座標放入後臺bean的各種方法。我可以在javascript中獲取座標，然後調用ajax監聽器，但參數不在請求中。

我的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" 
    } 
    } 
} 

我的JSF頁面元素：

<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> 

我支持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)); 
      } 
    } 
} 

的reqParams是空的。

丹

Answer 1

你怎麼用了jsf.ajax.request()的方式是不完全正確。 <f:ajax>已經創建了一個，但是你在嵌套另一個一個在其onevent（注意onevent被稱爲三次;在發送請求之前，在響應到達之後並且在HTML DOM被更新之後）。這是不對的。

從技術上講，您應該在onclick屬性中調用jsf.ajax.request()，而不是完全刪除<f:ajax>。但是，這基本上需要用自制的UIComponent代替<h:graphicImage>，其在decode()方法中執行請求參數收集作業，以便適當地更新適當的模型值。

忘記使用jsf.ajax.request()獨立。只有在您開發自定義UIComponent時才應使用它，其中您在decode()中執行所需的後處理。

普通香草HTML爲此提供了一個<input type="image" name="foo">，其上的座標將作爲foo.x和foo.y參數發送。這可以在JSF中使用<h:commandButton image="some.png">，但是，當您使用<f:ajax>時，這些特殊參數不會被髮送。所以忘記這一點。

最好的辦法是用所需的座標設置隱藏的輸入值，然後將通常的方式將這些隱藏的輸入綁定到託管bean屬性。

E.g.

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

    // ... 
} 

請注意，我也定你獲得鼠標位置的不正確的方法。你只是返回了圖像元素本身的位置，而不是鼠標指針的位置。

Answer 2

<input type="image">通常可以在這種類型的情況下使用。自90年代以來，它已經通過了表格提交的座標。不需要JS欺騙。

如果你找到需要獲取通過JS這個值，這裏有一個解決方案：

get click coordinates from <input type='image'> via javascript