如何防止点击 <h:commandLInk> 时页面刷新

Posted 2023-03-05

【中文标题】如何防止点击 <h:commandLInk> 时页面刷新

【英文标题】：How can I prevent page refresh on click of <h:commandLInk>

【发布时间】：2012-09-19 09:40:19

【问题描述】：

当用户在我的应用程序中单击<h:commandLink> 时，我试图阻止页面刷新。我试过了，但它不起作用：

更新：

 <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 sn-p：

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

我正在使用来自 MKyong.I 的editing jsf datatable 的概念

【问题讨论】：

你确定它是Person. 而不是person.，试着让你的edtiAction 方法无效...

感谢您注意到错字。您只是希望我将操作返回类型更改为无效，并对上面发布的代码进行任何更改？

是的，试试看，public void edtiAction(); 否则会是隐式导航

这应该可以正常工作。我相信您的具体问题/问题措辞不佳。您已经通过嵌入<f:ajax> 完成了防止页面刷新的工作。它现在不再刷新了，对吧？我猜您的 实际 问题是当您单击链接时输出文本没有更改为日历，并且您无法弄清楚如何执行此操作，对吗？

@BalusC .....是的，这正是我的问题。抱歉，如有任何困惑。请给我建议解决方案。我通过查看您的其他答案实现了上述内容。***.com/questions/8988780/…跨度>

【参考方案1】：

我会尝试使用f:ajax 的listener 而不是h:commandLink 的action：

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

另外，请注意您要在 ajax 之后呈现的内容。

【讨论】：

什么不起作用？问题是什么？会发生什么以及您预期会发生什么？你确定渲染应该是@none 吗？再次渲染您的数据表。我想你想看到一些改变。它是什么？将其 id 放在渲染选项中，而不是 @none。

是的，我考虑了 BalusC 的评论来更新我的帖子。这就是为什么我告诉你将 dataTable id 放在 render 属性中而不是 @none 中的原因。但也许我的解决方案还不够。也许您应该将所有元素都更改为 primefaces 的元素，这样它们就可以像 Catfish 的回答那样很好地交谈。

【参考方案2】：

由于我看到您在日历组件中使用 primefaces，您可能还想使用 primefaces 命令按钮和数据表。 primefaces 组件都可以很好地组合在一起。

从下面的示例中，您可以看到我为您的数据表提供了一个 ID，并且在 commandLink 上，我添加了一个更新属性以在调用操作后更新数据表。默认情况下，primefaces 有一个在 commandLinks 上设置为 true 的 ajax 属性。

<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>