How can I prevent page refresh on click of <h:commandLInk>

Question

I am trying to prevent a page refresh when the user clicks on <h:commandLink> in my applicaton. I tried this but it does not work:

Updated :

 <h:dataTable value="#{person.IssueList}" var="p" >
    <h:column style="width: 20px">
        <f:facet name="header">Issue</f:facet>
        <h:commandLink value="#{p.IssueDesc}"/>
    </h:column>

    <h:column style="width: 20px">
         <f:facet name="header">Reporting Date</f:facet>
         <p:calendar  value="#{p.issuerepDt}" rendered="#{p.editable}"                 id="CalendarId"/>                
         <h:outputText value="#{p.issuerepDt}" rendered="#{not p.editable}" />
    </h:column>

    <h:column>
            <f:facet name="header">Action</f:facet>
        <h:commandLink  value="Edit" action="#{person.editAction(p)}">
            <f:ajax execute="@form" render="@none" />          
        </h:commandLink>    

            </h:column>
    </h:dataTable>

java snippet :

public void  editAction(PersonIssues pIssues) {
    pIssues.setEditable(true);
}

I am using concept of editing jsf datatable from MKyong.I

Answer 1

Since i see your using primefaces for the calendar component, you may want to use the primefaces commandbutton and datatable as well. The primefaces components all play pretty nice together.

From my example below, you can see that i gave your datatable an id and on the commandLink, i've added an update attribute to update the datatable after the action is called. By default, primefaces has an ajax attribute that is set to true on the commandLinks.

<p:dataTable id="myTable" value="#{person.IssueList}" var="p" >
    <p:column style="width: 20px" headerText="Issue">
         <p:commandLink value="#{p.IssueDesc}"/>
    </p:column>

    <p:column style="width: 20px" headerText="Reporting Date">
         <p:calendar  value="#{p.issuerepDt}" rendered="#{p.editable}"                 id="CalendarId"/>                
         <h:outputText value="#{p.issuerepDt}" rendered="#{not p.editable}" />
    </p:column>

    <p:column headerText="Action">
         <p:commandLink  value="Edit" action="#{person.editAction(p)}" update="myTable"/>
    </p:column>
</p:dataTable>

Answer 2

I would try to use the listener of f:ajax instead of action of h:commandLink:

<h:commandLink value="Edit">
    <f:ajax listener="#{person.editAction(p)}" execute="@form" render="dataTableId calendarId" />          
</h:commandLink>  

Also, pay attention to what you want to render after the ajax.