<f:ajax render="@all" /> 在生产环境中不起作用

Question

在一个 jsf 2.2 应用程序中，我有一个带有这个标签的表单

<h:inputTextarea id="code_editor_demo_1" value="#{testBean.question.code}" />

我使用 id "code_editor_demo_1" 以便名为 CodeMirror 的 javascript 插件将 textarea 格式化为：

现在有一个名为“下一步”的按钮用于导航

<h:commandButton id="nextBtn" styleClass="btn default col-sm-offset-1" value="Next" action="#{testBean.nextQuestion}" >
    <f:ajax render="@all" />
</h:commandButton>

nextQuestion() 方法做了一些处理，返回类型为 void。 现在在我的本地环境中，当我单击下一步时，页面将重新渲染以显示新值 + 插件 Codemirror 重新应用于文本区域。

然而，在生产环境中（应用程序托管在 Cloud Paas 上，DB 在 AWS 上），方法被调用但 UI 没有更新，重新渲染 @all 的 ajax 调用不会发生.

我试过了：

将@all 替换为<div jsf:id>.. 的两个特定ID 即可，新值正确显示除了 codemirror 插件未将<h:inputTextarea id="code_editor_demo_1" value="#{testBean.question.code}" /> 格式化为如上图所示.这就是我必须使用@all 的原因，因为它是在 textarea 上重新应用插件的唯一值。

注意：插件通过将 id 指定为 “code_editor_demo_1” 来工作

这是为什么呢？我该如何解决这个问题？谢谢。

更新

正如用户 @Kukeltje 建议的那样，我确实找到了在 textarea 上重新应用 codemirror 插件的 Javascript 方法。

<h:commandButton id="nextBtn" styleClass="btn default col-sm-offset-1" value="Next" action="#{testBean.nextQuestion}" >    
    <f:ajax render="pass-section ads-section" onevent="handleDemo1"/>    
</h:commandButton>

JS 处理的emo

var ComponentsCodeEditors = function () {

var handleDemo1 = function () {
    var myTextArea = document.getElementById('code_editor_demo_1');
    var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        theme:"ambiance",
        mode: 'javascript'
    });
}


return {
    //main function to initiate the module
    init: function () {
        handleDemo1();
    }
};
}();

jQuery(document).ready(function() {    
   ComponentsCodeEditors.init(); 
});

但是，包含此代码的页面称为 test.xhtml，并且它始终有一个名为 id 的参数。例如 test.xhtml?id=5 。

我现在遇到的问题是，在我点击下一个 Btn（即执行 ajax 部分）之后。 url 的 id 参数部分被删除，因此 test.xhtml?id=5 将 url 更改为 test.xhtml 。

知道如何解决这个问题吗？谢谢。

Answer 1

在Muzafar Ali 的这个答案https://stackoverflow.com/a/41794426/4255756 的帮助下，我已经解决了这个问题。这是我如何解决它 使用此内容创建了一个新的 Javascript 文件

function qsa(sel) {
    return Array.apply(null, document.querySelectorAll(sel));
}
function apply_code_mirror() {
    qsa(".code-mirror").forEach(function(editorEl) {
        CodeMirror.fromTextArea(editorEl, {
            lineNumbers : true,
            matchBrackets : true,
            styleActiveLine : true,
            theme : "ambiance",
            mode : 'javascript'
        });
    });
}

将文件添加为资源 + 对 js 方法的调用。

<h:outputScript library="custom" name="codemirror/apply-as-class.js" />
<script type="text/javascript">
    apply_code_mirror();
</script>

文本区域变成

<h:inputTextarea styleClass="code-mirror" value="#{display.question.code}" />

当我因为使用​​ ajax 更新而想在 textarea 上重新应用 codemirror 时

<h:commandButton id="nextBtn" styleClass="btn default col-md-offset-1" value="Next" action="#{testBean.nextQuestion}" >
    <f:ajax render="pass-section ads-section" onevent="apply_code_mirror"/>
</h:commandButton>