Solved Calling function during data additons


  • Hi,

    I have a simple function below that adds Fancybox capabilities to images as below

        $(window).on('action:ajaxify.end', function (data) {
            this.$('a img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function () {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                   data.preventDefault()
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('blockquote img').remove();
            });
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]',
                    {
                        groupAll: true,
                    }
               );
        });
        });
    

    This works fine on page load, but as other data is appeneded to the dom during topic scroll etc, it is not firing - I believe because the data was not in the dom at the time, and therefore, no bindings.

    Is there a simple function that detects when data is being added so I can force this function to execute each time ? Essentially, I only need to make sure this line fires

    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
    

    Thanks


  • @julian thanks. I tried this but it doesn't seem to work.

    EDIT: Forgot document.ready 😞 - below works fine

    if (top.location.pathname !== '/login') {
        $(window).on('action:posts.loaded', function(data) {
            console.log("Loaded");
            $(document).ready(function() {
                $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                });
            });
        });
    }
    
  • NodeBB Admin

    You can listen for the posts loaded event.

    const hooks = await app.require('hooks');
    hooks.on('action:posts.loaded', function (data) {
        $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
    });
    

  • @baris Perfect. Thanks


  • @baris said in Calling function during data additons:

    You can listen for the posts loaded event.

    Is it possible to add this as part of my existing function, or does it need to be elsewhere ?


  • @phenomlab Call the hook @baris suggested, instead of action:ajaxify.end


  • @julian thanks. I tried this but it doesn't seem to work.

    EDIT: Forgot document.ready 😞 - below works fine

    if (top.location.pathname !== '/login') {
        $(window).on('action:posts.loaded', function(data) {
            console.log("Loaded");
            $(document).ready(function() {
                $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                });
            });
        });
    }
    
  • Topic has been marked as solved   julianJ   julian 

Suggested Topics

| | | |