In the tabview, I use orientation="left", but I need it to be on the "top", when resizing the page screen < 768px.
I try to put a "resize" event on the page, but I can't find the element by id.
<p:tabView id="tabview" widgetVar="tabview" orientation="left">
<p:tab title="Orientation">
Test
</p:tab>
</p:tabView>
//<![CDATA[
window.addEventListener('resize', function (event) {
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
if (vw < 768) {//
document.getElementById('tabview').classList.remove('ui-tabs-left');
document.getElementById('tabview').classList.add('ui-tabs-top');
}
}, true);
//]]>
Skinning style:
.ui-tabs-{orientation}
Related
I'm using JSF 2.2 with PrimeFaces 5.3 under the GlassFish 4.1
Inside the application I use the approach to show the images from the database.
So that means I don't have an URL.
There're tons of example from this point of view, but I will paste here in order to be more useful.
Here the facelets
<p:graphicImage value="#{applicationScopedBean.imagesFromDb}" class="img">
<f:param name="imageId" value="#{actualAd.favouriteImageId}" />
<f:param name="cvlTimeStamp" value="#{now}" />
</p:graphicImage>
And here the Backing Bean
public StreamedContent getImagesFromDb() {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
// So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
return new DefaultStreamedContent();
} else {
// So, browser is requesting the image. Return a real StreamedContent with the image bytes.
String imageId = context.getExternalContext().getRequestParameterMap().get("imageId");
return new DefaultStreamedContent(new ByteArrayInputStream(imageManager.getById(Long.valueOf(imageId)).getContent()));
}
}
Here an example of a the generated HTML code
<img src="/myWebApp/faces/javax.faces.resource/dynamiccontent.properties?ln=primefaces&v=5.3&pfdrid=GgwXKejrBbRvnC%2Fxp98FzlaymhDf7Gb%2BEVoD%2BlqKVRmYUBBZeMmjKw%3D%3D&pfdrt=sc&imageId=23&myTimeStamp=Sun+May+15+19%3A19%3A08+CEST+2016&pfdrid_c=true">
By design, in order to use the gallery that comes from fancybox we need a code similar to the following
<a class="fancybox" rel="group" href="resources/bootstrap/css/images/single/1.jpg">
<img id="img_01" alt="" class="raised" src="resources/bootstrap/css/images/single/1.jpg" style="width: 100%" />
But using graphicImages with streams, I don't have the link needed in the href value.
There's a chance to retrieve the generated image url?
Basically I need to retrieve the generated string used to fill the src attribute of the img tag.
Is it possible to solve the problem?
Thank you!
The solution is to mark every p:graphicImage and his h:outputLink with a custom id.
<c:forEach items="#{myController.images}" var="img" begin="0" class="hidden-xs" varStatus="loop">
<h:outputLink id="aInsideLightbox#{loop.index+1}" class="fancybox imgCVLGalleryDetail hidden-xs" rel="group">
<p:graphicImage id="imgInsideLightbox#{loop.index+1}" value="#{applicationScopedBean.imagesFromDb}" class="img">
<f:param name="imageId" value="#{img.imageWrapper.id}" />
</p:graphicImage>
</h:outputLink>
</c:forEach>
and then in the front-end side when the page is ready
<h:outputScript library="js" name="external.js"/>
<script>
$(document).ready(function () {
setUrlInTheFancyboxLinkAndImage();
setTypeImageInFancybox();
});
</script>
and in an external .js file the following functions.
function setUrlInTheFancyboxLinkAndImage() {
for (i = 0; i < 20; i++) {
$imgToImprove = document.getElementById("imgInsideLightbox" + i);
if ($imgToImprove !== null) {
$aToImprove = document.getElementById("aInsideLightbox" + i);
if ($aToImprove !== null) {
$aToImprove.setAttribute("href", $imgToImprove.getAttribute("src"));
}
}
}
}
function setTypeImageInFancybox() {
$(".fancybox").fancybox({
type: 'image',
openEffect: 'none',
closeEffect: 'none'
}); }
Is it possible to block/disable the "Choose" button in FileUpload?
I use the p:fileUpload in advanced mode and set multiple="true". If I click on the Upload button to start the upload of all file, I want to prevent the adding of more files until all files are uploaded.
Version of PrimeFaces is 5.1.
Definition of p:fileUpload:
<p:fileUpload id="fileUpload" update=":form:uploadTable :msg :msgs" fileUploadListener="#{fileUploadBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" sizeLimit="3221225472" fileLimit="100" style="margin:15px 0px;width:900px;" />
Workaround with p:blockUI
I found a workaround with using of blockUI element. So on start the blockUI is show and after all uploads are completed the blockUI is hide. For that javascript code is needed.
<p:fileUpload id="fileUpload" update=":form:uploadTable :msg :msgs" fileUploadListener="#{fileUploadBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" sizeLimit="3221225472" fileLimit="100" style="margin:15px 0px;width:900px;"
onstart="setUploadFilesCount()" oncomplete="handleUploadComplete()" />
<p:blockUI block="fileUpload" widgetVar="wVarBFileUpload" />
Javascript Code:
<script type="text/javascript">
var fileCounter;
var numberOfFiles;
function setUploadFilesCount() {
PF('wVarBFileUpload').show();
fileCounter = 0;
numberOfFiles = $('.ui-fileupload-preview').size();
}
function handleUploadComplete() {
fileCounter++;
if(fileCounter == numberOfFiles) {
PF('wVarBFileUpload').hide();
}
}
</script>
You can use onstart and oncomplete to achieve this:
<p:fileUpload onstart="disableChoosing()"
oncomplete="enableChoosing()"
widgetVar="uploadWV"/>
<script>
function disableChoosing() {
PF('uploadWV').disableButton(PF('uploadWV').chooseButton);
PF('uploadWV').chooseButton.find('input[type="file"]').attr('disabled', 'disabled');
}
function enableChoosing() {
if(!PF('uploadWV').files.length) {
PF('uploadWV').enableButton(PF('uploadWV').chooseButton);
PF('uploadWV').chooseButton.find('input[type="file"]').removeAttr('disabled');
}
}
</script>
simply i need right click event in rich faces component specially in suggestionbox.
i need to give some functionality on mouse right click and also on left click.
I think it will be done with rich face's contextMenu but it not works in suggestionbox.
on every outputtext i want to pass id and show modal panel(right click and left click have different model panel to display).
jsf 1.2 + richfaces 3.3
my code
<h:inputText id="templateName" style="text-align:left" size="45"
value="#{templateMaintenanceBean.templateName}"
onblur="upperCase(this)" >
<sc:suggestionbox height="200" width="300" id="properySuggestBox" for="templateName"
oncomplete="testFunction();" nothingLabel="No Template Found" reRender="selectedMedicationDiv"
suggestionAction="#{templateMaintenanceBean.autocomplete}" var="result" border="2" minChars="0"
immediate="true" shadowDepth="10" >
<h:column>
<h:outputText value="#{result.templateName}" id="temp" />
</h:column>
</sc:suggestionbox>
in rich faces or in any faces no direct way to get right click event(except contextMenu)(which is not working here).
it can possible with only jquery :
Example for suggestionbox:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
var temp = $('#templateListForm\\:properySuggestBox div div table tbody tr td div table tbody tr td');
temp.live('contextmenu', function(ev){
ev.preventDefault();
//alert("Value:::"+$(this).parent().index('tr'));
//alert($(this).text());
if(ev.which == 3)
{
var templateName = $(this).text();
// handle Events(Link any button click) which we have to perform
}
});
});
</script>
in temp variable i get the suggestion box's table's tr.
I have this simple JSF button:
//Question Dialog
function deletedialog(button, a){
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
$("#form\\:deleterow").click();
// $('input[id$="deleterow"]').click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form"></f:ajax>
</h:commandButton>
<!-- the delete button -->
<h:button onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" >
<h:graphicImage name="small-hover.png" library="images" title="Delete" />
</h:button>
I want to create png image which will be the visual body of the button. The only thing that I will change will be the title of the button which I will set every time using the value attribute of the button. Is this possible? Now when I load the JSF page I see only empty button without label.
P.S 1 I get this result:
Use a command link that will wrap your image:
<script type="text/javascript">
function deletedialog(button, a) {
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
//$("#form\\:deleterow").click();
//using the hidden button click
document.getElementById('myForm:deleterow').click();
// $('input[id$="deleterow"]').click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
</script>
<h:form id="myForm">
<h:commandLink onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;">
<h:graphicImage name="small-hover.png" library="images"
title="#{someBean.imageTitle}" />
</h:commandLink>
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form" />
</h:commandButton>
</h:form>
Also, there is a good example of <h:graphicImage/> in mkyong site.
Based on your comments, it looks like you want to have a button with an icon. Also, the real action is performed by your hidden <h:commandButton>. so I recommend you to read this answer:
HTML / CSS How to add image icon to input type=“button”?
Your code would be like this:
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form" />
</h:commandButton>
<button type="submit" onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;"><img src="resources/images/small-hover.png" /> Delete</button>
Yes, you can mix basic HTML with JSF code, but read the link warning about this implementation on IE 6 browser clients.
I'd start from basics. Since you don't even see an image, when you right click on the browser window, and select 'view source' does it provide any meaningful information on whether the image is even being inserted onto the page? If you don't have the image path correct, it won't render the image on the page. That is the first thing to check and try to correct. (i.e. is the computer plugged in).
I need to show a outputText component only when the mouse is over a panel region. How can I achieve that ?
I tried using show() & hide() js functions with onmouseover event on panel but failed to achieve results.
If i understood correctly
<script>
$(document).ready(function(){
$("#something").mouseover(function (){
$("#myText").show();
})
$("#something").mouseout(function (){
$("#myText").hide();
}
)}
);
And your Panel
<p:panel id="something" >
<h:outputText id="myText" styleClass="hidden" value="hi i am hidden when is mouse is somewhere"/>
</p:panel>