Calling function during data additons

Solved Technical Support
  • #1

    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
    #2

    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");
    });
    
  • #3

    @baris Perfect. Thanks

  • #4

    @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 ?

  • GNU/Linux
    #5

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

  • #6

    @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");
                });
            });
        });
    }
    
  • julianJ julian has marked this topic as solved on

Suggested Topics


  • 0 Votes
    3 Posts
    184 Views

  • 0 Votes
    2 Posts
    239 Views

  • 0 Votes
    3 Posts
    1022 Views

  • 0 Votes
    3 Posts
    841 Views

  • 1 Votes
    25 Posts
    9308 Views

| | | |