使用 ajax 切换 inputTextarea 可编辑但无法提交其值

Question

我在第一次切换inputTextarea editable with Ajax时遇到问题，如何在切换后提交输入的值 UI 建立在 JSF 2 和 RichFaces 之上，支持 bean 目前是 @ManagedBean /@RequestScoped，包含所有必要的属性（indicator/reason）和相应的 get/set 方法。该应用程序在 IBM websphere 上运行。我首先从 here and 中获取示例。

myPage.xhtml 相关部分是

<h:form id="myPage">
    <td>
       <h:selectOneMenu value="#{myPage.indicator}">
         <f:selectItem itemValue="Y" itemLabel="YES" />
         <f:selectItem itemValue="N" itemLabel="NO" />
         <f:ajax render="reason" />
       </h:selectOneMenu>
    </td>
    <td><h:inputTextarea id="reason" value="#{myPage.reason}" disabled="#{fn:toLowerCase(myPage.indicator) != 'y'}">
        </h:inputTextarea>
    </td>
    <td>
        <h:commandButton value="Update" id="update"  
           action="#{myPage.update}">
        </h:commandButton>
    </td>
</h:form>

这里的功能是使用selectItem "indicator" 来切换inputTextarea "reason" 是否可编辑。我用<f:ajax>来渲染，打开GUI.

就可以直接看到效果

当我把"indicator"设置为是，"reason"变成可编辑的，然后我输入一些词，然后点击"upload"按钮（这是一个普通的post 方法包含将表单值提交到数据库的逻辑），但 "reason" 中的语句不提交到数据库。

我想是<f:ajax>设置渲染属性指向inputTextarea"reason"，这意味着当我切换selectItem时已经生成了一个请求"indicator"，但是这个request hold nothing，因为这里的顺序是先切换然后可以输入单词，所以 "reason" 在切换时不包含单词。 而作为这个 inputTextarea "reason"设置为 ajax 呈现，由 "upload" 按钮触发的正常提交表单方式也无法提交其值，即使我在输入文字后单击也是如此。这是正确的猜测吗？

如果这是正确的猜测，如何解决这个问题（例如如何在 ajax 切换可用后收集此 inputTextarea "reason" 值）？使用 <f:ajax render="reason" listener="..."> 创建支持 bean 侦听器方法（如果是，请显示我应该为此侦听器添加的一些详细操作）？或任何其他方式（例如，我应该使用 JavaScript 还是 JQuery 来解决）？如果我做错了什么，请帮我弄清楚（最初的目标是将 inputTextarea 切换为可编辑的 ajax 效果，然后提交稍后输入的值）。

Answer 1

也许这个问题有点模糊，我想在这里重新声明：有一个指示器控制相关的inputTextarea是否可编辑，但如果我只是使用Ajax render 属性来控制它，我不能使用 Ajax 来检索此 inputTextarea 中稍后输入的单词，因为 ajax 实际上是从客户端发送到服务器端的请求，当我切换指示器以制作 inputTextarea可编辑，请求已经发出，但是此时请求中没有包含任何文字，所以我卡在这里，找不到使用Ajax切换和稍后输入文字的方法。

如果有人用 JSF Ajax 方式提出想法，我们仍然欢迎。

我用javascript而不是Ajax修复了问题，修复的方式有点意思，模拟Ajax效果，需要触发不同情况下的javascript函数（相同javascript函数的组合用法）：

1.首先，javascript 根据指示器切换 "reason" inputTextarea，根据 'formname:element_id' 检索这些 DOM 元素，在我的问题中，已经将 "indicator" 显示为 h:selectOneMenu，"reason" 为 h:inputTextarea。

<script type="text/javascript">
   function handleDisabledOrNot() {
      var currVal = document.getElementById('myPage:indicator').value;
      if(currVal == "N") {
         document.getElementById('myPage:reason').disabled = true;
    } else {
         document.getElementById('myPage:reason').disabled = false;
    }
}</script>

2。然后使用 onclick 事件在指标上调用此函数

<td align="left"><!-- Use onclick event to control whether reason disabled or not -->
<h:selectOneMenu id="indicator" value="#{myPage.indicator}" onclick="handleDisabledOrNot()"> 
    <f:selectItem itemValue="Y" itemLabel="YES" />
    <f:selectItem itemValue="N" itemLabel="NO" />
</h:selectOneMenu></td>

3。最后在加载页面或在页面中工作时使用 onblur / onfocus 事件检查状态，以确保全面检测视图中的指示器状态，否则，无论哪种方式，它都会错过状态检查。例如，当第一次加载页面时，如果缺少onfocus事件检查状态，如果将鼠标移动到原因inputTextarea，无论是Y还是N，它最初都是可编辑的，为了避免这种情况，应该使用onfocus事件来检查，反之亦然使用 onblur 事件。

<!-- Use both onblur and onfocus event to detect indicator status full-scale on view -->
<h:inputTextarea id="reason" value="#{myPage.reason}" onblur="handleDisabledOrNot()" onfocus="handleDisabledOrNot()">
</h:inputTextarea></td>

最终呈现出与Ajax渲染方式相同的效果。正如我在问题中引用的 link，我知道在 JSF 中，最好的解决方案是使用 Ajax 来处理支持 bean，但是我不知道如何在 Ajax 之后实现切换，如何在输入后输入的 inputTextArea 中收集数据，我现在无法通过 Ajax 方式提供解决方案。所以，仍然欢迎一些基于Ajax的想法，如果没有，就在这里展示纯粹的javascript方式。

使用 ajax 切换 inputTextarea 可编辑但无法提交其值

Toggle inputTextarea editable with ajax but can not submit its value

html

ajax

jsf

jsf-2