2

私のホームページ (.xhtml) には、JSF ページに 4 つの h:inputText ボックスと 1 つの検索ボタン (h:commandButton) があります。

<h:inputText id="stlID"    value="#{searchSettlementTransRequest.stlmtTransId}" name='stlmt'> 
<h:inputText id="pmtID"    value="#{searchSettlementTransRequest.pmtTransId}"   name='pmt'>
<h:inputText id="AgentID"  value="#{searchSettlementTransRequest.AgentId}"      name='agnt'>
<h:inputText id="AgencyID" value="#{searchSettlementTransRequest.AgencyId}"     name='agncy'>

<h:commandButton id="tranSearchBtn" styleClass="valign first button-search sSearch" action="stlmtSubmit"/>

私の要件は次のとおりです。

  1. 最初の入力フィールドにデータを入力すると、他の入力フィールドは無効にする必要があります (つまり、2、3、4)。
  2. 2 番目の入力フィールドにデータを入力すると、他の入力フィールド (つまり、1、3、4) を無効にする必要があります。注: 同時に、ユーザーが 1 番目または 2 番目または 3 番目または 4 番目 (ユーザー動的) フィールドにデータを入力し、入力フィールドを除外する前に同じものを削除した場合、そのような場合はすべてのフィールドを有効にする必要があります。「検索」ボタンをクリックした後に応答（空または空でないデータ応答）が返されると、すべての入力フィールドが別の検索で有効になるはずです（ユーザーは4つのフィールドのいずれかにデータを入力できるようになりました）
4

2 に答える 2

1

各ページの読み込み後に入力を有効にしたい場合は、ページが読み込まれたことを表すフラグを設定し、リスナーを介した各 ajax リクエストの後にそのフラグを false に設定できます。また、ページの読み込みが完了した後にフラグが true に設定されるようにするには、preRenderViewイベントを使用できます。preRenderViewページが ajax リクエストではなく完全なリクエストによってロードされた場合に、フラグを true に設定するイベントに対してメソッドを実行する必要があるだけです。ページが ajax リクエストで読み込まれる場合、faces-requestパラメーターは「partial/ajax」に設定されます。

public static final String INITIAL_VALUE = ""; // I assume your fields are integer and they are initialized to INITIAL_VALUE in the first place    

public Boolean pageIsLoadedWithFullRequest = true;

public void preRenderView()
{
   //check whether the request is an ajax request or not  

Map<String, String> requestHeaderMap = FacesContext.getCurrentInstance().getExternalContext().getRequestHeaderMap();
if(!"partial/ajax".equals(requestHeaderMap.get("faces-request")))
{
    pageIsLoadedWithFullRequest = true;
}

また、ユーザーがフィールドの 1 つに書き込むたびに他の入力を無効にしたい場合は、blur イベントの後に ajax 呼び出しを行い、他の入力フィールドの状態を変更pageIsLoadedWithFullRequestし、リスナーでフラグを false に設定できます。

public void madeAjaxRequest()
{
     pageIsLoadedWithFullRequest = false;
}

public Boolean getStlIDEnabled()
{
return pageIsLoadedWithFullRequest || !stlmtTransId.equals(INITIAL_VALUE) && pmtTransId.equals(INITIAL_VALUE) && AgentId.equals(INITIAL_VALUE) && AgencyId.equals(INITIAL_VALUE);
}

public Boolean getPmtTransIdEnabled()
{
return pageIsLoadedWithFullRequest || stlmtTransId.equals(INITIAL_VALUE) && !pmtTransId.equals(INITIAL_VALUE) && AgentId.equals(INITIAL_VALUE) && AgencyId.equals(INITIAL_VALUE);
}

public Boolean getAgentIdEnabled()
{
return pageIsLoadedWithFullRequest || stlmtTransId.equals(INITIAL_VALUE) && pmtTransId.equals(INITIAL_VALUE) && !AgentId.equals(INITIAL_VALUE) && AgencyId.equals(INITIAL_VALUE);
}

public Boolean getAgencyIdEnabled()
{
return pageIsLoadedWithFullRequest || stlmtTransId.equals(INITIAL_VALUE) && pmtTransId.equals(INITIAL_VALUE) && AgentId.equals(INITIAL_VALUE) && !AgencyId.equals(INITIAL_VALUE);
}


<f:event type="preRenderView" listener="#{searchSettlementTransRequest.preRenderView()}"/> <!--This will ensure that preRenderView method will be called right before rendering of the view ends -->
<h:inputText  id="stlID"  value="#{searchSettlementTransRequest.stlmtTransId}" name='stlmt' disabled="#{not searchSettlementTransRequest.stlIDEnabled}"/> 
<h:inputText  id="pmtID"  value="#{searchSettlementTransRequest.pmtTransId}" name='pmt' disabled="#{not searchSettlementTransRequest.pmtTransIdEnabled}"/>
<h:inputText  id="AgentID"  value="#{searchSettlementTransRequest.AgentId}" name='agnt' disabled="#{not searchSettlementTransRequest.AgentIdEnabled}"/>
<h:inputText  id="AgencyID"  value="#{searchSettlementTransRequest.AgencyId}" name='agncy' disabled="#{not searchSettlementTransRequest.AgencyIdEnabled}"/>

これらを ajax で無効にしたい場合は、f:ajax コマンドを追加して、これら 4 つの inputText をすべてレンダリングする必要があります。例：

<h:inputText  id="stlID"  value="#{searchSettlementTransRequest.stlmtTransId}" name='stlmt' disabled="#{not searchSettlementTransRequest.stlIDEnabled}"> 
<f:ajax event="blur" 
 listener=#{searchSettlementTransRequest.madeAjaxRequest()}
 execute="stlID pmtID AgentID AgencyID"
 execute="stlID pmtID AgentID AgencyID"/>
</h:inputText>

無関係AgentId、AgencyID などの変数の最初の文字を大文字にすることはお勧めできません。これらを agentId および AgencyID に変更した方がよいでしょう。

乾杯

于 2013-01-24T07:38:57.157 に答える
1

これをjsfでのみ行いたい場合は、AJAX呼び出しを追加するだけです。以下のいくつかの提案:

の値を持つすべての<h:inputText属性に追加します。したがって、全体は次のようになります。disabled#{searchSettlementTransRequest.getDisabled('this_component_id')"

<h:inputText id="someId1" value="#{searchSettlementTransRequest.someValue}" name="stlmt" disabled="#{searchSettlementTransRequest.getDisabled('someId1')}"/>

次に、このリクエストを処理する Bean で、「stlmTransId、pmtTransId、AgentId、AgencyId」のセッターを変更して、この値が設定されていることをマークします。

public void setXXX(XXX xxx) {

  // your actual code comes here and at the end set that this component was changed
  actuallyChanged = id_of_input_text_component_corresponding_to_this_value_as_string;

}

もちろんString actuallyChanged、Bean にフィールドを追加する必要があります。メソッドgetDisabled(String compId)は外見を認識します:

public String getDisabled(String compId) {
  if (actuallyChanged.equals(compId)) {
    return "";
  else {
    return "disabled";
  }
}

すべてのコンポーネントに対して、次のような AJAX 呼び出しも追加します。

<f:ajax event="change" execute="@this" render="stlID pmtID AgentID AgencyID"/>

そのため、1 つのコンポーネントの値がいつ変更され、他のすべてのコンポーネントが無効になるかを知っておいてください。ただし、呼び出しが行われた後にそれらを有効にすることは不可能です。クライアント側のスクリプトがないと、選択またはフォーカスの取得などで簡単に使用できるようにすることができないためです。

コンポーネントを一時的に無効にしたい場合、たとえば、ユーザーが1つのコンポーネントを入力すると他のすべてが無効になりますが、それらのいくつかを選択すると、選択されたものが有効になり、最初にテキストを書き込むこれに含まれる他のすべてが無効になります。その場合、JavaScript などのクライアント側スクリプトを使用することをお勧めします。

JavaScript (jQuery) の問題に完全に一致するように更新します。

次のようなイベントをすべてのコンポーネントに追加します。

onkeyup="$('#thisComponentId').attr('disabled', false); $('#otherComponentId').attr('disabled', true); $('#otherComponentId').attr('disabled', true); "

コメントの後、次のように変更できます。

onkeyup="if ($('#thisComponentId').val() && $('#thisComponentId').val() == '') { // here set enable for all components } else { // here set disable for all other components }

これはあまり洗練された方法ではありませんが、うまくいくはずです。あるコンポーネントで入力を開始すると他のコンポーネントは無効になりますが、リクエストを送信するとすべてが再び有効になります。

于 2013-01-24T07:30:04.317 に答える