Hi,
I have a datatable and buttons (like create, edit and delete) on
JSF page.
if user clicks on edit button, with out selecting a row - it should give the popup saying..."Please select a row"
I am calling Javascript function to get the pop up. ( even i am getting pop up succesfully..)
But when i click on OK of pop up, it submits the page to backingBean method ( which is been specified as the action...i.e. editGroup() in case of EDIT button and deleteGroup() method incase of DELETE button)....
Even i returned "false" from javascript funciton... it's not working...
Please suggest me the solution....
see the code here...
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://bea.com/faces/adapter/tags-naming" prefix="netuix"%>
<script type="text/javascript">
// this is to highlight the row which is been selected by the USER
var previouslySelectedRow = 'null';
function selectRowOnClick(selectedRow){
var tbodyElement = selectedRow.parentElement;
var dataTable = selectedRow.parentElement.parentElement;
var hiddenField=document.getElementById('SecurityGroups_1:mainForm:hiddenId1');
deselectPreviousRow(selectedRow,tbodyElement);
selectedRow.className = 'panelgrid-selected';
previouslySelectedRow=selectedRow;
alert('selected row is'+ selectedRow.id + hiddenField );
hiddenField.value=selectedRow.id;
//document.getElementById('SecurityGroups_1:mainForm:hiddenId1').value= selectedRow.id;
}
function deselectPreviousRow(row,tbodyElement,dataTable){
if(previouslySelectedRow=='null'){
return;
}
if(row.id!=previouslySelectedRow.id){
var rows = tbodyElement.getElementsByTagName('tr');
var numberOfRows = rows.length;
var i;
for(i=0;i<numberOfRows;i++){
rows[i].className='panelgrid-body';
}
}
}
// this is to display the POP up box, when user click on edit or delete button with out selecting a row.
function check() {
if(previouslySelectedRow=='null'){
alert('Please Select a row from the table' );
//return false;
}
}
</script>
<f:view>
<netuix:namingContainer id="facesContent">
<h:form id="mainForm">
<t:panelGrid id="grid1" columns="1">
<t:panelGroup id="panel1">
<t:dataTable id="secureGroupId" var="userGroup" value="#{mangUserBackBean.allSecurityGroupDetails}" width="100%"
bgcolor="gainsboro" border="1" headerClass="panelgrid-header" rowStyleClass="panelgrid-body"
rowOnClick="selectRowOnClick(this)" rowId="#{userGroup.userGroupName}?#{userGroup.network}">
<h:column>
<f:facet name="header">
<h:outputText id="col1" value="Security group" />
</f:facet>
<h:outputText id="secGroup" value="#{userGroup.userGroupName}" style="text-align: center" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="col2" value="Network" />
</f:facet>
<h:outputText id="network" value="#{userGroup.network}" style="text-align: center" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="col3" value="Network alias" />
</f:facet>
<h:outputText id="netAlias" value="#{userGroup.alias}" style="text-align: center" />
</h:column>
</t:dataTable>
<h:inputHidden id="hiddenId1" value="#{mangUserBackBean.selectedGroup}"/>
</t:panelGroup>
<t:panelGroup id="panel3">
<h:commandButton id="new" value="New" styleClass="submit-button" type="submit" rendered="true" action="#
{mangUserBackBean.newGroup}"/>
<h:commandButton id="editGroup" value="Edit" type="submit" styleClass="submit-button" onclick="check()" action="#
{mangUserBackBean.editGroup}"/>
<h:commandButton id="delete" value="Delete" type="submit" styleClass="submit-button" onclick="check()" action="#
{mangUserBackBean.deleteGroup}" />
</t:panelGroup>
</t:panelGrid>
</h:form>
</netuix:namingContainer>
</f:view>
