Question

我正在研究一个JSF项目，目前一切正常，除了一件事：当我从左侧栏中选择一个页面时，它被正确加载，当我点击一个按钮时，按钮保持按下状态但未调用该动作。 button pressed but no action called 当我刷新页面并再次按下它时，它工作正常。这也发生在其他页面上。你知道为什么会这样吗？！

我在这里提供更多细节，如果需要的话！

托管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="(999) 999-9999? 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="(999) 999-9999? 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>

图片：image 1

image 2

image 3

image 4 : When i click on a button

Answer 1

问题的恢复：我的问题是，当我点击一个按钮时它会保持按下状态，但是当我刷新页面时它开始正常工作。

解决方案：我正在使用facelets，所以我有一个模板，你可以在这里看到template structure

在main.xhtml中我收集它们并在head部分定义styesheets和脚本，我也使用primefaces 6.x.

在我投资Chrome Console of 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>

我希望这会对某人有所帮助:)。

为什么jsf页面（按钮）仅在刷新后才起作用

1 个答案: