How can I prevent page refresh on click of

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

are you sure its `Person.` and not `person.` also , try making your `edtiAction` method a void one... — Daniel, Sep 27 '12 at 18:37
thanks for noticing the typo..you just want me to change the action return type to void with any change to above posted code? — mdp, Sep 27 '12 at 20:35
Yes , try , `public void edtiAction(){};` otherwise it will be an implicit navigation — Daniel, Sep 27 '12 at 20:39
This should work just fine. I believe that you have just poorly phrased your concrete question/problem. You've **already** completed the job of preventing page refresh by embedding ``. It does now not refresh anymore, right? I guess that your *actual* problem is that the outputtext didn't change to the calendar when you click the link and that you can't figure out how to do this, right? — BalusC, Sep 28 '12 at 10:51
@BalusC.....Yes exactly that's my problem.Sorry, for any confusions.Please suggest me the solution.I have implemented the above by looking at your other answers.http://stackoverflow.com/questions/8988780/how-make-commandbutton-not-refresh-a-page — mdp, Sep 28 '12 at 14:40

falsarella · Answer 1 · 2012-09-28T16:44:10.233

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.

edited Sep 28 '12 at 16:44

answered Sep 28 '12 at 14:59

falsarella

12,217
9
69
115

1

What doesn't work? What is the problem? What happens and what you expected to happen? Are you sure that the render should be @none? Render your dataTable again. I think you want to see something changing. What is it? put its id in the render option instead of @none. – falsarella Sep 28 '12 at 16:41
1

Yes, I've considered BalusC's comment to update my post. That's why I've told you to put the dataTable id in the render attribute instead of @none. But maybe my solution isn't enough. Maybe you should change all your elements to primefaces' elements, so they can talk each other nicely, as Catfish's answer. – falsarella Sep 28 '12 at 18:09

score 2 · Answer 2 · answered Sep 28 '12 at 16:52

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>

How can I prevent page refresh on click of

2 Answers2

Linked