2

I'm using Summernote with JSF, in this way:

<div class="form-group">
                <label>Texto</label>
                <h:inputTextarea value="#{cursoMB.questao.questao.texto}"
                    disabled="#{cursoMB.questao == null}"
                    styleClass="summernote form-control" />
            </div>

My JavaScript:

jQuery('.summernote').summernote({
     height: 300,                 // set editor height

      minHeight: null,             // set minimum height of editor
      maxHeight: null,             // set maximum height of editor

      focus: false                 // set focus to editable area after initializing summernote      
});

Everything works fine, but when I execute the following commandLink the summernote disappears transforming in a simple inputTextArea without design:

<h:commandLink actionListener="#{cursoMB.inserirQuestao()}"
                styleClass="btn btn-default" title="clique para inserir a questão">
                <f:ajax execute="@this" render="divTeste divQuestao"
                    onevent="function(data) { if (data.status === 'success') { 
    document.getElementById('inputTextOrdemQuestao').focus() } }" />
                <i class="fa fa-plus fa-fw"></i>
            </h:commandLink>

I noted that this happens because ajax is rendering my page again. How can I fix this?

Nissa
  • 4,636
  • 8
  • 29
  • 37
Shelly
  • 1,035
  • 5
  • 27
  • 51

1 Answers1

2

This problem is caused because the JavaScript-manipulated piece of HTML is being replaced by the original server-generated HTML without it being JS-manipulated once again afterwards.

You've basically 2 options:

  1. Simply don't ajax-update the JS-manipulated piece of HTML. Just explicitly update only the parts which really need to be updated, e.g. only the <h:message> component associated with the input field.

  2. Or, if that's not an option, e.g. because you need to redisplay the submitted value because you're using some converter which manipulates the submitted value, then you need to explicitly re-execute that JS-manipulation when that piece of HTML is ajax-updated. In your specific case, it boils down to calling jQuery('.summernote').summernote(...) once again during the success event.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • For me the only possible solution is number 2, because i should update this textArea, so number 1 is discarded. I will try and come back here. – Shelly Mar 02 '15 at 12:52
  • where can i put this jQuery ? I can't find the success event on ajax. How can i do it ? – Shelly Mar 02 '15 at 22:28
  • @Shelly: Uh, so you didn't wrote the code in the question yourself? You'd better not copypaste code without understanding any tiny part of it ... – BalusC Mar 02 '15 at 22:31
  • Sorry, my mistake i already implemented the "sucess" event on ajax. thanks BalusC – Shelly Mar 02 '15 at 22:36