关于f:ajax的onevent导致模型无法更新
onevent on f:ajax causes model to not getting updated
我在一个网站上添加了TinyMCE(JSF-2、Tomcat 7、Mojarra 2.1.6)。当用户点击"刷新"按钮时,编辑器中的html文本会被解析并打印在页面的其他地方。
我必须在Ajax请求之前关闭TinyMCE(否则我将使用两个编辑器)。TinyMCE文档中也建议这样做。
所以我在按钮上添加了一个f:ajax事件:
<h:commandButton value="#{msg['rt.refresh']}" action="#{updateTextAction.execute}" onclick="cleanupRte();">
<f:ajax event="action" execute="@this" render="@all" onevent="disposeTinyMce" />
</h:commandButton>
正确调用javascript函数:
function cleanupRte() {
tinyMCE.triggerSave();
return true;
}
以及onevent方法:
function disposeTinyMce(e) {
if(e.status == 'begin') {
tinyMCE.triggerSave();
var elem = document.getElementById("mainForm:rteExtAdr:input");
alert(elem.value);
tinyMCE.execCommand('mceRemoveControl', false, 'mainForm:rteExtAdr:input');
}
if(e.status == 'complete') {
}
if(e.status == 'success') {
tinyMCE.execCommand('mceAddControl', false, 'mainForm:rteExtAdr:input');
}
return true;
}
这将禁用编辑器并将其添加回页面。这很好用。
问题是,尽管警报显示了正确的值,但模型没有用文本字段中的值更新。该请求还包含文本字段中的"旧"值。
是否有什么东西会阻止ajax调用查看当前表单值?还是在执行onevent函数之前读取值?
如果我完全删除f:ajax标记,模型就会更新,但TinyMce编辑器在响应后会出现重复的问题。
init调用:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "sesamWysiwyg",
language : "de",
force_br_newlines : true,
force_p_newlines : false,
inline_styles : false,
forced_root_block : '', // Needed for 3.x
plugins : "autolink,lists,style,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,print,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",
formats : {
underline : {inline : 'u', exact : true},
strikethrough : {inline : 'del', exact : true}
},
theme_advanced_buttons1 : "bold,underline,strikethrough,|,cut,copy,paste,pastetext,pasteword,search,replace,|,undo,redo,|,code,removeformat,|,charmap",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
content_css : "css/content.css",
});
任何想法或建议都将是伟大的!
谢谢:)
这不是由onevent
处理程序函数引起的。这是由execute="@this"
属性引起的。@this
基本上意味着只有当前组件将被执行/处理。如果要处理整个表单,包括所有包含的输入元素,则需要使用execute="@form"
。
<h:commandButton value="#{msg['rt.refresh']}" action="#{updateTextAction.execute}" onclick="cleanupRte();">
<f:ajax execute="@form" render="@all" onevent="disposeTinyMce" />
</h:commandButton>
这样,模型将用所有处理过的输入元素的值进行更新。
或者,如果只想处理某些输入,则需要使用例如execute="input"
,其中input
是输入组件的ID。它可以使用一个以空格分隔的(相对)客户端ID字符串。
至于重新发明轮子,只需看看组件库。例如,PrimeFaces有一个<p:editor>
组件。这只是的问题
<p:editor value="#{bean.text}" />
<p:commandButton value="Save" action="#{bean.save}" />
没有任何自定义脚本的麻烦。
相关文章:
- Angular没有根据模型更新我的选择元素
- 如何使 NgJsTree 应用模型更新
- 控制器内部的scope函数不根据视图中的ng模型更新值
- Angularjs模型更新延迟
- 模型更新时触发ng显示
- 在特定模型更新后,如何让keystoneJS运行函数
- 挖空JS未从视图模型更新
- 使用Spine.Model.Ajax,如何在模型更新时处理响应的JSON中的额外属性
- 模型更新后,AngularJS 视图未更新
- 角度函数在模型更新之前触发:邮政编码检查器
- 使用 AJAX 更新的模型更新 AngularJS 视图
- 角度指令内的回调在模型更新之前调用
- AngularJS 视图在模型更新后不会更新
- 带有硬编码选项的 AngularJS 多选不会在模型更新时更新
- 角度JS模型更新不起作用
- 角度视图未根据模型更新
- AngularJS-在控制器中使用模型导致模型更新
- Angularjs:当ng模型更新时,选择不更新
- 当使用Knockout's的foreach绑定,do事件会在视图模型更新时自动清理
- 通过ng模型更新不同的$scope对象属性