This discussion is archived
4 Replies Latest reply: Aug 9, 2012 12:51 AM by gimbal2 RSS

RE: commandlink requires clicking twice - a shorter posting

Amasoni Newbie
Currently Being Moderated
I have a page which has a datatable and a form below it. The datatable is populated each time a record is entered via the form. The datatable also has an edit commandlink which on clicking i'd like to display the record in the form but with the primary key field disabled. I do this using <f:ajax> tag

<h:commandLink id="editLink" value="#{bundle.ListUnitEditLink}" action="#{contractManager.updateContract}">
<f:ajax onevent="disablePK" render="@all" />
</h:commandLink>

I'm using @all because i can't correctly refer to an item on the form below and get
<f:ajax> contains an unknown id ':panel1' - cannot locate it in the context of the component editLink
when i try using render=":panel1 :contracts"

Using the @all is populating the form but it requires me to click the link twice. This is puzzling me too.

Then also, when i try to submit the form after editing, i need to click the submit button on the form twice before the update can occur. Any ideas plz.

This is the essentials from the datatable:

<ui:define name="tableView">

<h:dataTable
var="cntrcts"
summary="Table of contracts"
value="#{contractManager.items}"
rules="all"
cellpadding="5">
<h:column>
<f:facet name="header">
<h:outputText value="Actions" />
</f:facet>
<h:form>
<h:commandLink id="editLink" value="#{bundle.ListUnitEditLink}"
action="#{contractManager.updateContract}">
<f:ajax onevent="disablePK"
render=":panel1 :contracts" />
</h:commandLink>
<h:outputText value=" "/>
<h:commandLink value="Delete" actionListener="#{contractManager.removeContract}" action="contracts">
<f:param name="deleteContractId" id="deleteContractId" value="#{cntrcts.contractid}" />
</h:commandLink>
</h:form>
</h:column>
</h:dataTable>
</ui:define>

This is the essentials of the form:

<ui:define name="newRecord">
<h:form id="contracts">
<h:outputScript library="js" name="common.js" target="head"/>
<h:panelGrid columns="3" id="panel1"
columnClasses="rightalign,leftalign,leftalign">
<h:outputLabel for="contractIdInputText" rendered="true" value="Contract Nooo.: " />
<h:inputText id="contractIdInputText" required="true" value="#{contractManager.newContractId}" />
<h:message for="contractIdInputText" />

</h:panelGrid>

<h:commandButton id="cmdSubmit" value="Submit"
action="#{contractManager.submitContract}" >
</h:commandButton>
</h:panelGrid>

</h:panelGrid>
</h:form>
</ui:define>

This is an extract from the bean:

public String submitContract() {
if(updatingYN==false){ //submiting a new record
try {

request.createContract(newContractId,newContractDesc,newContractAmt,newContractDt,newContractStrtDt,newExpDuration,"Amasoni" ,new Date());

} catch (Exception e) {
logger.warning("Problem creating Contract in submitContract.");
}
}
else{ //updating/editing an existing record.
System.out.println("in TRUE section");
this.lstUpdBy="Amasoni";
this.lstUpdOn=new Date();
current.setContractid(newContractId);
current.setContractdesc(newContractDesc);
current.setContractamt(newContractAmt);
current.setContractdt(newContractDt);
current.setContractstrtdt(newContractStrtDt);
current.setExpduration(newExpDuration);
current.setActduration(newContractAmt);
current.setLstupdby(lstUpdBy);
current.setLstupdon(lstUpdOn);
request.updateContract(current);
JsfUtil.addSuccessMessage(ResourceBundle.getBundle("/Bundle").getString("ContractUpdated"));
updatingYN=false;
}
return "contracts";
}

public String updateContract() {
current = (Contract) items.getRowData();
this.newContractId=current.getContractid();
this.newContractDesc=current.getContractdesc();
this.newContractDt=current.getContractdt();
this.newContractAmt=current.getContractamt();
this.newContractStrtDt=current.getContractstrtdt();
this.newExpDuration=current.getExpduration();
this.newCtdBy=current.getCtdby();
this.newCtdOn=current.getCtdon();
this.lstUpdBy=current.getLstupdby();
this.lstUpdOn=current.getLstupdon();
updatingYN=true;
return "contracts";
}

Thnx so much!

Edited by: Amasoni on Aug 7, 2012 10:28 PM
  • 1. Re: RE: commandlink requires clicking twice - a shorter posting
    Amasoni Newbie
    Currently Being Moderated
    I put the whole datatable in a <h:form> tag and removed the <h: form> tags that were enclosing the commandlinks. This solved the clicking twice issue on the commandink regarding populating the form.

    However,
    I've found out that the submit commandbutton on the form also requires clicking twice before the submit calls my submitContract method in my backing bean. any ideas plz!

    Here's my form:

    <h:form id="contracts">
    <h:outputScript library="js" name="common.js" target="head"/>
    <h:panelGrid columns="3"
    columnClasses="rightalign,leftalign,leftalign">

    <h:outputLabel for="contractIdInputText" rendered="true" value="Contract Nooo.: " />
    <h:inputText id="contractIdInputText" required="true" value="#{contractManager.newContractId}" />
    <h:message for="contractIdInputText" />

    <h:outputLabel for="contractDescInputText" rendered="true" value="Name/Description: " />
    <h:inputTextarea id="contractDescInputText" rows="3" required="true" value="#{contractManager.newContractDesc}" />
    <h:message for="contractDescInputText" />

    <h:outputLabel for="contractDtInputText" rendered="true" value="Contract Date (DD-MON-YYYY): " />
    <h:inputText id="contractDtInputText" required="true" value="#{contractManager.newContractDt}" >
    <f:convertDateTime pattern="dd-MMM-yyyy" />
    </h:inputText>
    <h:message for="contractDtInputText" />

    <h:outputLabel for="contractAmtInputText" rendered="true" value="Contract Amount: " />
    <h:inputText id="contractAmtInputText" required="true" value="#{contractManager.newContractAmt}" />
    <h:message for="contractAmtInputText" />

    <h:outputLabel for="contractStrtDtInputText" rendered="true" value="Start Date (DD-MON-YYYY): " />
    <h:inputText id="contractStrtDtInputText" required="true" value="#{contractManager.newContractStrtDt}" >
    <f:convertDateTime pattern="dd-MMM-yyyy" />
    </h:inputText>
    <h:message for="contractStrtDtInputText" />

    <h:outputLabel for="expDurationInputText" rendered="true" value="Expected Duration (months): " />
    <h:inputText id="expDurationInputText" required="true" value="#{contractManager.newExpDuration}" />
    <h:message for="expDurationInputText" />


    <!--<h:panelGroup/>-->


    </h:panelGrid>

    <h:panelGrid columns="7" border="4" rules="none" columnClasses="leftalign">
    *<h:commandButton id="cmdSubmit" value="Submit"*

    *action="#{contractManager.submitContract}" >*
    <!-- <f:ajax execute="@all" />-->
    </h:commandButton>
    <h:commandButton id="cmdQuit" value="Quit" action="#{contractManager.quit}" />
    </h:panelGrid>
    </form>

    Edited by: Amasoni on Aug 8, 2012 2:28 AM
  • 2. Re: RE: commandlink requires clicking twice - a shorter posting
    Amasoni Newbie
    Currently Being Moderated
    Clicking twice required to submit form
  • 3. Re: RE: commandlink requires clicking twice - a shorter posting
    Amasoni Newbie
    Currently Being Moderated
    Solved my double clicking issues by puting both the datatable and form components n one <h: form>
  • 4. Re: RE: commandlink requires clicking twice - a shorter posting
    gimbal2 Guru
    Currently Being Moderated
    Amasoni wrote:
    Solved my double clicking issues by puting both the datatable and form components n one <h: form>
    It is only solved when you know and understand the actual cause. Do you? Until then you've just bodge fixed it.

    'Weird behavior' in JSF is usually caused by nesting forms within each other, something which isn't allowed by the HTML specs. Perhaps you had that?

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points