0

Ajax を正しく動作させるには多くの問題があります。私のxhtmlファイルの一部は次のとおりです。

<h:panelGrid columns="3">   
    <h:outputText value="Name of photometric system: "/>   
    <h:inputText size="20" id="namePhotSystem" value="#{filters.photometricSystem}"/>   
    <h:commandButton type="button" value="File Format" onclick="openPopup(570,570,'htmlPopup/fileFormat');" styleClass="longButton"/>   
    <h:commandButton value="Update Number of Filters">   
        <f:ajax event="mouseup" execute="@this" listener="#{filters.updateNumFilters}" render="fileTable"/>   
    </h:commandButton>   
    <h:inputText size="4" id="numFilters" value="#{filters.numUserDefined}"/>   
    <h:commandButton value="Clear List" styleClass="longButton">   
        <f:ajax execute="@this" listener="#{filters.reset}" render="numFilters fileTable"/>   
    </h:commandButton>   
</h:panelGrid>   

<h:panelGrid id="uploadDisplay" rendered="#{filters.showUploadList}">   
    <p:dataTable id="fileTable" value="#{filters.uploadList}" var="up">   
        <p:column>       
            <h:outputText value="#{up.fileNumb}"/>   
        </p:column>   

        <p:column>        
            <h:outputText value="#{up.fileName}"/>   
        </p:column>   

        <p:column>   
            <h:outputText value="#{up.fileMess}"/>   
        </p:column>   
    </p:dataTable>   
</h:panelGrid>

基本的には で数値を入力しid="numFilters"て ボタンをクリックすると"Update Number of Filters"、 で表が表示され、次へボタンをクリックすると、入力がゼロにリセットされ、表示が無効になるはずです。テーブル。今のところ、「Update Number of Filters」の前のコードについては気にしていません。id="fileTable"id="uploadDisplay""Clear List"id="numFilters"

Ajax を追加する前は、これはすべて正常に機能し、入力フィールドの数に対応するエントリの数がデータテーブルに表示され、上記の 2 つのボタンのいずれかをクリックすると、表示が正しく更新されました。ただし、画面全体が「反転」し、表示されている他のものが希望どおりにレンダリングされなくなります。実際、この xhtml ファイルは、表示されるメイン ファイルに含まれています。

さまざまな方法で Ajax を追加しようとしましたが、そのうちの 1 つがここにありますが、正しく動作させることができません。画面全体が「反転」するか、ページが正しく更新されないか、まったく更新されません。 .

私の Bean には、次のように起動される 2 つの Ajax アクションがあります。

public void updateNumFilters(AjaxBehaviorEvent e) {   
    // Code to set things up   
}   

public void reset(AjaxBehaviorEvent e) {   
    // Code for resetting things   
}

Ajax を追加する前は、これら 2 つのメソッドはActionEventそれぞれの場合に起動され、actionListener正しく機能する両方のコマンド ボタンがありました。これら 2 つのメソッドについては、 に変更ActionEventしましたがAjaxBehaviorEvent、それ以外は同じです。

誰かがこの問題を解決するのを手伝ってくれたら、とても感謝しています。私はまだ Ajax の使い方を学んでいますが、正しく動作しない理由とその修正方法を理解するのが難しいと感じています。

p:commandButton を試してみましたが、まだ動作しませんでした。

問題をより明確に示すために、表示されるコードの量を減らしました。私のxhtmlコードの関連部分は次のとおりです。

<h:panelGrid columns="3">   
    <h:selectOneMenu id="filters" value="#{filters.filterSet}" style="height:25px; width:350px;">   
        <f:selectItems value="#{filters.filtersMap}"/>   
    </h:selectOneMenu>   
    <h:outputText value="   " escape="false"/>   

    <h:commandButton id="filterSelect" value="Update Filter Set" styleCass="longButton">   
        <f:ajax listener="#{filters.selectFilterSet}" execute="filters" render="userDefined"/>   
    </h:commandButton>   
</h:panelGrid>   

<h:panelGroup id="userDefined" rendered="#{filters.showUserDefined}">   

    <!-- Code that is rendered here -->   

</h:panelGroup>

Bean の関連部分は次のとおりです。

@ManagedBean(name="filters")   
@SessionScoped  
public class MyFilterBean implements Serializable {   

    private boolean showUserDefined;   

    // Lots of other code   

    public void selectFilterSet(AjaxBehaviorEvent e) {   

        // Initialization code, and determine if showUserDefined is true or false.   

    }   

    public boolean isShowUserDefined() {   
        return showUserDefined;   
    }   

    // Lots of other code and various getters and setters   
}

コマンド ボタンをクリックすると、Ajax イベントが発生し、そのメソッドのコードが実行されますが、isShowUserDefined() からの戻り値に基づいてレンダリングされた xhtml コードを取得できません。

コードが非 Ajax であり、コマンド ボタンをクリックして通常のアクション リスナーを起動すると、「ページ フリップ」が発生することを除いて、完全に正しく動作しますが、これは望ましくありません。

誰かがこの問題を最終的に解決するのを手伝ってくれたら、本当に感謝しています.

お返事ありがとうございます。その間、h:commandButton を p:commandButton に変更せずに解決しましたが、コードの他の場所では PrimeFaces が使用されています。

これは私の xhtml コードのより完全なリストです。コードは以前に投稿され、現在は #### と #### のコメントの間で変更されています。ただし、ここのコードの上部近くに示されているように、メニューで選択された項目を Ajax で動作させるのに問題があります。Ajax タグによって指定されたコンポーネントを適切に更新するためのコマンド ボタン [フィルター セットの更新] を取得できません。もちろん、ボタンを削除して値変更リスナーを使用することもできますが、これでは問題は解決しません。

xhtml コードは次のとおりです。 

    <span id="filterDetails" style="display:none;">

    <!-- This displays any warning or error messages -->

    <h:panelGrid>
      <h:outputText value="The input data do not match - possibly a '$' was omitted for user defined filters&lt;br/&gt;"
                    styleClass="error" escape="false" rendered="#{filters.error}"/>
      <h:outputText value="You are not logged in - This only simulates file uploads" rendered="#{!login.loggedIn}"
                    style="color:red; font-weight:bold;"/>
    </h:panelGrid>

    <ui:fragment rendered="#{filters.showUserDefined}">

      <!-- This is the file upload option for user defined filters when showUserDefined is true -->

      <h:panelGrid id="fileUpload">
        <p:fileUpload fileUploadListener="#{filters.upload}" allowTypes="/(\.|\/)txt$/"
                      sizeLimit="10000" update="fileTable" description="Select Text File"
                      disabled="#{!filters.showUploadList}"/>
      </h:panelGrid>

      <!-- This controls the display of user defined filters when showUserDefined is true -->

<!--#### Start of previously listed code that has been changed ####-->

      <h:panelGrid id="photsys" columns="3">
        <h:outputText value="Name of photometric system: "/>
        <h:inputText size="20" id="namePhotSystem" value="#{filters.photometricSystem}"/>
        <h:commandButton type="button" value="File Format" onclick="openPopup(570,570,'htmlPopup/fileFormat');"
                         styleClass="longButton"/>
        <h:commandButton value="Update Number of Filters">
          <f:ajax execute="numFilters" listener="#{filters.updateNumFilters}" render="fileTable"/>
        </h:commandButton>
        <h:inputText size="4" id="numFilters" value="#{filters.numUserDefined}"/>
        <h:commandButton value="Clear List" styleClass="longButton">
          <f:ajax listener="#{filters.reset}" render="numFilters fileTable"/>
        </h:commandButton>
      </h:panelGrid>

      <!-- This generates a table of uploaded user defined filter when showUserDefined is true -->

      <h:panelGrid>
        <p:dataTable id="fileTable" value="#{filters.uploadList}" var="up" styleClass="#{filters.display}">
          <p:column>    
            <h:outputText value="#{up.fileNumb}"/>
          </p:column>

          <p:column>     
            <h:outputText value="#{up.fileName}"/>
          </p:column>

          <p:column>
            <h:outputText value="#{up.fileMess}"/>
          </p:column>
        </p:dataTable>
      </h:panelGrid>

<!--#### End of previously listed code that has been changed ####-->

    </ui:fragment>

    </span>

    <!-- This generates a table of labeled input fields for filters for Option 2 only -->

    <ui:fragment rendered="#{filters.opt2}">
      <table class="filterTable">
        <tr>
          <ui:repeat value="#{filters.filterCells}" var="item" varStatus="status">
            <f:verbatim rendered="#{status.index mod 5 == 0 and status.index gt 0}">
              &lt;/tr&gt;&lt;tr&gt;
            </f:verbatim>
            <td><h:outputText value="#{item.filterPair}" escape="false"/><br/>
            <h:inputText size="4" value="#{item.userInput}"/></td>
          </ui:repeat>
        </tr>
      </table>
    </ui:fragment>

どんなアイデアでも大歓迎です - どうもありがとう。

4

1 に答える 1

0

JSFの組み込み のp:commandButton代わりに使用できます。Primefaces commandButton は、デフォルトで Ajax で作業を行います。h:commandButton

<p:commandButton actionListener="#{filters.updateNumFilters}" 
update="@form" id="numFilterButton" value="Update Number of Filters"/>

基本的には、バッキング Bean でリスナーを呼び出し、その後@form必要な要素を更新します。もちろん、すべてが に含まれていることを確認してくださいh:form。コンポーネントのショーケース ページを見てください。

http://www.primefaces.org/showcase/ui/commandButton.jsf

于 2013-01-07T18:28:17.450 に答える