Win a copy of Head First Agile this week in the Agile forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

JSF page submitting to backing bean, even javascript validation fails...  RSS feed

 
suresh nerella
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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">
<hutputText id="col1" value="Security group" />
</f:facet>
<hutputText id="secGroup" value="#{userGroup.userGroupName}" style="text-align: center" />
</h:column>
<h:column>
<f:facet name="header">
<hutputText id="col2" value="Network" />
</f:facet>
<hutputText id="network" value="#{userGroup.network}" style="text-align: center" />
</h:column>
<h:column>
<f:facet name="header">
<hutputText id="col3" value="Network alias" />
</f:facet>
<hutputText 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>




 
lynn fann
Ranch Hand
Posts: 115
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
In your check() make sure you have "return false" if there is validation error, and "return true" if no validation error occurs.

try this:
<h:form id="mainForm" onsubmit="return check()">
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!