How can I hide name of file uploaded using <p:fileUpload/> - file-upload

Hello after upload an image using p:fileUpload, it shows the name of the file like this Screenshot presents.
My issue is how can I hide the name BillGates.JPG after clicking on Choose Background.
--> So, I want to have after clicking on Choose Background and before clicking on Register this NewScreenchot instead of the first one.
Below is the file upload component to choose an image:
<p:fileUpload id="bck"
value="#{connectedUserBean.file}"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
label="Choose Background"
mode="simple"
skinSimple="true"
auto="true"/>
The button to save it is:
<p:commandButton value="Register"
update="ee" ajax="false"
style="width: 100px;height: 30px;font-size: 13px;background-color: #ff66d9;"
actionListener="#{connectedUserBean.upload}"/>
Have you please any idea about solving this. Thanks a lot.

Just add this to your css file:
.ui-fileupload-filename {
display: none;
}

Related

vue multiple prevent multiple clicks

Im using a vuetify data table and have added a td element to download a pdf on a separate browser tab. <td class="add-outline text-xs-left" style="cursor:pointer;" v-on:click.once.stop="openFile(props.item.pdfFile)" ><a target="_blank" :href="props.item.pdfFile" style="text-decoration: none; color: black;">{{ props.item.reportDate }}</a></td>
I have tried
v-on:click.once
v-on:click.stop
and
v-on:click.stop.once
my method only opens the new window
openFile (url) {
window.open(url)
},
When i click it downloads the pdf twice. what is the best way to prevent this from happening?
this is what my click event looks like using vue dev tools

Magnific popup - how to open it on mouseover?

I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.
Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa

map is not refreshing using gmaps4jsf

I am using gmaps4jsf jar file for getting dynamic marker on google map but once i click on submit button then getting whole data on web page, evem map also with dynamic marker but map marker is coming after refresh the page.
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
jsf component is refreshing fine only problem with google map..
You should use partiallyTriggered="true" for refresh the google map. as you said you are using gmaps4jsf jar so it will help and i'm updating your code so you can find here
<m:map id="map" partiallyTriggered="true" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>

Is there an easy way to make the fileupload work with IE11 without updating zk

In IE11 file upload button of ZK is not working.
I got few replies, It says after updating ZK it will fix the problem.
But we can't update ZK, So in this scenario is there any way to work out this problem any how.
If you can't upgrade ZK then you can try to "downgrade" the IE using "X-UA-Compatible" either as meta-tag or as a response header
here an example using the meta tag:
<?meta http-equiv="X-UA-Compatible" content="IE=10" ?>
<zk>
<fileupload label="upload" onUpload="alert(event.getMedia().getName())"/>
</zk>
and what it looks like in the browser (in the IE dev tools F12 you can check if the meta tag had an effect, you'll see that IE falls back to version 10):
http://screencast.com/t/ftheLA9Ud8
Finally I got the Solution.
AS IE 11 having problem to attach event for listening to open File chooser.
You just manually add the listener.
<button id="browsebtn" upload="true,maxsize=-1" visible="true" sclass="text">
<attribute w:name="doMouseDown_">
function (evt) {
}
</attribute>
</button>
Its simple and weird, However what I found is make the parent component as draggable="true"
<row draggable="true">
<div style="text-align : right;">
<label value="Image File:" />
</div>
<fileupload id="fileUpload" label="Upload" tooltiptext="Click to upload image file."/>
</row>
Now suddenly you will see your fileupload button in ZK started working correctly for IE11 as well.

VB.net clicking a submit button using Web Browser

I want to click the submit button of the webpage i am displaying in my Web Browser but it seems not to work at all here is my code:
WebBrowser1.Document.Forms(0).InvokeMember("image")
i was basing on the html code of the button i want to click which is:
<div class="buttonRow forward">
<input type="image" src="includes/templates/template_default/buttons/english/button_send.gif" alt="Send Now" title=" Send Now ">
</div>
did i miss something? i really need help.
Try setting this property
Webbrowser.AllowNavigation = True