函数未定义 - jsf/javascript答案

【问题标题】：Function is not defined - jsf/javascript函数未定义 - jsf/javascript
【发布时间】：2012-09-27 18:47:08
【问题描述】：

我无法调用我的 javascript 函数。我现在在 onChange SelectMenu 中尝试过并标记 ajax，但两者都给出以下消息：

消息：“sumarFilas”未定义。

函数调用跟随函数和jsf：

<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>

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>

谢谢！

【问题讨论】：

能否请您正确缩进您的代码？
好像没问题。你的脚本真的执行了吗？使用 <script type="text/javascript"> 而不是已弃用的 language 属性。
您是否按类型更改了语言，并通过单击项目给出了消息。
我认为您不了解 JSF 组件是如何工作的，在您的脚本中，您正尝试使用诸如 celda5.innerHTML = " 之类的调用使用 javascript 添加 jsf 组件" 但你的网络浏览器不会做任何有用的事情，因为这些标签是由服务器端的 facelets 视图解析器解析的。
我强烈建议在项目开发上暂停一两个星期，然后学习关于 JSF、HTML 和 JavaScript 的提神课程。尤其是“服务器端”和“客户端”的问题，你似乎完全不知道。这只会导致很大的混乱和错误的代码。

标签： javascript ajax jsf

【解决方案1】：

您尝试使用 javascript 生成 JSF 代码。 Javascript在服务器处理整个jsf页面后运行，生成html，然后将渲染后的html响应发送给浏览器。浏览器本身无法处理 JSF 代码，它完全超出了JSF lifecycle。

【讨论】：

【解决方案2】：

尝试如下改变你的函数

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);
        }
    } 
}

让我知道它是否适合你...

另外，看看这个 BalusC 答案

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

【讨论】：

这确实回答了最初所说的具体问题。必须定义函数参数。但是他的方法除了这个错误信息之外还有很多很多的问题。