CODEWITHSUNDEEP
ajaxjsfjsf-2tinymce
Menno
Menno

Reputation: 12641

TinyMCE's value in bean on second submit (using jsf.ajax.addOnEvent)

I have set up a basic testcase in which I'm experience some (to me) weird behaviour. When using the setup below, the typed value in the editor will only be visible by h:outputText on the second submit. E.g.

Note: there's a custom composite, please ask for code if needed (it simply creates textarea for TinyMCE and loads .js file from below)

index.xhtml

<h:body>
    <h:form>
        <mh:editor id="tinymceEditor" 
                   value="#{bean.value}" />
        <h:commandButton value="Ajax">
            <f:ajax execute="tinymceEditor" 
                    render="show" />
        </h:commandButton>
        <h:outputText id="show" value="#{bean.value}" />
    </h:form>
</h:body>

jsfhandler.js -> included on header in custom composite mh:editor

jsf.ajax.addOnEvent(function(data) {
    switch(data.status) {
        case "begin":
            tinyMCE.execCommand('mceRemoveControl',true,"tinymceEditor");
            tinyMCE.triggerSave();
            break;

        case "complete":
            tinyMCE.execCommand('mceAddControl',true,"tinymceEditor");
            break;

        case "success":            
            break;
    }
});

Bean.java

@Named
@RequestScoped
public class Bean {
    private String value = "test";
}

Upvotes: 2

Views: 1354

Answers (1)

BalusC
BalusC

Reputation: 1109292

The JSF ajax begin event is too late in order to take changes in form data into account. The ajax request is already prepared based on form data before this event.

Effectively, the sequence is as follows:

  • User enters input (and leaves field).
  • HTML DOM "change" event is triggered on input field.
  • User clicks submit button.
  • HTML DOM "click" event is triggered on submit button.
  • JSF prepares ajax request.
  • JSF ajax "begin" event is triggered on ajax request.
  • JSF sends ajax request.
  • ...

Basically, you should be doing tinyMCE.triggerSave() during the HTML DOM "click" event.

<h:commandButton ... onclick="tinyMCE.triggerSave()">

Or, better, during the HTML DOM "change" event of the tinyMCE textarea.

Upvotes: 2

Related Questions