hello all.I'am new to jsf.
Now i know that to set the Managed Bean attributes i can use forms, But i'm using JavaScript in my jsf page.
what i want is to execute the javascript methode onclickAdd() before submitting the form so the user can see what's changed in an anychart map of tunisia along to a table.
My jsf page have a dropdown list.
<h:form>
Gouvernorats   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>
The javascript method changes a table and an AnyChart map:
this is the table:
<table id="myTable">
<thead><tr><th>Gouvernorats</th><th>Temperature</th> </tr></thead>
<tbody></tbody>
</table>
and this is JavaScript method:
//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>
and this is h:head
<h:head><title>Hello world-JSF-Input Form</title>
</h:head>
help me please
NB: IT WORKS WHEN I ADD h:form before but in this case javascript dont work !
After debugging the page in google chrome browser , i found that i need to:
1) include<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"/>
2) i realized that the id value in jsf is changed in html :
if an id of an element is "list" in jsf it becomes "j_idt6:list" in html.
so in getElmentbyid i need to do like this: document.getElementById("j_idt6:list") instead of document.getElementById("list")