从 JavaScript 获取价值到 Bean答案

【问题标题】：Getting value from JavaScript to Bean从 JavaScript 获取价值到 Bean
【发布时间】：2017-02-27 03:42:53
【问题描述】：

我想从 javascript 为托管 bean 的属性设置值。以下是所需文件：

页面sample.xhtml：

       <h:body>
          <form style="width: 800px; margin: 0 auto;">
              <div class="adjoined-bottom">
                 <div class="grid-container">
    	        <div class="grid-width-100">
    	           <div id="editor">
    	              <h1>Hello world!</h1>
    		   </div>
    		</div>
    	     </div>
              </div>
              <div id="content2" style="display: none">
    	     <p>The number of <code>change</code> events: <strong><span id="changes"></span></strong>.</p>
    	  </div>
    	  <h:form>
    	     <p:commandButton value="Post" 
    			      action="#{editorController.save}" ajax="false"
    			      style="width: 50px;height: 30px;font-size: 13px"
    		              styleClass="btnClass"/>
    	  </h:form>
    	  <h:outputText id="editorcontent2" value="#{editorController.content}" escape="false"/>	
    	     <script>
    	        (function () {
    	           var changesCount = 0;
                       var editor2 = CKEDITOR.replace( 'editor', {
                       removePlugins: 'sourcearea'
    					} );
                       editor2.on( 'change', function ( ev ) {
                           changesCount++;
                           document.getElementById( 'content2' ).style.display = '';
                           document.getElementById( 'changes' ).innerHTML = changesCount.toString();
                           document.getElementById( 'editorcontent2' ).innerHTML = editor2.getData();
    					} );
    				})();
                 </script>
                 <script>
                    initSample();
                 </script>
          </form>
   </h:body>

托管bean上保存的方法EditorController.java：

public void save()
{   
   ClassPathXmlApplicationContext ctx = new ClassPathXmlApplicationContext("spring-configuration.xml");
   eDao = ctx.getBean(FacebookerDao.class);
   editor.setEditorContent(content);
   eDao.saveEditor(editor);
}

h:outputText 成功显示了编辑器的内容，但是在单击按钮 Post 后，数据库中的字段 editorContent是NULL。

您有任何解决此问题的想法吗？非常感谢。

【问题讨论】：

标签： javascript java

【解决方案1】：

你可以试试这个：

<div id="content2" style="display: none">
				<p>The number of <code>change</code> events: <strong><span id="changes"></span></strong>.</p>
			</div>
			<h:outputText id="editorcontent2" value="#{editorController.content}" escape="false"/>	
			<h:form id="formId">
			    <h:inputHidden id="x" value="#{editorController.content}" escape="false"/>
			    <h:commandButton value="submit" onclick="getEditorData()" action="#{editorController.save}" />
			</h:form>
		
		
			<script>
				(function getEditorData() {
					var changesCount = 0;
					var editor2 = CKEDITOR.replace( 'editor', {
						removePlugins: 'sourcearea'
							
		
					} );
					
					editor2.on( 'change', function ( ev ) {
						changesCount++;
						document.getElementById( 'content2' ).style.display = '';
						document.getElementById( 'changes' ).innerHTML = changesCount.toString();
						document.getElementById( 'editorcontent2' ).innerHTML = editor2.getData();
						document.getElementById("formId:x").value = editor2.getData();
					} );
					
				})();
			</script>

HTH

【讨论】：