FeatureRequest: "Load more" Ajax via jQuery ajaxComplete

[wassereimer86]

Hello,

i´m new here from the dying Crayon Plugin. It was still working but i wanted to take the step and change to a new plugin befor i´m forced to do it.

So i installed your plugin, set it all up and replaced every Crayon Code with Enlighter. I´m pretty happy with it but i found a little issue. When using a "Load more" Button at the end of the page to load more articles Enlighter doesn´t work with the new loaded content.

Live Example: https://www.randnotizen.org/ - Scroll down to "MEHR BEITRÄGE LADEN" and click on it - From there on Enlighter won't load and show up.

I already tried disabling W3TC but it still doesn´t work.

Would be great if you have a solution for that.

Best regards

[AndiDittrich]

Hi @wassereimer86 ,

this issue is related to your plugin/theme which provides the "load more" functionality which is not part of WordPress Core. EnlighterJS needs to be initialized which is normally done on page load (domready event). by loading additional content to the page you have to trigger this hook manually to initialize the newly added content.

Enlighter has build-in support for Jetpack InfiniteScroll - the code is available here which can be used as skeleton/example to work with your plugin

best regards, Andi

[wassereimer86]

I was not able to get it fixed. But thank you for the information.

[AndiDittrich]

which kind of plugin/theme did you use to provide the "read more" feature ?

[wassereimer86]

This Theme: https://themeforest.net/item/avada-responsive-multipurpose-theme/2833226

[AndiDittrich]

they are using the standard jQuery ajaxComplete event:

jQuery(document).on('ajaxComplete', function(){
  console.log("complete")
});

just use the handler code to replace the one on line 57

[AndiDittrich]

// scope
jQuery(function(jq){
    // enlighterJS available ?
    if (typeof EnlighterJS == "undefined" || typeof EnlighterJS_Config == "undefined"){
        return;
    };

    // config objects
    var i =  Object.clone(EnlighterJS_Config);
    i.renderer = 'Inline';
    i.grouping = false;

    var b =  Object.clone(EnlighterJS_Config);
    b.renderer = 'Block';

    // helper to fetch all new elements
    var getNewElements = (function(s){
        // get all selected elements
        var e = document.getElements(s) || [];

        // filter new elements
        e = e.filter(function(el){
            // only visible elements are "new"
            return (el.getStyle('display') != 'none');
        });

        return e;
    });

    // re-initialize
    var _init = (function(){
        if (i.selector.inline){
            EnlighterJS.Util.Helper(getNewElements(i.selector.inline), i);
        }
        if (b.selector.block){
            EnlighterJS.Util.Helper(getNewElements(i.selector.block), b);
        }
    });

    // content update event
    jq(document).on('ajaxComplete', function(){
        _init.apply(window);
    });
});

will be added to the next beta of v3.9

[wassereimer86]

Great! Thank you very much! For now i replaced the existing plugin and activated it. :) Working fine. :)