I am loading some data via ajax in flexslider using callback function "after" but I noticed that sometime it fires twice. Anybody having this issue?
example code:
$('.flexslider').flexslider({
animation: "slide",
after: function(slider){
console.log('check fire');
}
});
At a glance, it sounds like you have more than one .flexslider on the page, or being rendered. 2 .flexslider's causes it to fire twice.
Related
After I reload the page I can't get console.log inside of the method, which means it is not getting executed, but after I make change in VSC and save it, the method executes.
I would like to add note that I have show/hide modal for the form where I try to pre-fill the values, does that makes problem? I tried removing the toggle and the result was the same.
Pls see screenshots
Some code below:
created() {
this.loadStationList();
this.loadStationGroups();
this.loadAllButtons();
this.loadAllQuidos();
this.pushButtonIds(); <---- I Try to execute this method on created but it gets executed after VS code change
},
pushButtonIds() {
for (const buttonId in this.filteredButtonList) {
this.stationButtons.push({
buttonId: this.filteredButtonList[buttonId].buttonListId,
quidoId: null,
input: null,
});
console.log(this.stationButtons);
console.log("Hello from component after saving change in VSC");
}
},
I tried to add the method to execute on beforeCreated but no success.
Just from the name, without knowing exactly, where filteredButtonList comes from, it looks to me that you call this function too early. Accessing DOM elements should take place when everything is actually in the DOM. Try moving the call into beforeMount() or even mounted(). https://vuejs.org/guide/essentials/lifecycle.html
I have some v-if props and currently to show divs with #click="tada = !tada". Instead, I would like the same divs that I'm currently triggering with the #click, to appear when the page finishes loading and occur only once.
I have tried onload, load and other things to know avail. Thanks for any help
EDIT:
I suspected it had to do with mounted but wasn't sure, so thank you for the hint.
Answer:
mounted: function () {
this.tada = true
},
You should use the mounted lifecycle hook in your main vue instance. This function is called when the component is rendered to the document for the first time. You can read more here.
I want to trigger an animation to run as soon as a component is mounted.
I've put the change inside a $nextTick function inside the mounted callback but it appears that it applies immediately before the component is first rendered, so the item appears in its final state without playing the animation to reach that point.
A fiddle of the problem is here: https://jsfiddle.net/j1oupq5e/1/
The relevant mounted function is as follows (width starts at 1px by default):
mounted() {
this.$nextTick(function(){this.width="100%"})
}
How can I make that animation start playing upon the component being mounted?
you can call setTimeout function :
mounted() {
let _this=this;
setTimeout(function(){
_this.$nextTick(function(){_this.width="100%"})
},0);
}
I have a component with a created method:
created() {
this.initMap();
}
The initMap is to initialize Google maps, depending on whether the URL segment corresponds to 'map' or not like so:
initMap() {
const pathname = location.pathname.replace(/\/+$/, '');
const segment = pathname.split('/').pop();
if (segment === 'map') this.showMap();
}
The above bit of code has a ShowMap method that performs a Vuex commit:
showMap() {
this.$store.commit('showMap');
}
This commit however never shows up in my Vue.js devtools(under Vuex).The components watching the Vuex store value that showMap is changing also never trigger.
If I do this however:
setTimeout(() => {
this.$store.commit('showMap');
, 100);
Everything works exactly as expected.
I tried this because the changes actually happen in my Vue.js devtools, because if I look under state I can see updated values.
The Vuex commit seems to fire too fast. Is there anything that can be done about this? Why is this happening in the first place?
I can even put a console.log() into the showMap commit and it works but it still does not get picked up in the devtools and without the setTimeout all of my watcher still don't properly trigger.
Since this was a while ago I am not 100% sure how I fixed this but I think it was by using $nextTick from Vue.js.
By waiting on nextTick you ensure that your call stack for DOM updates has been cleared. This prevents DOM updates that might rely on other parts of your DOM from firing too fast.
Obviously this is way more reliable than simply setting a setTimeout with a given number of let's say 100 milliseconds from my example because if your DOM does not update in time it might still pass this window.
If setTimeout fixed your issue I suggest trying $nextTick.
https://v2.vuejs.org/v2/api/#Vue-nextTick
is there a callback function (e.g. onComplete) for this? I would like to display a loader.
FB.XFBML.parse()
Yes, the second parameter is the callback function. For example this should work:
FB.XFBML.parse(document.getElementById('some_element'), function() {
alert('I rendered');
});
To parse the whole page by the same time
FB.XFBML.parse(document, function(){
alert('I rendered');
});
As of 2013 this does not work. Google Chrome will have "blinking" like buttons until it is finally rendered for me. This event is called before rendering is done.
To test this I try to hide the container before which has the like buttons (this works fine).
Then I test to show the container in the function() {
}); of the FB.XFBML.parse, that's when it looks like the newly loaded buttons are blinking.
Only having this issue in google chrome, but it proves that it's not after all like buttons have finished rendering in google chrome atleast.