I'm using JSF 2.2 passthrough elements and I'd like to call both functions, jsf:action and jsf:onclick. I tryed a lot of ways to do it and none worked for me.
The closest approach I got, was this way:
HTML
<form jsf:id="frmNavigation">
<a jsf:id="btnHome" jsf:action="#{bean.action()}" jsf:onclick="clickHome">
<f:ajax execute="@form" render="frmRedirect:frmNewHomeRedirect"/>
</a>
[...]
</form>
JS
function clickHome(){
document.getElementById("frmRedirect:frmNavigation:btnHome").addClass("metro-btn-red");
document.getElementById("frmRedirect:frmNavigation:btnCadCli").removeClass("metro-btn-red");
document.getElementById("frmRedirect:frmNavigation:btnModel1").removeClass("metro-btn-red");
document.getElementById("frmRedirect:frmNavigation:btnModel2").removeClass("metro-btn-red");
}
Note My JS it's in the HTML page, but either in external JS it didn't worked.
The id related in the JS appers to be correct. I checked the DOM output.
I also tryed to invoke click function in JS code. It didn't worked. Either tryed the HTML onclick, but this one erases the Mojarra click event ( jsf:action ).
I found another anwser in this forum
http://www.coderanch.com/t/211593/JSF/java/Calling-backingBean-method-javascripthttp://www.coderanch.com/t/211593/JSF/java/Calling-backingBean-method-javascript
Guess what, it didn't worked too '_'.
I'm missing something which I can't figure.
I was thinking if there is a way to call my action from JS. Is there an way to do that without composing a new element?
Thanks in advance.
Update
Trying the same in a new project:
HTML
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head jsf:id="head">
<title>Facelet Title</title>
<meta charset="UTF-8"/>
<style type="text/css">
.btn{
background-color: #FFF;
border: solid 2px #303030;
color: #303030;
}
.btn-red{
background-color: #C30563;
}
</style>
<script type="text/javascript">
function clickMe() {
document.getElementById("btn").addClass("btn-red");
}
</script>
</head>
<body jsf:id="body">
<form jsf:id="frm" jsf:prependId="false">
<a jsf:id="btn" type="submit" jsf:value="Click me" jsf:action="#{cbMain.doSomething()}" jsf:onclick="clickMe()" class="btn">
<f:ajax execute="@form" render="frmRender"/>
</a>
</form>
</body>
</html>
Back Bean
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
@Named("cbMain")
@SessionScoped
public class TesteBean implements Serializable{
private int i = 0;
public void doSomething(){
System.out.println( i++ );
}
}
And this is the generated lines in DOM:
<a id="btn" href="#" onclick="jsf.util.chain(this,event,'clickMe()','mojarra.ab(this,event,\'action\',\'@form\',\'frmRender\')');return false" type="submit" class="btn">Click me</a>
It also didn't worked for me in a new and clean project.
In basic HTML, the
onclickattribute must represent a JavaScript expression. You've however only specified the function name. This causes a JS problem. It's as if you're doingAdd parentheses to make it a true expression:
This is not a JSF related problem. You'd have had exactly the same problem when trying the same in basic HTML.
See also the JSF-generated HTML output via rightclick, View Source in webbrowser. In future questions try to do the same in basic HTML instead. JSF is in the context of this question "just" a HTML code generator. It's ultimately yourself who's responsible that it generates the right HTML output.