javascript - 禁用 during page loading

Question

我有一个<p: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">具有属性 onclick="return false;" 的 HTML 元素。此属性可防止用户在单击此元素后重定向到目标 URL。

这就是这个 JavaScript 的原因:

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

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