Javascript alert in JSF

Question

I have a method called bilgidorumu() in a managed bean class to check input. If there is a match with database (username and password), the application should go to the welcome page anasayfa.xhtml, else, it stays at the same page (index.xhtml). My problem is that I want to show an alert before staying on the same page (index.xhtml). So if there is no match for username/password, it should display an alert first, and stays then at index.xhtml. But I have no idea how to do that because Javascript runs on client side and Java code in server side. I have tried to display the alert with onclick event but it's not working: <h:commandButton value="GİRİŞ" styleClass="button" action="#{kntrl.bilgidorumu()}" onclick="onBack()"/>

My input elements to reach via JS function:

<h:inputText id="username" value="#{kntrl.kulad}"  
 pt:placeholder="username"    required="true"
 requiredMessage="Kullanıcı adı girilmesi zorunlu"/> <h:inputSecret
 id="pw" value="#{kntrl.kulsifre}" pt:placeholder="password"  
 required="true" requiredMessage="Şifre girilmesi zorunlu"/>

JS function:

function onBack(){
     var kulad=document.getElementById("login-form:username").value;
     var kulsifre=document.getElementById("login-form:pw").value;
     alert(kulad+kulsifre);              
 }

index.xhtml:

<div class="login-page">
      <div class="form">
        <h:form class="register-form">
            <h:inputText  pt:placeholder="name"/>
          <input type="password" placeholder="password"/>
          <input type="text" placeholder="email address"/>
          <button>create</button>
          <p class="message">Already registered? <a href="#">Sign In</a></p>
        </h:form>
        <h:form class="login-form">
            <h:inputText id="username" value="#{kntrl.kulad}"   pt:placeholder="username"    required="true" requiredMessage="Kullanıcı adı girilmesi zorunlu"/>
            <h:message for="username" style="color: red"></h:message>
            <h:inputSecret id="pw" value="#{kntrl.kulsifre}" pt:placeholder="password"   required="true" requiredMessage="Şifre girilmesi zorunlu"/>
            <h:message for="pw" style="color: red; " ></h:message>
            <h:commandButton value="GİRİŞ"  styleClass="button" action="#{kntrl.bilgidorumu()}" onclick="onBack()"/>
          <p class="message">Not registered? <a href="#">Create an account</a></p>
        </h:form>
      </div>
    </div>
                <f:verbatim>
                    <script type="text/javascript">
                       function onBack(){
                            var kulad=document.getElementById("login-form:username").value;
                            var kulsifre=document.getElementById("login-form:pw").value;
                            alert(kulad+kulsifre);                

                       }

                    </script>

                </f:verbatim>

Managed bean:

@ManagedBean(name = "kntrl")
@RequestScoped
public class kontrolet {

    private int id;
    private String adsoyad;
    private String birim;
    private String bolum;
    private String unvan;
    private int puan;
    private String kulad;
    private String kulsifre;

    public kontrolet() {
    }

    public String bilgidorumu() throws ScriptException {
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/akademiktesvik", "root", "");
            String query = "Select * from kisiler";
            Statement stmt = con.createStatement();
            ResultSet rs = stmt.executeQuery(query);
            while (rs.next()) {
                if (rs.getString("kulad").equals(kulad) && rs.getString("kulsifre").equals(kulsifre)) {
                    return "anasayfa?faces-redirect=true";
                }

            }

        } catch (Exception e) {
            System.out.println("Baglanti kuurulmadı hata var" + e.getMessage());
        }

        return "index";

    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getAdsoyad() {
        return adsoyad;
    }

    public void setAdsoyad(String adsoyad) {
        this.adsoyad = adsoyad;
    }

    public String getBirim() {
        return birim;
    }

    public void setBirim(String birim) {
        this.birim = birim;
    }

    public String getBolum() {
        return bolum;
    }

    public void setBolum(String bolum) {
        this.bolum = bolum;
    }

    public String getUnvan() {
        return unvan;
    }

    public void setUnvan(String unvan) {
        this.unvan = unvan;
    }

    public int getPuan() {
        return puan;
    }

    public void setPuan(int puan) {
        this.puan = puan;
    }

    public String getKulad() {
        return kulad;
    }

    public void setKulad(String kulad) {
        this.kulad = kulad;
    }

    public String getKulsifre() {
        return kulsifre;
    }

    public void setKulsifre(String kulsifre) {
        this.kulsifre = kulsifre;
    }

}

score 2 · Accepted Answer · edited May 23 '17 at 11:46

I would not recommend to use a JavaScript alert to do so. But, if you really want to, your question would be a duplicate of:

Calling a JavaScript function from managed bean

I would suggest to simply set a message when the username and password do not match and indicate that the validation failed:

FacesContext context = FacesContext.getCurrentInstance();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR,
                                        "Your message",
                                        "Message details");
context.addMessage(null, message);
context.validationFailed();

Note the null in addMessage, this means we don't set a client ID to the message. This makes the message global. To display it on your page, simply use:

<h:messages globalOnly="true"/>

Javascript alert in JSF

1 Answers1