Как отправить данные на сервер из html-компонента в JSF

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

Теперь я хочу, чтобы этот пользователь нажал кнопку отправки, после чего значение редактора было сохранено в моем бине. Я нашел эту технику скрытого поля, предложенную кем-то на этом форуме, но она не работает. Я делаю что-то неправильно? Как мне добиться того, чего я хочу?

Спасибо

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>

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");.....}