h:commandButton 的 onclick JavaScript 方法在提交表单之前不会运行

Question

你好 all.I'我是 jsf 的新手。
现在我知道要设置托管 Bean 属性，我可以使用表单，但我在我的 jsf 页面中使用 JavaScript。
我想要的是在提交表单之前执行 javascript 方法 onclickAdd() 以便用户可以看到突尼斯的任何图表地图中的变化以及 table. 我的 jsf 页面有一个下拉列表。

   <h:form>
    Gouvernorats &#160; Temperature (C°) <br/>
     <h:selectOneMenu id="list" value="#{GouvBean.name}" >
         <f:selectItem itemValue="Tunis" itemLabel="Tunis" />
         <f:selectItem itemValue="Médenine" itemLabel="Medenine"/>
         <f:selectItem itemValue="Gabès" itemLabel="Gabès"/>
         <f:selectItem itemValue="Sfax" itemLabel="Sfax"/>
         <f:selectItem itemValue="Sidi Bou Zid" itemLabel="Sidi Bou Zid"/>
         <f:selectItem itemValue="Kassérine" itemLabel="Kassérine"/>
         <f:selectItem itemValue="Mahdia" itemLabel="Mahdia"/>
         <f:selectItem itemValue="Sousse" itemLabel="Sousse"/>
         <f:selectItem itemValue="Monastir" itemLabel="Monastir"/>
         <f:selectItem itemValue="Tataouine" itemLabel="Tataouine"/>
         <f:selectItem itemValue="Kebili" itemLabel="Kebili"/>
         <f:selectItem itemValue="Tozeur" itemLabel="Tozeur"/>
         <f:selectItem itemValue="Bèja" itemLabel="Bèja"/>
         <f:selectItem itemValue="Jendouba" itemLabel="Jendouba"/>
         <f:selectItem itemValue="Bizerte" itemLabel="Bizerte"/>
         <f:selectItem itemValue="Manubah" itemLabel="Manubah"/>
         <f:selectItem itemValue="Ben Arous" itemLabel="Ben Arous"/>
         <f:selectItem itemValue="Zaghouan" itemLabel="Zaghouan"/>
         <f:selectItem itemValue="Siliana" itemLabel="Siliana"/>
         <f:selectItem itemValue="Le Kef" itemLabel="Le Kef"/>
         <f:selectItem itemValue="Gafsa" itemLabel="Gafsa"/>
         <f:selectItem itemValue="Kairaouan" itemLabel="Kairaouan"/>
         <f:selectItem itemValue="Nabeul" itemLabel="Nabeul"/> 


     </h:selectOneMenu>

     <h:inputText id="Temperature" value="#{GouvBean.temperature}" ><f:ajax listener="#{GouvBean.inchange}"/></h:inputText>


     <h:commandButton value="+"onclick="onClickAdd();" >
        <f:ajax execute="@form"/>
    </h:commandButton>
  </h:form>

javascript方法改变了一个table和一个AnyChart地图：
这是 table:

     <table id="myTable">
         <thead><tr><th>Gouvernorats</th><th>Temperature</th>   </tr></thead>
         <tbody></tbody>

     </table>

这是JavaScript方法：

     //Define a JavaScript method
        function onClickAdd(){

            //saving the value of the list
         var Gov = document.getElementById("list");
         var Gid=Gov.options[Gov.selectedIndex];
         //deleting  the current valye(added value) from the list
                Gov.remove(Gov.selectedIndex)
         var C°=document.getElementById('Temperature');

            //Getting refrence to tbody
            var tbodyRef=document.getElementById("myTable").getElementsByTagName("tbody")[0];
            //appending a row to tbody
            var row=tbodyRef.insertRow(tbodyRef.rows.length);

            var cell1=row.insertCell(0);
            var cell2=row.insertCell(1);
            var cell3=row.insertCell(2);

            //Creation of delete button
            var del=document.createElement("BUTTON");
            var t=document.createTextNode("-");

            //Giving value to the cells 
            cell1.innerHTML=Gid.value;
            cell2.innerHTML=C°.value;
            cell3.appendChild(del);



            //adding a listener to the button   
            del.appendChild(t);
            //OnAddChangeValue(cell1.innerHTML,cell2.innerHTML);




            del.addEventListener("click",function(){

            //1)knowing the row where the button is(index)
            var x=del.parentNode.parentNode.rowIndex;
                x=x-1;

            //2)moving the value of the first cell back to the list
            var l=document.getElementById("list");

              //create option node
            var node=document.createElement("option");

              //create attribute value
            var attr1=document.createAttribute("value");

               //creation of label
            var label=document.createTextNode(tbodyRef.rows[x].cells[0].innerHTML);

                 //setting a value to the attribute
                 attr1.value=tbodyRef.rows[x].cells[0].innerHTML;

                  //linking...
                  node.setAttributeNode(attr1);
                  node.appendChild(label);
                  l.appendChild(node);
            //3)deleting the row from the tbody

                    tbodyRef.deleteRow(x);

            //  OnDeleteChangeValue(cell1.innerHTML);

            });

            }

     </script>

这是h:head

<h:head><title>Hello world-JSF-Input Form</title>

</h:head>

请帮帮我

注意：当我在之前添加 h:form 时它可以工作，但在这种情况下 javascript 不工作！

Answer 1

您在 h:selectOneMenu 和 h:inputText 中使用 ajax，如果它们在 h:form 中（如您发现）。但是与其问我如何在没有表单的情况下发送数据（这使得 commandButton 'work'），问题应该是

如何防止 h:commandButton 刷新页面。

这里给出了答案：

How make commandButton not fully refresh page? How to use f:ajax?

但是由于您似乎不需要（甚至不想）在单击（命令）按钮时向服务器发送任何内容，所以一个普通的不提交html 带有 onClick 的按钮就足够了。这可以通过将 type="button" 添加到 h:commandButton 来实现（或者使用普通的 html 对应物，这也是合法的）

What's exactly is the difference between types of h:commandbutton?

一些常识：

commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
https://www.mkyong.com/jsf2/jsf-2-button-and-commandbutton-example/

Answer 2

在 google chrome 浏览器中调试页面后，我发现我需要：

1) 包括<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"/>

2) 我意识到 jsf 中的 id 值在 html 中发生了变化：

如果一个元素的 id 在 jsf 中是 "list" 它变成 "j_idt6:list" 在 html.
so 中getElmentbyid 我需要这样做： document.getElementById("j_idt6:list") 而不是 document.getElementById("list")

现在一切正常。

h:commandButton 的 onclick JavaScript 方法在提交表单之前不会 运行

h:commandButton's onclick JavaScript method dosen't run before Submitting the form

ajax

jsf

jsf-2

h:commandButton 的 onclick JavaScript 方法在提交表单之前不会运行