so there is my problem.
I simply put a form in a dialog, when I open it for the first time it's all good, vuelidate works, errors if my fields are empty works too. I complete the form send it, it close the modal.
But then, when I open it to complete it again,errors are display for no reason :
Image of the error
<v-select
v-model="selectedDoctor"
:items="doctors"
item-text="username"
item-value="id"
:label="$t('components.homeCardTeleconsultation.doctor')"
:error-messages="
fieldErrors($v.selectedDoctor, $t('components.homeCardTeleconsultation.doctor'))"
return-object
/>
addTeleconsultant () {
this.$v.$touch()
if (this.$v.$invalid || this.isSaving) {
} else {
const query = {
xxxxx
}
this.$repositories.teleconsultations.create(query).then((reponse) => {
this.teleconsults = reponse.data
})
this.close()
}
It seems like vuelidate check if my fields are required when I open the modal but never the first time. I really don't understand what's going on so if someone have a solution or something...
Thanks !
Just one line this.$v.$reset()
I'm using the API successfully but encountered an error this morning with "OOPS! Something went wrong" sitting in the textbox and the user cannot type into it. I found the issue to be key related and fixed, however, this brought to light that some issue may arise and the user cannot complete because of this blocking. I'd like to be able to detect in javascript if there is some issue with the google.maps.places.Autocomplete object and not bind it to the textbox.
For anyone else wanting to do this.
Thanks to the folks for the idea over at:
Capturing javascript console.log?
// error filter to capture the google error
(function () {
var oldError = console.error;
console.error = function (message) {
if (message.toLowerCase().includes("google maps api error")) {
document.getElementById('<%=hdnGoogleSelected.ClientID %>').value = "DISABLE";
triggerUpdatePanel();
//alert(message);
}
oldError.apply(console, arguments);
};
})();
Mine is in an update panel so I triggered the update which sets the onfocus back to this.select(); for the textbox which effectively disables the autocomplete attempts.
tbAddress1.Attributes["onfocus"] = "javascript:this.select();";
Another option:
Google will return an error after about 5 seconds from loading.
"gm-err-autocomplete" class indicates any error with the autocomplete component.
You can periodically check for the error class google returns. I do it for 10 seconds after loading:
function checkForGoogleApiErrors() {
var secCounter = 0;
var googleErrorCheckinterval = setInterval(function () {
if (document.getElementById("AddressAutocomplete").classList.contains("gm-err-autocomplete")) {
console.log("error detected");
clearInterval(googleErrorCheckinterval);
}
secCounter++;
if (secCounter === 10){
clearInterval(googleErrorCheckinterval);
}
}, 1000);
}
I'm trying to create a popup (new window) that appears when a person clicks anywhere on the page , but the problem is that my script creates a new tab for every click . I created a blogspot account just for test : http://faqetest123.blogspot.al/
what should I do for that ?
(example of a site that is using the popup that im trying to create is :atdhe.so)
Here is my code :
<script type="text/javascript">
document.onclick=function()
{
window.open('http://www.facebook.com');
}
</script>
Thanks
The window.open() function returns a reference to that window. So you should be able to use that reference to navigate to a new URL at a later time. Something like this:
var myPopup;
document.onclick=function()
{
if (!myPopup) {
myPopup = window.open('http://www.facebook.com');
} else if (myPopup.closed) {
myPopup = window.open('http://www.google.com');
} else {
myPopup.location.href = 'http://www.stackoverflow.com';
}
}
Note that this also attempts to check if the user has closed the pop-up and re-opens it.
Edit: Based on your comments below, it looks like I misunderstood. In order to have the popup execute once and then not again, you can simply remove the event handler after processing it. Something like this:
document.onclick=function()
{
window.open('http://www.facebook.com');
document.onclick = null;
}
Simple question, I dont think its possible but hopefully someone can proof me wrong.
Is it possible to trigger fancybox without a click but rather if an event is met
Example
if(balance<1){
#fancyBoxOpen
}
else{
Continue to page
}
Yes, it's possible.
You could create a function that triggers fancybox like :
var triggerFancybox = function () {
var content = "Sorry, the balance is less than 1";
jQuery.fancybox.open(content);
}
And call that function when your condition is met like :
if (balance < 1) {
triggerFancybox();
}
See JSFIDDLE
.... or another with a hard-coded condtion
I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5