如何从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 源代码。

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

<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>

Answer 2

client side:
call this function from your component
function send() {
var imageData = "Anand";
//call remotecommand
passToJSFManagedBean([ {
name : 'imagedata',
value : imageData
} ]);
//Prime faces component
<p:remoteCommand name="passToJSFManagedBean"
action="#{guestPhotoRegiCardMB.onCapture()}" process="@this" />

服务器端： onCapture(){ ... String imagedata = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("imagedata"); ...... }