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.
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 am trying to do a test with detox where a I tap a button, a modal shows and then I interact with the modal in certain way (not important for my question).
The issue that I'm having is that when I tap the button the modal shows, but the test gets stuck for some reason, so I cannot do anything else from that point on.
it('My test', async function () {
const buttonToOpenModal = element(by.id(buttonTestId));
try {
console.log('ABOUT TO TAP ELEMENT');
await buttonToOpenModal.tap();
console.log('ELEMENT TAPPED');
} catch (error) {
console.error(error);
}
}
});
In the code above, I can see ABOUT TO TAP ELEMENT log, but then I do not see the ELEMENT TAPPED nor the console error printed. After four minutes the test just times out.
I saw there is already a question on this page, but it does not have an accepted answer; the person who asked just changed the library, but that is not an option for me. There are also a couple of issues about this on detox repo but they have been discarded for some reason. I also saw another answer here where they talk about wrapping the content of modal in a View and putting the testID there; even though I didn't think this applied to me because I'm not even trying to interact with the modal right now, I tried it anyways, and it didn't work either.
Do you know a solution or at least a workaround for this?
I am trying to use jQuery Lazy Loading in my Laravel/Vue project but I am struggling to get an image to appear in my Vue component. I have the following img block which I thought would work:
<img v-if="vehicle.photo_path != null" :data-original="'/storage/vehicles/' + vehicle.photo_path" class="lazy" height="180" width="150"/>
I did find this other question on here - Static image src in Vue.js template - however when I try that method I get this: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
So I switched back to the v-bind method but all I am getting is a white box with a grey border - no image. If I v-bind on the src attribute however I can see the image correctly.
I know I have implemented the Lazy Loading plugin correctly as I can successfully call it elsewhere on my site (such as on a blade view), but I'm not sure where I am going wrong. Thank you.
Try moving the call to $("img.lazy").lazyload() into the mounted() method on your Vue instance. I just had a similar issue with Vue and jQuery Lazyload and that solved it for me. For example:
var app = new Vue({
el: ...
data() ...
computed: ...
methods: ...
mounted() {
$("img.lazy").lazyload()
}
})
I found many modules on the internet, but I like to avoid modules when I can. So I came up with something else, I don't know if it's the best, but it works and I didn't see any performances loss, I lazy load all the images when the page loads. You may prefer on scroll if you have lots of them, but I guess you'll figure this out if my answer fits your needs.
You'll need vueX for this, but I'll avoid the set up as this is not replying to your question.
If, like me, you have some kind of Index.vue component which main usage is to initiate all the child components (I use to do that for vue-router for instance), place a mounted() function in it :
mounted(){
const ctx = this;
// You could use this method, but if you reload the page, the cache of the browser won't allow your JS to trigger .onload method, so better use what's after.
/*window.onload = function(){
console.log('page loaded, can load images');
ctx.$store.dispatch('setPageLoaded', true);
}*/
let interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
ctx.$store.dispatch('setPageLoaded', true);
}
}, 100);
}
=> On the page load, I just set a page_load variable in the store to true.
Then, in any component you'd like to lazy load the image, just use 2 computeds (I used a mixin that I include in my components so I avoid repeating some code) :
computed: {
page_loaded(){
return this.$store.getters.getPageLoaded;
},
image(){
if(this.page_loaded){
console.log('starting loading image');
if(this.product.picture){
return resizedPicture(this.product.picture, this.width, this.height);
}else if(this.product.hasOwnProperty('additional_pictures') && this.product.additional_pictures.length){
return resizedPicture(this.product.additional_pictures[0], this.width, this.height);
}
return '';
}
}
}
page_loaded() goal is to return the store page_loaded variable I talk about.
image() goal is to actually load the image.
I used that for inline CSS background-image property, so my HTML looks like this :
<span v-if="page_loaded" class="image" :style="'background-image:url('+image+')'" :width="1200" :height="900"></span>
I hope it'll help, but as I said, feel free guys to tell me if it's not optimized.
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.
I need to pass an id to my jqmodal popup but I'm not sure the best way to do this.
On my trigger I have a data-id set so it is like this:
data-id="projects"
and then my code which calls the popup
$('.jqmWindow').jqm({
ajax:projects,
onShow:myFadeIn,
onHide:myFadeOut
});
My popup works fine, I just wonder how I can attach my id to pass it to the popup?
There is a bit of detail missing from your questions, but I'm assuming that you have a trigger (let's say an tag with data-id="projects" which should trigger your jqModal?
Take a look at jQuery Selector
Probably something like this.
Click
<script>
$(function () {
$('a[data-id="projects"]').click(function () {
$('.jqmWindow').jqm({
ajax:projects,
onShow:myFadeIn,
onHide:myFadeOut
});
})
});
</script>