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>

我的支持豆：

    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

<input type="image">通常可用于此类案例。自90年代以来，它已经通过了坐标以及表格提交。不需要JS技巧。

如果您确实需要通过JS获取此值，这是一个解决方案：

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

Answer 2

您使用jsf.ajax.request()的方式并不完全正确。 <f:ajax>已经创建了一个，但是你在其onevent中嵌套另一个（注意onevent被称为三次;在请求之前在响应到达之后和HTML DOM更新之后发送。这不对。

从技术上讲，您应该在jsf.ajax.request()属性中调用onclick，然后完全删除<f:ajax>。但是，这基本上需要将<h:graphicImage>替换为自制UIComponent，它在decode()方法中执行请求参数收集作业，以便可以正确更新相应的模型值。

忘记使用jsf.ajax.request()独立版。它只应在您真正开发自定义UIComponent时使用，其中您在decode()中执行所需的后处理。

普通的vanilla 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);
    }

    // ...
}

请注意，我还修正了获取鼠标位置的错误方法。您刚刚返回了图像元素本身的位置，而不是鼠标指针在其上的位置。

单击图像时如何将鼠标坐标传递给支持bean

2 个答案: