All geek questions in one place

How to reference 'this' to javascript call in JSF component?

    <h:commandLink id="#{id}" value="#{value}" action="#{actionBean.getAction}" onclick="alert(this);"/>

In the previous simplified example, the 'this' keyword used in the Javascript function will not refer to the generated HREF element, but will refer to the global window because JSF generates the following (simplified) code:

<a onclick="var a=function(){alert(this)};var b=function(){if(typeof jsfcljs == 'function'){jsfcljs(document.forms['mainForm'],'generatedId,action,action','');}return false};return (a()==false) ? false : b();" href="#" id="generatedId">text</a>

So, since JSF wraps the user installed onclick in a function, this will point to a global window. I do not have access to the element identifier, because my code is used in a common component that can be used in loops, etc., And I do not use beans support (Facelets + JSF).

So my question is: is there a way to access the HREF element from my onclick javascript function without knowing the id?

+1
source share
3 answers

EDIT:

Go here for a small library / sample code to get clientId from id: JSF: working with component identifiers

The HTML identifier emitted by the JSF controls contains names to avoid collisions (for example, the control is a child of UIData and emitted several times, or the container is a portlet so that the view can appear multiple times on the same HTML page). This identifier is known as clientId and is different from the identifier set in the JSF control.

If you want to emit clientId in the view, you can use a managed bean to do this.

public class JavaScriptBean {

    public String getOnclickButton1() {
        String id = "button1";
        String clientId = getClientId(id);
        return "alert('You clicked element id=" + clientId + "');";
    }

    public String getOnclickButton2() {
        String id = "button2";
        String clientId = getClientId(id);
        return clientId;
    }

    private String getClientId(String id) {
        FacesContext context = FacesContext.getCurrentInstance();
        UIViewRoot view = context.getViewRoot();
        UIComponent component = find(view, id);
        return component.getClientId(context);
    }

    private UIComponent find(UIComponent component, String id) {
        if (id.equals(component.getId())) {
            return component;
        }

        Iterator<UIComponent> kids = component.getFacetsAndChildren();
        while (kids.hasNext()) {
            UIComponent kid = kids.next();
            UIComponent found = find(kid, id);
            if (found == null) {
                continue;
            }
            return found;
        }

        return null;
    }

}

faces-config.xml :

<f:view>
    <h:form>
        <h:commandButton id="button1" value="b1"
            onclick="#{javaScriptBean.onclickButton1}" />
        <h:commandButton id="button2" value="b2"
            onclick="alert('You clicked element id=#{javaScriptBean.onclickButton2}');" />
    </h:form>
</f:view>
+2

var a = function() {alert (this)}; var b = function() {if (typeof jsfcljs == 'function') {jsfcljs (document.forms ['mainForm'], 'generatedId, action, action ',' ');} return false}; return (a() == false)? false: b();

! .

, , 'this', - "return (a.call(this) == false)? false: b()".

IE srcElement window.event, .

, JSF weird event mangling , ? . onclick :

document.getElementById('generatedId').onclick= function() {
    alert(this);
    return false; // if you want to not follow the link
}

JSF, onclick Element.addEventListener(attachEvent IE), , onclick.

+2
<head>
..
<script type="text/javascript">
var myCommandLinkId = "undefined";
</script>
..
</head>

..

<h:commandLink id="myCommandLink" value="Click Me" onmousedown="myCommandLinkId=this.id;" onclick="alert(myCommandLinkId);" />
0
source

Source: https://habr.com/ru/post/1777541/

More articles:


All Articles