Question

我有<p:menuitem>将用户引导到新页面，并且完全加载页面需要一些时间。现在，当用户在页面加载期间再次单击menuitem时，我遇到了这个问题，应用程序被破坏（说它找不到要更新的某个组件）。我还没有找到错误的原因，但我认为在页面加载完成之前阻止用户再次点击相同的menuitem是有意义的，我已经尝试了几种方法但是无法解决它。我目前要去的地方如下：

<h:form id="maninmenuform">
    <script type="text/javascript" >
        $(document).ready(function(){
            $("#ssss").click(function(){
                $(this).attr("disabled", true);
            });
        });
    </script>

....
 <p:menuitem id="ssss" value="#{msg['capacity.headline']}"
                       icon="ui-icon-note"
                       url="/page/workload/workloadOverview.xhtml"
                       rendered="#{loginBean.projectAccess()}" />

有人可以看看，看看那里缺少什么？非常感谢！

Answer 1

从我看到的情况来看，你试图通过在页面满载后附加一个onclick事件来禁用它。

我认为您应该从代码开头将其设置为“已禁用”：<p:menuitem disabled="true" />

然后添加一些JavaScript以删除已禁用的属性：

$(document).ready(function () {
    $("[id='form:ssss']").removeClass("ui-state-disabled"); 
});

form:s个<h:form> ID后跟<p:menuitem>个ID。

编辑：

上述方法无法恢复点击事件和菜单导航。

要处理此问题，您需要从disabled="true"删除<p:menuitem>并替换为<p:menuitem onclick="return false">。

然后，用以下代码替换JS：

$(document).ready(function () {
     $("[id='form:s']").removeAttr('onclick');
});

编辑2：

此代码：

<h:form id="form">
  <p:menu>
    <p:menuitem id="s" value="Menu" onclick="return false" />
  </p:menu>
</h:form>

生成此HTML：

<form id="form" name="form" method="post" action="/ogma/admin/test" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="form" value="form">
  <div id="form:j_idt36" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix" role="menu">
    <div tabindex="0" class="ui-helper-hidden-accessible"></div>
    <ul class="ui-menu-list ui-helper-reset">
      <li class="ui-menuitem ui-widget ui-corner-all" role="menuitem">
         <a tabindex="-1" id="form:s" class="ui-menuitem-link ui-corner-all" href="#" onclick="return false;"><span class="ui-menuitem-text">Menu</span></a>
      </li>
    </ul>
  </div>
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="8002603806970497135:4662901914508572407" autocomplete="off">
</form>

正如您所看到的，<p:menuItem>会生成一个<a id="form:s"> HTML元素，其属性为onclick="return false;"。此属性可防止用户在单击此元素后重定向到目标URL。

这就是为什么这个JavaScript：

$(document).ready(function () {
     $("[id='form:s']").removeAttr('onclick');
});

允许元素在页面完全加载后再次处理点击次数。

Answer 2

在loginBean中定义一个标志。

private boolean menuItemEnabled;

public boolean isMenuItemEnabled()
{
    return menuItemEnabled;
}

最初禁用menuItem：

<p:menuitem id="ssss" disabled="#{loginBean.menuItemEnabled}" ... />

在将启用menuItem的页面上编写remoteCommand。

<p:remoteCommand name="enableMenuItem" action="#{loginBean.enableMenuItem}"
    process="@this" render=":maninmenuform:ssss"/>

在loginBean中编写action方法。

public void enableMenuItem()
{
    menuItemEnabled = true;
}

在页面加载时调用remoteCommand。

$(document).ready(function () {
    enableMenuItem();
});

在页面加载期间禁用<p：menuitem> </p：menuitem>

2 个答案: