如何在 CommandButton 单击时隐藏 p:panel

2023-12-14

我想实现这里写的东西 -如何在命令按钮单击上隐藏和显示 p:panel但看来,hide()不再可用...

正确的做法是什么?

I tried toggle(),但它并没有隐藏它:

Panel after toggle()

我真的需要一些吗panelVisibile支持 bean 的属性和使用visible=#{.panelVisible}?

我正在尝试使用 PrimeFaces 7.0。

项目基于https://github.com/Betlista/joinfaces-maven-jar-example

索引.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Primefaces Test</title>
</h:head>

<h:body>
    <h:form>
        <p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true">
            <h1>Testing</h1>
        </p:panel>

        <p:commandButton onclick="PF('testPanel').show()" value="Show Panel" type="button"/>

        <p:commandButton onclick="PF('testPanel').hide();" value="Hide Panel" type="button"/>
    </h:form>
</h:body>

</html>

Result

hide is not a function error in console

即使当我尝试过PF('testPanel')在浏览器的控制台中,只有show() and no hide().

尝试解决方法

测试1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Primefaces Test</title>
</h:head>

<h:body>
    <h:form id="form1">
        <p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true" visible="#{test1View.panelVisible}">
            <h1>Testing</h1>
        </p:panel>

        <p:commandButton value="Show Panel" actionListener="#{test1View.setPanelVisible(true)}" update="form1"/>

        <p:commandButton value="Hide Panel" actionListener="#{test1View.setPanelVisible(false)}" update="form1" />
    </h:form>
</h:body>

</html>

测试1视图

package app;

import org.primefaces.PrimeFaces;

import javax.enterprise.context.RequestScoped;
import javax.enterprise.context.SessionScoped;
//import javax.faces.bean.RequestScoped;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named
//@SessionScoped
@ViewScoped
//@RequestScoped
public class Test1View implements Serializable {

    boolean panelVisible = false;

    public boolean isPanelVisible() {
        return panelVisible;
    }

    public void setPanelVisible(boolean panelVisible) {
        this.panelVisible = panelVisible;
        PrimeFaces.current().ajax().update("form1:button_panel");
    }

}

...但它不起作用=它仅在刷新后隐藏/显示...


PF溶液

最后,我尝试了close()我也发现这正是我正在寻找的东西,但它是具有效果的隐藏:

look and feel of panel on close()

这不是真的,toggle()是相同的close()对于面板(如果可见):

look and feel of panel on toggle()

结果是(测试6.xhtml)

  • closeable="true"
  • closeSpeed=0
  • 不需要可切换
<h:form>
    <p:panel id="button_panel" widgetVar="testPanel" closable="true" closeSpeed="0">
        <h1>Testing</h1>
    </p:panel>

    <p:commandButton onclick="PF('testPanel').show()" value="Show Panel" />

    <p:commandButton onclick="PF('testPanel').close();" value="Close Panel" />
</h:form>

替代解决方案

jQuery: 为此,我定义testPanelJqId作为面板的一个类。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Primefaces Test</title>
</h:head>

<h:body>
    <h:form id="form1">
        <div class="testPanelJqId">
            <h1>Testing</h1>
        </div>

        <p:commandButton value="Show Panel" onclick="jQuery('.testPanelJqId').show()"/>

        <p:commandButton value="Hide Panel" onclick="jQuery('.testPanelJqId').hide()" />
    </h:form>
</h:body>

</html>

它只是感觉不像 PrimeFaces 方法...在这样的设置中,我不需要使用p:panel根本...

PrimeFaces p:panel 和 id 替代方案

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Primefaces Test</title>
</h:head>

<h:body>
    <h:form id="form1">
        <p:panel id="panel1">
            <h1>Testing</h1>
        </p:panel>

        <p:commandButton value="Show Panel" onclick="jQuery(PrimeFaces.escapeClientId('form1:panel1')).show()"/>

        <p:commandButton value="Hide Panel" onclick="jQuery(PrimeFaces.escapeClientId('form1:panel1')).hide()" />
    </h:form>
</h:body>

</html>

所有示例均可在GitHub.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 CommandButton 单击时隐藏 p:panel 的相关文章

随机推荐

  • 如何从带有节点的函数返回 XML 文件?

    我有一个简单的 XML
  • 以二进制模式打开输入文件流时设置的skipws标志

    我知道不应在以二进制模式打开的输入流上使用提取运算符 但成员函数read应该使用 std ifstream ifs file bin std ios in std ios binary char c ifs gt gt c Should n
  • 与以分号作为单行运行相比,逐行运行会产生奇怪的结果

    我正在尝试创建一个简单的单行 Powershell 命令 该命令将列出给定进程名称的所有 TCP 和 UDP 端口 如果我一行一行地运行这些行 它会产生预期的输出 如果我将所有四行代码放入一行 并使用分号分隔各行 则会产生不同的结果 请参阅
  • 调整 div 元素的大小

    jQuery 有resize 事件 但它只适用于窗口 jQuery window resize function What ever 这很好用 但是当我想将事件添加到 div 元素时它不起作用 E g jQuery div resize f
  • 使用Javascript或HTML,如何获取div或其他元素的高度和宽度?

    我已经尝试了一段时间 获取 网页上 div 的高度和宽度 我尝试了很多事情 其中 一些是 document getElementById header getHeight height height pixelHeight 以及所有其他 明
  • 是否可以通过firebase云消息传递中断级别(iOS)?

    尝试使用 FCM 发送推送通知POST https fcm googleapis com fcm send 是一种发送方式interruption level to aps在推送通知上 根据HTTP API 规范您可以通过以下方式提供 AP
  • LWP::UserAgent 不是线程安全的吗?

    我正在使用以下子例程运行 40 个左右的线程 my app shift my ua LWP UserAgent gt new ua gt timeout 5 my response ua gt get app watch url my ne
  • 获取 List 中不同值的列表

    在 C 中 假设我有一个名为Note具有三个字符串成员变量 public class Note public string Title public string Author public string Text 我有一个类型列表Note
  • 如何使 zsh 在 mac 10.9 上使用 python 2.7.6 而不是 Apple 预装的 2.7.5

    如何使 Mac 上的 zsh 使用 usr local bin python 中的 python 2 7 6 而不是 usr bin python 中的 python 2 7 5 无需在我要运行的脚本之前输入 usr local bin p
  • Windows 程序:如何监听命令行参数?

    我正在尝试对基于商业 Windows 的 IDE 的构建系统进行逆向工程 以便我可以使用 make 来构建我的项目 启动一个程序来执行任务 我需要知道在运行该程序时将哪些命令行参数传递给该程序 但是 Windows 进程查看器不显示命令行参
  • T-SQL 将单词拆分为字符

    我到处搜索 但在任何地方都找不到这个实现 假设我有一句话 QWERTY 我想获得这张表 Q W E R T Y Or for QWERTY AnotherWord我想获得 Q W E R T Y space character here A
  • 是什么原因导致“请求在等待太长时间而无法尝试满足您的请求后被中止”?

    是什么原因导致 请求在等待太长时间而无法尝试满足您的请求后被中止 这似乎是某种内部超时的结果 但我不知道这是在哪里配置的 我们当前正在使用自动缩放 该错误是由于任务队列中的任务数量临时增加而导致的 自动缩放不应该创建更多实例来处理该请求吗
  • 如何捕获两个标签之间的字符串

    我正在编写一个小书签以增强我的工作流程 我的部分工作是获取要放入电子邮件中的正确信息 我喜欢 JavaScript 和 jQuery 所以我正在研究一种使用这个库让我的工作更轻松的方法 我的目标是一个具有特别奇怪标记的网站 我需要捕获匹配的
  • 从 valueEventListener java 返回值

    我试图返回一个布尔值 但返回的值始终为 false 即本例中的 0 检查变量是一个实例变量 按下按钮时将调用以下函数 private boolean checkAnswerSubmission DatabaseReference answe
  • DAX、PowerBI 中的 RANKX() 问题

    我正在学习 DAX 并对 PowerBI 中的 RANKX 感到困惑 这是我的数据 这是我的措施 Rank RANKX ALL RankDemo Sub Category CALCULATE SUM RankDemo My Value 这是
  • 在类中调用 self 有什么作用?

    我注意到 Pytorch Lightning 的文档中提到 您可以通过调用从同一个类中的另一个方法调用前向方法self x 我无法找到任何有关其工作原理的信息 我一直以为你会使用调用该方法self forward 显然 它调用了forwar
  • 如何获取sql server 2005中两个日期之间的月份数

    我的 sql server 2005 表中有一个列应该保存员工的工作月数 由于我还有员工的聘用日期 因此我希望 months In Service 列成为计算列 现在如果我使用DATEDIFF month DateEngaged GETDA
  • 类模板参数推导不适用于别名模板

    考虑下面粘贴的代码 我定义了一个非常简单的类 编译器为其生成隐式推导指南 因此可以在没有显式模板参数的情况下构造它 然而 模板参数推导does not用于从简单的别名模板构造对象 该模板仅直接转发到目标类 template lt typen
  • 处理 php 中的新行

    我有 html 表单 用户可以将文本放入文本区域 我将文本区域的内容保存到MySQL数据库中 在TEXT类型的字段中 然后我在应用程序中的某个位置需要加载该文本并将其放入数组中 其中每个索引将是文本的一行
  • 如何在 CommandButton 单击时隐藏 p:panel

    我想实现这里写的东西 如何在命令按钮单击上隐藏和显示 p panel但看来 hide 不再可用 正确的做法是什么 I tried toggle 但它并没有隐藏它 我真的需要一些吗panelVisibile支持 bean 的属性和使用visi