1

当用户单击图像时，我尝试了各种将鼠标坐标放入支持 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 为空。

担

4

2 回答 2

0

<input type="image">通常可以在这种情况下使用。自上世纪 90 年代以来，它就随着表单提交传递了坐标。不需要 JS 诡计。

如果您确实发现需要通过 JS 获取这些值，这里有一个解决方案：

通过 javascript 从 <input type='image'> 获取点击坐标

于 2012-10-31T15:13:43.813 回答
0

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

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

忘记使用jsf.ajax.request()独立的。仅当您真正开发自定义时才应使用它，UIComponent其中您在decode().

普通的普通 HTML<input type="image" name="foo">为此提供了一个坐标将作为参数发送foo.x的方法。foo.y这在 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 回答