Function is not defined - jsf/javascript

Question

I'm not able to call my javascript function. I've tried in the onChange SelectMenu now and tag ajax, but both are giving the following message:

Message: 'sumarFilas' is not defined.

Follows function and jsf with the function call:

<script language="javascript">

    var numfilasRelacion=1;
    var form=document.theForm;
    var valorNRN="";

    function  sumaRelacion()    {

    var miTablaRelacion = document.getElementById("form:j_idt115_panel");

    var fila = document.createElement("tr");
    var celda1 = document.createElement("td");
    var celda2 = document.createElement("td");
    var celda3 = document.createElement("td");
    var celda4 = document.createElement("td");
    var celda5 = document.createElement("td");

    numfilasRelacion=miTablaRelacion.getElementsByTagName("tr").length + 1 ;

    celda1.innerHTML = "<p:inputText id='inicioRango' />";
    celda2.innerHTML = "<p:inputText id='finalRango' />";
    celda3.innerHTML = "<p:inputText id='numeroGrupoId' />";
    celda4.innerHTML = "<p:inputText id='checkpto'/>";
    celda5.innerHTML = "<p:inputText id='checkptoH'/>";
    fila.appendChild(celda1);
    fila.appendChild(celda2);
    fila.appendChild(celda3);
    fila.appendChild(celda4);
    fila.appendChild(celda5);
    miTablaRelacion.appendChild(fila);
    }

    function restarFilas(rangos) {
    var miTablaRelacion = document.getElementById("form:j_idt115_panel");
    var i = numfilasRelacion-1;
    do{
        miTablaRelacion.deleteRow(i);
        numfilasRelacion=numfilasRelacion-1;
        i=i-1;
      }
    while (miTablaRelacion.rows.length != rangos)
    }

    function sumarFilas(){
        alert("sumarFilas");
    var numfilas=numfilasRelacion;
    var rangos = document.getElementById("form:j_idt115_panel").value;
    if(rangos>numfilas){                                
        for(var i=0;rangos-numfilas>i;i++){
        sumaRelacion();
        }
    }else{
        restarFilas(rangos);
    }
     }
</script>

The jsf:

<h:outputText value="Nº Intervalo a Portar:" />
<p:selectOneMenu value="#{bean.parametro.intervalo}">
    <f:selectItem itemLabel="1" itemValue="1" />
    <f:selectItem itemLabel="2" itemValue="2" />
    <f:selectItem itemLabel="3" itemValue="3" />
    <f:selectItem itemLabel="4" itemValue="4" />
    <f:selectItem itemLabel="5" itemValue="5" />
    <f:selectItem itemLabel="6" itemValue="6" />
    <f:selectItem itemLabel="7" itemValue="7" />
    <f:selectItem itemLabel="8" itemValue="8" />
    <f:selectItem itemLabel="9" itemValue="9" />
    <f:selectItem itemLabel="10" itemValue="10" />
    <f:ajax event="change" onevent="sumarFilas"></f:ajax>    

</p:selectOneMenu>

<h:panelGrid columns="6" style="margin-bottom:10px" cellpadding="5"
    id="pgrid121">

    <h:outputText value="Portabilidade Grupo" id="pg1" />
    <p:selectBooleanCheckbox
        value="#{bean.parametro.portabilidadeGrupo}" id="pg11" />

    <h:outputLabel for="numInicial1" value="Nº Inicial Int:" id="ni1" />
    <p:inputText id="numInicial1" value="#{bean.parametro.numInicial}" />

    <h:outputLabel for="numFinal1" value="Nº Final Int:" id="nf1" />
    <p:inputText id="numFinal1" value="#{bean.parametro.numFinal}" />

    <h:outputLabel for="idGrupo1" value="Id do Grupo:" id="ig1" />
    <p:inputText id="idGrupo1" value="#{bean.parametro.idgrupo}" />

    <h:outputText value="PTO" id="pt1" />
    <p:selectBooleanCheckbox value="#{bean.parametro.pto}" id="pt11" />

</h:panelGrid>

Thanks!

It seems to be fine. Is your script actually executed? Use ` — Bergi, Sep 27 '12 at 18:53
Have you changed the language by type and by clicking on the item gives the message. — Deb, Sep 27 '12 at 19:01
I think you do not understand how JSF components work, in your script you are trying to add jsf components with javascript with calls like celda5.innerHTML = "" but your web browser wont do anything useful because those tags are meant to be parsed by the facelets view resolvers in the server side. — ElderMael, Sep 27 '12 at 19:10
Also document.getElementById("form:j_idt115_panel"); wont work always because the id is generated dinamically in the server side also. — ElderMael, Sep 27 '12 at 19:13
Ok! I removed everything and left only an alert (message) and keeps giving the message 'functionName' is not defined. So the problem is not in the function call. — Deb, Sep 27 '12 at 19:37
I strongly recommend to take a week or two pause on developing the project and take a refreshing course on JSF, HTML and JavaScript. Especially the "server side" and "client side" matters seem to be completely unknown to you. This would only lead to big confusions and wrong code. — BalusC, Sep 27 '12 at 20:54

score 1 · Answer 1 · answered Sep 27 '12 at 19:26

You try to generate JSF code with javascript. Javascript runs after the server process the whole jsf page, generate html, and then sends the rendered html response to the browser. Browser could not process JSF code itself, it is completely out of JSF lifecycle.

score 1 · Answer 2 · edited May 23 '17 at 11:43

Try to change your function as follows

function sumarFilas(data){
    if (data.status === 'success') {
        alert("sumarFilas");
        var numfilas=numfilasRelacion;
        var rangos = document.getElementById("form:j_idt115_panel").value;
        if(rangos>numfilas){                                
            for(var i=0;rangos-numfilas>i;i++){
            sumaRelacion();
            }
        }else{
            restarFilas(rangos);
        }
    } 
}

Let me know if it works for you...

Also , take a look a this BalusC answer

ajax call in jsf 2.0 (myfaces), the onevent javascipt function in the ajax tag gets called before the rendering is complete

This indeed answers the concrete question as initially stated. The function argument has to be defined. But his approach contains many, many more problems beyond this error message. — BalusC, Sep 27 '12 at 20:52

Function is not defined - jsf/javascript

2 Answers2