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
Related
I have a Vue.js app that loads content in the created() method. I use a v-if tag to hide all of my UI until that content is loaded and ready to go. It works fine on the initial load, but if a user were to hit refresh in Chrome then the app displays (flashes momentarily) content that would not otherwise be displayed (based on the data being loaded in created).
From what I understand using the v-if tag, with a flag from my vuex store that indicates when the load has completed, is the proper way to hide content until I am ready to display it.
How can I avoid having the content flash on the refresh?
Vue.JS has solved this using the v-cloak directive. (see docs)
You add the v-cloak directive to your application's root element:
<div id="app" v-cloak>
...
</div>
Then add this CSS rule to your application's stylesheet:
[v-cloak] {
display: none;
}
Everything within the app div will then be hidden until Vue has initialized.
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
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;
}
I have a set of buttons that each can open the modal. The first one opens fine, but if you don't close the modal the second one fails with 'Uncaught TypeError: undefined is not a function.
I have a bunch of links:
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/forums-modal.html">Open Modal A</a>
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/facebook-modal.html">Open Modal B</a>
I tried: Twitter Bootstrap open modal over an already opened modal
Not a big help either. Hiding a previous modal when opening a new one.
Yes I have jquery loaded before bootstrap.
The fix for the first error 'Uncaught TypeError' was to upgrade from bootstrap 3.1.1 to 3.2.0. Once this is done, clicking on the second div, the modal closes rather than staying open with the new content.
To update the content, I went down the ajax path. These modals are themselves loaded by ajax (mobile-first and they aren't mobile). Therefore, in a similar vein to Reload Content in Modal Twitter Bootstrap I used the following code:
$('body').on('click', 'a[data-target=#modal-form]', function(ev) {
console.log("clicked");
ev.preventDefault();
var target = $(this).attr('href');
$('#modal-form').load(target, function() {
$('#modal-form').modal("show");
});
});
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