【问题标题】:why jsf page(buttons) works only after refresh为什么jsf页面(按钮)仅在刷新后才有效
【发布时间】:2018-05-26 07:22:56
【问题描述】:

我正在处理一个 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

【问题讨论】:

  • 为什么这里的任何人都知道你的代码出了什么问题,而没有你发布它?
  • 代码运行正常,就是刷新页面的问题!
  • 浏览器执行你的代码来创建一个网页,如果你的代码只有在你刷新页面时才能工作,那么你的代码很可能不能正常工作。可能会发生一百万个问题,您基本上要求每个人猜测。而不是发布相关代码。
  • @johnny5: 最好总是要求minimal reproducible example(通过键入不带空格的 [ mcve ]。上面的代码是一个 'sn-p' 并且在此代码之外可能有很多原因可能导致这种行为。事实上,有多个 JSF Q/A 关于“第一次点击不起作用”或“只有第二次点击起作用”或类似...
  • @johnny5 How to Ask 通过添加 [ ask ] 来工作...

标签: jsf-2 managed-bean


【解决方案1】:

问题的继续: 我的问题是,当我点击一个按钮时,它一直处于按下状态,但是当我刷新页面时,它开始正常工作。

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

在 main.xhtml 中,我收集它们并在 head 部分定义样式表和脚本,我也使用 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>

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

【讨论】:

  • Waaaay 到 ypur 答案中完全不相关的代码。你看,原因完全在其他地方,你亲身体验了minimal reproducible example 的巨大优势
  • @Kukeltje 正如你所说,下次我会确保看到问题的所有方面。
猜你喜欢
  • 2019-04-21
  • 1970-01-01
  • 2017-05-13
  • 2014-05-14
  • 1970-01-01
  • 1970-01-01
  • 2021-08-23
  • 2018-01-15
  • 1970-01-01
相关资源
最近更新 更多