N
N
nastya_zholudeva2017-10-19 11:19:23
JavaScript
nastya_zholudeva, 2017-10-19 11:19:23

How to make jquery code events hung on elements only after all data on the server side is loaded?

I have jQuery code like this

function init() {
    initRelatedGoodsCarousel();
    tags();
..........
};

function initRelatedGoodsCarousel() {
        $('.owl-related').owlCarousel({
            loop:true,
            nav:true,
            dots:false,
            responsiveClass:true,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:4
                },
                1000:{
                    items:6,
                    margin:0,
                    autoplay:true,
                    autoplayTimeout:80000,
                }
            }
        });
}

function tags() {
    $('#list_tags li').each(function(){
        posDiv($(this));
        randomSize($(this));
    });
    $('.wrap_search_tag').hover(function(){
            $('#list_tags li').each(function(){
                animateDiv($(this));
            });
        },
        function(){
            $('#list_tags li').stop();
        });
........
}


In order for it to work after vue js builds the DOM, I used the following script in the component I needed

<script>
    import axios from 'axios'
    import callApi from '~/libraries/api.js'
    export default {
        name: 'Tags',
        data () {
            return {
                tags: []
            }
        },
        updated() {
            this.$nextTick(function () {
                setTimeout(() => {
                    init();
                }, 1000)
            })
        },
        created: function () {
            this.$nextTick(function () {
                callApi('tags', '', '').then((res) => {
                    this.tags = res.data.data;
                });
            })
        }
    }
</script>


that is, I updated()called the function init()from the jQuery code, and I loaded the data from the REST API using callApi()the created.

However, this approach does not work every time. If the page loaded a little faster / slower, then the events from the jQuery code did not have time to be hung. I even had to setTimeout()slow down the function with the help init(), but this also did not work every time.
I also tried to upload data from the API using Vuex store, but this also does not work all the time.

Perhaps someone faced such a problem? I will be very grateful.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question