更改文本区域值的命令按钮

Question

In order to answer this other question ( Use Froala Editor with JSF ), I need to pass the content of a div similar to this:

<div class="fr-view">
  Aaaaaaaaaaaaaaaaaa
</div>

To the value of the following inputTextarea (#{newArticleController.body}) when the commandButton is clicked.

<h:form id="formId">
  <h:inputTextarea id="articleBody" value="#{newArticleController.body}" styleClass="articleTextarea"/>
  <h:commandButton value="Save" action="#{newArticleController.newArticle}"/>
</h:form>

I have tried the following but it doesn't work:

   <script>
     function updateBody() {
       var body = document.getElementById('formId:articleBody');
       var div = $('.fr-view');
       body.value = div.value;
     }
   </script>

   ...

   <h:form id="formId">
     <h:inputTextarea id="articleBody" value="#{newArticleController.body}" styleClass="articleTextarea"/>
     <h:commandButton value="Save" action="#{newArticleController.newArticle}" onclick="updateBody();"/>
   </h:form>

I always receive null in the body variable. Any idea on how to solve it?

Answer 1

Sine your $('.fr-view') is a div $('.fr-view') will not work. To get the text or innerHtml of a div you need to use $('fr-view').html() or $('fr-view').text()

Answer 2

Finally I solved it without the onclick javascript code. I was putting pt:name="content" in the inputTextarea. When I removed it, it worked.