我有Facelets文件:
<h:body>
<ui:composition template="....">
<h:form id="templateEditor">
<p:growl id="growl" sticky="true" showDetail="true" autoUpdate="true" widgetVar="growl"/>
<h:outputScript library="js" name="ckeditor.js" target="head" />
<body onload="onloadInput();"/>
<p:tabView>
<p:tab title="...." >
<p:datagrid id="..." />
<p:fileUpload id="fileUpload" skinSimple="true" label="..." auto="true" allowTypes="/(\.|\/)(jpg|jpeg|png|bmp)$/" sizeLimit="5000000"
invalidFileMessage="#..." fileUploadListener="..." update="pictureGrid :templateEditor:growl"/>
</h:panelGroup>
</p:tab>
</p:tabView>
</h:form>
</ui:composition>
</h:body>
的js。
<script>
function saveData(){
document.getElementById('templateEditor:documentContent').value = CKEDITOR.instances.editor1.getData();
}
function onloadInput(){
CKEDITOR.instances.editor1.setData(document.getElementById('templateEditor:documentContent').value);
}
function setHiddenField(){
document.getElementById("hiddenId").value = FIELDS[1].value;
}
/* jQuery --- displays invalid file upload message outsite tabView*/
(function($) {
var originalShowFunction = $.fn.show;
$.fn.show = function() {
this.trigger("show");
return originalShowFunction.apply(this, arguments);
};
})(jQuery);
$(document).on("show", ".ui-fileupload-content>.ui-messages", function() {
var $messages = $(this);
$messages.appendTo($messages.closest("form"));
});
$(document).on("show", ".ui-fileupload-content>.ui-messages", function() {
$(this).children().hide().find("li").each(function(index, message) {
var $message = $(message);
PF("growl").renderMessage({
summary: $(".ui-messages-error-summary", $message).text(),
detail: $(".ui-messages-error-detail", $message).text()
});
});
});
</script>
显示消息时,它会在<p:fileUpload>
组件内部显示。我想要实现的是,此消息将显示在选项卡的<h:form>
。
第二个问题是,如何使用<p:growl>
显示此消息。