Can any one solve my problem
Here is what I am trying to achieve
I have page with a table (name, and description). Each row in the table is a group. It has following properties. 1) name, 2) description c) collection of strings
Now I click an add button on the first page, It takes to the second page.
There I have name, description and a text field and a add button and a Select.
If something is entered in the textfield and add button is clicked, it should get added to the list. So I have added the java script. The reason why I am doing that way, I don;t want to go to another page.
<code>
<h:panelGrid columns="2" style="margin-left:1cm">
<h:inputText id="extRange" style="width:150" value=""/>
<h:commandButton style="width:62" value="Add" onclick="add()" />
<h:selectOneListbox id="extList" style="width:150" size="5" value="">
</h:selectOneListbox>
<h:commandButton style="width:62;position:relative;top:-30" value="Delete"/>
</h:panelGrid>
Here is the javascript
function add() {
var a=document.getElementById('addCallerGroup:extRange').value;
//alert(a)
var x = document.getElementById('addCallerGroup:extList').options.length;
alert(x);
//document.getElementById('mySelect').size = x+1
//var z = document.getElementById('mySelect').size
//alert(z)
//document.getElementById('mySelect').options[3].value="tmp"
//alert(y)
var y=document.getElementById("addCallerGroup:extList");
y.options[x]=new Option(a,'new value');
}
</code>
Things I have observed:
When I click the button, it gets added to the list, but immediately it gets removed and I see the page getting refreshed.
thanks
[1788 byte] By [
vpalkondaa] at [2007-11-27 10:53:12]
# 2
I tried that, but it is not working either. Your help is appricated.
Here is the complete code
<code>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<h:form id="caller-group-form">
<f:verbatim>
<script language="JavaScript" src="<%=request.getContextPath()%>/js/common.js"></script>
<script>
</script>
</f:verbatim>
<h:dataTable border="1" binding="#{phoneGroupListBean.table}" rowClasses="evenRows,oddRows"
headerClass="standardTableHeader" styleClass="standardTable" value="#{phoneGroupListBean.list}" var="group">
<h:column>
<f:facet name="header">
<h:outputText value="#"/>
</f:facet>
<h:selectOneRadio valueChangeListener="#{phoneGroupListBean.select}"
onchange="">
<%/* Just put a space to fire valueChangeListener */%>
<f:selectItem itemValue=" "/>
</h:selectOneRadio>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{group.name}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Description"/>
</f:facet>
<h:outputText value="#{group.description}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Ext"/>
</f:facet>
<h:outputText value="#{group.list}" />
</h:column>
</h:dataTable>
<h:commandButton value="Add" style="margin:5px" action="showAddPhoneUserGroup" />
<h:commandButton value="Edit" style="margin:5px" action="showAddPhoneUserGroup" />
<h:commandButton value="Delete" style="margin:5px" action="#{phoneGroupListBean.deleteGroup}" />
</h:form>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<h:form id="addCallerGroup">
<h:panelGrid columns="2" style="margin:1cm">
<h:outputText value="Name" />
<h:inputText value="#{phoneGroupListBean.selectedGroup.name}" />
<h:outputText value="Description" />
<h:inputTextarea
value="#{phoneGroupListBean.selectedGroup.description}">
</h:inputTextarea>
</h:panelGrid>
<h:outputText style="margin:1cm"
value="Enter a single extention(ex:1234) or a range (2000-2500)" />
<h:panelGrid columns="2" style="margin-left:1cm">
<h:inputText id="extRange" style="width:124" value="#{phoneGroupListBean.extBuffer}" />
<h:commandButton style="width:62" value="Add" action="#{phoneGroupListBean.addExtentionToTable}"/>
<h:dataTable border="1" binding="#{phoneGroupListBean.addExttable}"
rowClasses="evenRows,oddRows" headerClass="standardTableHeader"
styleClass="standardTable" value="#{phoneGroupListBean.selectedGroup.list}"
var="ext">
<h:column>
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:outputText value="#" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Range" />
</f:facet>
<h:outputText value="#{ext.range}" />
</h:column>
</h:dataTable>
<h:commandButton value="Delete" />
</h:panelGrid>
<h:panelGrid columns="2" style="margin:1cm">
<h:commandButton style="width:60" value="OK"
action="#{phoneGroupListBean.applyConfig}" />
<h:commandButton value="Cancel" />
</h:panelGrid>
</h:form>
import java.util.ArrayList;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.event.ValueChangeEvent;
import PhoneGroupDTO;
import ExtentionRange;
public class PhoneGroupListBean {
private ArrayList<PhoneGroupDTO> list;
private HtmlDataTable table;
private PhoneGroupDTO selectedGroup = new PhoneGroupDTO();
private HtmlDataTable addExttable;
private String extBuffer;
private ArrayList<ExtentionRange> extList;
public String getExtBuffer() {
return extBuffer;
}
public void setExtBuffer(String addExt) {
this.extBuffer = addExt;
}
public PhoneGroupListBean(){
}
public ArrayList<PhoneGroupDTO> getList() {
return list;
}
public HtmlDataTable getTable() {
return table;
}
public void setTable(HtmlDataTable table) {
this.table = table;
}
public void select(ValueChangeEvent event) {
selectedGroup = (PhoneGroupDTO) table.getRowData();
}
public String applyConfig() {
if(selectedGroup != null) {
System.out.println("name"+selectedGroup.getName());
System.out.println("des"+selectedGroup.getDescription());
for (int i =0; i < selectedGroup.getList().size(); i++) {
System.out.println("item"+selectedGroup.getList().get(i));
//selectedGroup.getList().
}
}
return "";
}
public String editGroup() {
return "";
}
public String deleteGroup() {
return "";
}
public PhoneGroupDTO getSelectedGroup() {
return selectedGroup;
}
public void setSelectedGroup(PhoneGroupDTO selectedGroup) {
this.selectedGroup = selectedGroup;
}
public HtmlDataTable getAddExttable() {
return addExttable;
}
public void setAddExttable(HtmlDataTable addExttable) {
this.addExttable = addExttable;
}
public ArrayList<ExtentionRange> getExtList() {
return extList;
}
public void setExtList(ArrayList<ExtentionRange> extList) {
this.extList = extList;
}
public String addExtentionToTable() {
System.out.println("got "+ extBuffer);
return null;
}
}
</code>
