为什么JSF页面(按钮)仅在刷新后起作用

Question

我正在从事一个JSF项目，目前一切正常，除了一件事：当我从左侧栏中选择一个页面时，它是正确加载的，当我正确加载时单击按钮，按下按钮，但没有调用操作。按下按下，但没有呼叫的动作当我刷新页面并再次按时，它可以正常工作。这也发生在其他页面上。您知道为什么会发生这种情况吗？！

我在这里提供更多详细信息！

托管bean名称和范围：

@ManagedBean(name="ModerateurBean")
@SessionScoped

我的一个页面的代码：

 <ui:composition template="template/default/main.xhtml"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:b="http://bootsfaces.net/ui"
        >

<ui:define name="content">
<div class="container-fluid">
      <div class="row">
           <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">  

 <h:form id="form">
<p:growl id="msgs" showDetail="true" />

<p:commandButton process="singleDT" update=":form:ajouter" icon="ui-icon-plus" value="Ajouter" oncomplete="PF('ajouterDialog').show()" />
<p:dataTable id="singleDT" var="o" value="#{ModerateurBean.listMod}" selectionMode="single" selection="#{ModerateurBean.selectedModerateur}" rowKey="#{o.id_personne}" valueChangeListener="#{ModerateurBean.valChanged}" onchange="submit()">

        <p:column headerText="Nom ">
            <h:outputText value="#{o.nom}" />
        </p:column>
         <p:column headerText="Prénom ">
            <h:outputText value="#{o.prenom}" />
        </p:column>
         <p:column headerText="Cin ">
            <h:outputText value="#{o.cin}" />
        </p:column>
         <p:column headerText="Adresse ">
            <h:outputText value="#{o.adresse}" />
        </p:column>
       <p:column headerText="Numéro Téléphone ">
            <h:outputText value="#{o.numtel}" />
        </p:column>
    </p:dataTable>
     <p:commandButton process="singleDT" update=":form:voir" icon="ui-icon-search" value="Voir" oncomplete="PF('voirDialog').show()" />
     <p:commandButton process="singleDT" update=":form:modifier" icon="ui-icon-pencil" value="Modifier" oncomplete="PF('modifierDialog').show()" />
     <p:commandButton process="singleDT" update=":form:supprimer" icon="ui-icon-trash" value="Supprimer" oncomplete="PF('supprimerDialog').show()" />


  <!-- dialog voir admin -->
        <p:dialog header="Details administrateur" widgetVar="voirDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="voir" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">

                <h:outputText value="Nom" style="color:black"/>
                <h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
                <h:outputText value="Prénom " style="color:black" />
                <h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
                 <h:outputText value="Cin " style="color:black" />
                <h:outputText value="#{ModerateurBean.selectedModerateur.cin}" />
                 <h:outputText value="Adresse " style="color:black" />
                <h:outputText value="#{ModerateurBean.selectedModerateur.adresse}" />
                <h:outputText value="Numéro Téléphone "  style="color:black"/>
                <h:outputText value="#{ModerateurBean.selectedModerateur.numtel}" />

            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
      <!-- dialog modifier moderateur -->
        <p:dialog header="Modifier moderateur" widgetVar="modifierDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="modifier" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">

                <h:outputText value="Nom" style="color:black" />
                <p:inputText value="#{ModerateurBean.selectedModerateur.nom}" />
                 <h:outputText value="Prénom " style="color:black" />
               <p:inputText value="#{ModerateurBean.selectedModerateur.prenom}" />

                <h:outputText value="Cin " style="color:black"/>
                <p:inputText value="#{ModerateurBean.selectedModerateur.cin}" />
                 <h:outputText value="Adresse " style="color:black" />
             <p:inputTextarea rows="6" cols="33"  value="#{ModerateurBean.selectedModerateur.adresse}"/>
           <h:outputText value="Numéro Téléphone " style="color:black" />
               <p:inputMask id="phoneWithExt18"  value="#{ModerateurBean.selectedModerateur.numtel}" mask="[phone]? x99999"/>      

            </p:panelGrid>
           </p:outputPanel>
        <p:commandButton action="#{ModerateurBean.ModifierModerateur}" icon="ui-icon-pencil"  value="Modifier" update="@form"  />
     <p:commandButton process="singleDT" update="@form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('modifierDialog').hide()" />
    </p:dialog>
     <!-- dialog ajouter moderateur -->
        <p:dialog header="Ajouter moderateur" widgetVar="ajouterDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="ajouter" style="text-align:center;">
            <p:panelGrid  columns="2"  columnClasses="label,value">

                <h:outputText value="Nom" style="color:black" />
                <p:inputText value="#{ModerateurBean.nom}" />
                <h:outputText value="Prénom " style="color:black" />
                <p:inputText value="#{ModerateurBean.prenom}" />
                 <h:outputText value="Sexe " for="sexe" style="color:black" />
                 <p:selectOneMenu id="sexe" value="#{ModerateurBean.sexe}">
                 <f:selectItem itemValue="" itemLabel="  --selectionnez--  "></f:selectItem>
                 <f:selectItem itemValue="1" itemLabel="Homme"></f:selectItem>
                 <f:selectItem itemValue="2" itemLabel="Femme"></f:selectItem>
                 </p:selectOneMenu>
                  <h:outputText value="Cin " style="color:black" />
                <p:inputText value="#{ModerateurBean.cin}" />
                 <h:outputText value="Adresse " style="color:black"/>
                <p:inputTextarea rows="6" cols="33"  vvalue="#{ModerateurBean.adresse}"/>

                  <h:outputText value="Numéro Téléphone " style="color:black" />
                <p:inputMask id="phoneWithExt1" value="#{ModerateurBean.numtel}"  mask="[phone]? x99999"/>

            </p:panelGrid>
           </p:outputPanel>
        <p:commandButton  update="@form" icon="ui-icon-check" value="Sauvegarder"  action="#{ModerateurBean.AjouterModerateur}"  oncomplete="PF('ajouterDialog').hide()"  >
        <f:ajax render="singleDT" update="@form"/></p:commandButton>
        <p:commandButton process="singleDT" update="@form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('ajouterDialog').hide()" />
    </p:dialog>
  <!-- dialog supprimer moderateur -->
        <p:dialog header="Supprimer moderateur" widgetVar="supprimerDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="supprimer" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
           <h:outputText value="Id " style="color:black"/>
                <h:outputText value="#{ModerateurBean.selectedModerateur.id_personne}" />
                <h:outputText value="Nom" style="color:black"/>
                <h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
                <h:outputText value="Prénom " style="color:black"/>
                <h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />

            </p:panelGrid>
        </p:outputPanel>
        <p:commandButton value="Supprimer" action="#{ModerateurBean.SupprimerModerateur}" icon="ui-icon-trash" oncomplete="PF('supprimerDialog').hide()" update="@form" >
         <p:commandButton process="singleDT" update="@form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('supprimerDialog').hide()" />
        <p:confirm header="Confirmation" message="Etes vous sur?" icon="ui-icon-alert" />
        </p:commandButton>
    <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
        <p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
        <p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
    </p:confirmDialog>
    </p:dialog>

</h:form>

 </div>
  </div>
   </div>   

    </ui:define>


        </ui:composition>

图像：图像1

图像2

图像3

图像4：当我单击按钮

Answer 1

问题的简历：我的问题是，当我单击一个按钮时，它会保持按压，但是当我刷新页面时，它开始正常工作。

解决方案：我正在使用facelets，所以我有一个模板，您可以在此处看到模板结构

在main.xhtml中，我收集它们并在"头部"部分中定义样式和脚本，我也可以与PrimeFaces 6.x一起工作。

在我投资Chrome Chrome控制台的控制台之后，谷歌搜索的错误表明，问题是我手动添加的Primefaces和Jquery之间的冲突。

我所做的是删除所有jQuery脚本，然后重新开始工作。请参阅两个代码中的差异：

main.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>App Gestion d'Absence</title>
        </f:facet>
        <f:facet name="middle">
         <h:outputStylesheet name="bootstrap/css/bootstrap.css" />
         <h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
          <h:outputStylesheet name="css/dashboard.css" />
          <h:outputStylesheet name="metisMenu/metisMenu.min.css" />
          <h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
          <h:outputStylesheet name="morrisjs/morris.css" />
          <h:outputStylesheet name="morrisjs/morris.min.js" />
          <h:outputStylesheet name="morrisjs/morris.js" />
          <h:outputStylesheet name="font-awesome/css/font-awesome.css" />
          <h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
          <h:outputStylesheet name="vendor/morrisjs/morris.css"/>
<!--       <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->

          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
          <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
          <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
             <!-- jQuery -->

   <h:outputScript library="bootstrap" name="bootstrap.js" />
   <h:outputScript library="bootstrap" name="bootstrap.min.js" />   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>          

        <h:outputScript library="js" name="sb-admin-2.js" />
        <h:outputScript library="js" name="sb-admin-2.min.js" />
        </f:facet>
        <f:facet name="last">
        </f:facet>
    </h:head>

<h:body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
       <div id="header">
    <ui:insert name="header">
        <ui:include src="header.xhtml"/> 
    </ui:insert>
       </div>
 <div id="leftMenu">
    <ui:insert name="leftMenu">
        <ui:include src="leftMenu.xhtml"/> 
    </ui:insert>
       </div>


<div id="content">
  <ui:insert name="content">

      <!-- <div> 
        <ui:include src="content.xhtml"/> 
         </div>  --> 
  </ui:insert>
</div>
<div id="footer">
  <ui:insert name="footer">
    <ui:include src="footer.xhtml"/>  
  </ui:insert>
</div> 
    </h:body>
</html>

main.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>Gestion Absence ISMO</title>
        </f:facet>
 <link rel="shortcut icon" href="#{resources['images/favicon.ico']}" type="image/x-icon" /> 
        <f:facet name="middle">
         <h:outputStylesheet name="bootstrap/css/bootstrap.css" />
          <h:outputStylesheet name="css/dashboard.css" />
          <h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
           <h:outputStylesheet name="font-awesome/css/font-awesome.css" />
            <h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<!--          <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
        <h:outputScript name="bootstrap/js/bootstrap.js" />
        </f:facet>
        <f:facet name="last">
        </f:facet>
    </h:head>

<h:body>
       <div id="header">
    <ui:insert name="header">
        <ui:include src="header.xhtml"/> 
    </ui:insert>
       </div>
 <div id="leftMenu">
    <ui:insert name="leftMenu">
        <ui:include src="leftMenu.xhtml"/> 
    </ui:insert>
       </div>


<div id="content">
  <ui:insert name="content">

      <!-- <div> 
        <ui:include src="content.xhtml"/> 
         </div>  --> 
  </ui:insert>
</div>
<div id="footer">
  <ui:insert name="footer">
    <ui:include src="footer.xhtml"/>  
  </ui:insert>
</div> 
    </h:body>
</html>

我希望这对某人有帮助：）