javascript - 如何从JSF中的html组件向服务器发送数据

Question

我的页面中有一个 CKEditor。像这样

<h:head>
    <title>Facelet Title</title>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>

    <script language="JavaScript">

        function comeBack(){
            document.getElementById(editorValue).value = this.value;
        }

    </script>

</h:head>

<h:body >

    <h:form id="ckEditorForm" prependId="false" >

        <textarea id="editor1"
                  name="editor1"
                  onblur="alert(document.getElementById(editorValue).value = this.value);">

        </textarea>

        <script type="text/javascript">
            CKEDITOR.replace( 'editor1' );
        </script>

        <h:inputHidden value="#{editorBean.value}" id="editorValue" />

        <h:commandButton id="submit"
                         value="Submit"
                         action="welcome.xhtml" />


    </h:form>

</h:body>

@ManagedBean
@ViewScoped
public class EditorBean {

    private String value;

    /** Creates a new instance of EditorBean */
    public EditorBean() {

    } //end of constructor

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
        System.out.println("Content: "+value);
        System.out.println();

    }

} //end of class EditorBean

现在我希望用户按下提交按钮，然后将编辑器值保存到我的 bean 中。我发现这个论坛上有人建议使用隐藏字段技术，但它不起作用。难道我做错了什么？我怎样才能实现我想要的？

谢谢

Answer 1

您需要了解 JSF 是一个 HTML 代码生成器，并且 JavaScript 基本上只能访问 HTML DOM 树，而不能访问 JSF 源代码。

在浏览器中打开页面，右键单击并选择查看源代码。找到生成的 HTML <h:inputHidden>成分。它看起来像这样:

<input type="hidden" id="ckEditorForm:editorValue" name="ckEditorForm:editorValue" value="" />

请注意id属性值。您必须在 JavaScript 中准确使用此值 document.getElementById() :

document.getElementById("ckEditorForm:editorValue");

顺便说一句，使用 <h:inputTextarea> 更容易相反:

<h:inputTextarea id="editor1" value="#{editorBean.value}" />
<script>CKEDITOR.replace("ckEditorForm:editor1");</script>