Hi, I have an a4j:commandButton to close a rich:editor. Before closing the editor, I want to display a dialog to ask if the user wants to save the modified content. The following is my simplified code:

<script type="text/javascript">
function saveContent() {
 if (tinyMCE == null || tinyMCE.activeEditor == null || tinyMCE.activeEditor.getDoc() == null) {
 return;
 }
 if (tinyMCE.activeEditor.isDirty()) {
 var answer = confirm("The content has been changed. Do you want to save?");
 if (answer == true) {
 tinyMCE.triggerSave();
 saveData();
 }
 }
}
</script>

<a4j:form ajaxSubmit="true" style="margin:0px; padding:0px;" >
<a4j:jsFunction action="#{contentView.testSave}" name="saveData" ajaxSingle="true" eventsQueue="contentQueue" oncomplete="alert('completed');"/>

<a4j:region>
 <a4j:commandButton value="Close"
styleClass="content_button"
disabled="#{contentView.openedNode.editorViewMode}"
action="#{contentView.openedNode.closeAction}"
rendered="#{contentView.openedNode.htmlContent}"
onclick="saveContent();" reRender="mainFrame">
 </a4j:commandButton>
</a4j:region>

<rich:editor id="htmlEditor" value="#{contentView.contentString}" theme="advanced"
readonly="#{contentView.openedNode.editorViewMode}"
rendered="#{contentView.openedNode.htmlContent}">
</rich:editor>
</a4j:form>

The saveData function is called as testSave() action is invoked. However, setcontentString() are not called and modified content is not saved. If I remove <a4j:region> tag around the a4j:commandButton, the content will be saved everytime I click on the button.

Any help will be appreciated,
-ZJ