Question

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

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

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

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

<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将重新应用于textarea。

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

我试过了：

使用两个特定的<div jsf:id>.. ID来替换@all，新值正确显示 EXCEPT ，即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 handledemo

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部分）之后。网址的id参数部分被删除，因此网址不是 test.xhtml？id = 5 ，而是更改为 test.xhtml 。

任何想法我该如何解决这个问题？感谢。

Answer 1

我已在https://stackoverflow.com/a/41794426/4255756的答案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>

textarea成为

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

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

<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”>在生产环境中不起作用

1 个答案: