I have Facelets file:
<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>
When message is displayed, it apears inside <p:fileUpload> component. What I want to achieve is, this message to be displayed outside the tab, in the <h:form>.
Second question would be, how to display this message using <p:growl>.
