<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 插件将文本区域格式化为：

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

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

方法 nextQuestion() 进行一些处理并具有 return 类型的 void。现在在我的本地环境中，当我单击下一步时，页面将重新呈现以显示新值 + 插件 Codemirror 重新应用于文本区域。

但是在生产环境中（应用程序托管在云 Paas 上，数据库在 AWS 上），方法被调用但是 UI NOT 更新，ajax 调用重新渲染@all 不会发生。

我试过：

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

注意：该插件通过将 id 指定为 “code_editor_demo_1”

来工作

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

更新

正如用户 @Kukeltje 所建议的，我确实找到了 Javascript 在文本区域上重新应用 codemirror 插件的方法。

<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 处理演示

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

我已经在这个答案的帮助下解决了这个问题 by Muzafar Ali。这是我如何解决它使用此内容创建了一个新的 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>

<f:ajax render="@all" /> 不适用于生产环境

<f:ajax render="@all" /> does not work in production evnironment

ajax

jsf

jsf-2

jsf-2.2

codemirror