How do I reinit Wordpress plugins dynamically using jS?

Question

I've implemented a PJAX (push-state AJAX) library on my Wordpress site to handle page transitions, when the page content is updated everything is loading as expected except for Wordpress plugins.

This is because I have reinitialised everything else using jS but I am stuck on how to reinitialise Wordpress plugins on demand without hard reloading the page.

When changing between pages, the PJAX library calls:

reinitWPPlugins();

Which triggers this function:

function reinitWPPlugins(){
   // reinit Wordpress Plugins <- this is what I need help with
}

Is there a way I can force certain plugins to reinitialise? Maybe a WP ajax hook? Or even a call to a PHP snippet in functions.php?

Answer 1

Figured it out, for anyone else who runs into this issue here is the top to bottom of it. The plugin itself was using DOMContentLoaded (as pointed out by @JacobPeattie), in the initialisation script of the plugin.

So I created a clone of the initialisation script without the DOMContentLoaded function wrapper and dumped it on the server in a permanent folder under a different file name (reinitPlugin.js).

Then when reinitGallery(); was fired from the Barba.js transition, I removed the CSS and jS from the DOM using .remove() and reappended the core style and script tags only on the page where the plugin content needed to be rendered (/gallery).

Simply doing the same 'swap/replacement' with the initialisation script didn't work correctly, no console errors it just didn't fire at all, the file itself was updated in the DOM just no dice. Due to Barba.js being PJAX, I decided to try an .ajax() function to load the script instead and to wrap it in setTimeout() to ensure it loaded after the other scripts had been rendered and voilà.

Working Code:

function reInitGallery() {
    jQuery("#plugin-css").remove();
    jQuery("#plugin-js").remove();
    jQuery("#plugin-js-after").remove();
    if (window.location.href.indexOf("gallery") > -1) {
      // reinit css
      jQuery('head').append('<link rel="stylesheet" id="plugin-css" href="/plugins/plugin/css/plugin.css" type="text/css" media="all" />');
      // reinit js
      var pluginReplacementScript = document.createElement('script');
      fwds3dcovReplacementScript.type = 'text/javascript';
      fwds3dcovReplacementScript.id = 'plugin-js';
      fwds3dcovReplacementScript.src = '/wp-content/plugins/plugin/js/plugin.js';    
      document.body.appendChild(pluginReplacementScript);
      // reinit js after
      setTimeout(function() {
        jQuery.ajax({
          url: '/wp-content/plugins/plugin/js/reinitPlugin.js',
          dataType: "script"
        });
      }, 300);
    }
}

Answer 2

Thanks you so much @van for sharing this. I was struggling with this for a while to use a WP Plugin with Barba page transition.

I would also like to share my implementation.

Before you try this, make a note of the #IDs that you want to remove and their URL or code, as this will be different for different applications/plugins.

    function reInitFormidableForms() {
    var domain = window.location.origin; // Dynamically gets the domain

    // Remove existing Formidable Forms CSS and JavaScript
    // jQuery('#formidable-css').remove(); // Uncomment this line if you need to remove CSS. I did not need to remove it.
    // Add any of trhe scripts you need to remove
    jQuery('#formidable-js-extra').remove();
    jQuery('#formidable-js').remove();
    jQuery('#formidable-js-after').remove();
    jQuery('#formidable_chat-js').remove();

    // Delayed re-adding of the scripts and styles
    setTimeout(function () {
        // Reinitialize CSS
        // jQuery('head').append('<link rel="stylesheet" id="formidable-css" href="' + domain + '/wp-content/plugins/formidable/css/formidableforms.css" type="text/css" media="all" />');

        // Reinitialize inline JavaScript
        // Keep them in the original order
        jQuery('body').append('<script id="formidable-js-extra">' +
            'var frm_js = {"ajax_url":"' + domain + '\/wp-admin\/admin-ajax.php","images_url":"' + domain + '/wp-content\/plugins\/formidable\/images","loading":"Loading\u2026","remove":"Remove","offset":"4","nonce":"937e963b0f","id":"ID","no_results":"No results match","file_spam":"That file looks like Spam.","calc_error":"There is an error in the calculation in the field with key","empty_fields":"Please complete the preceding required fields before uploading a file.","focus_first_error":"1","include_alert_role":"1"};' +
            'var frm_password_checks = {"eight-char":{"label":"Eight characters minimum","regex":"\/^.{8,}$\/","message":"Passwords require at least 8 characters"},"lowercase":{"label":"One lowercase letter","regex":"#[a-z]+#","message":"Passwords must include at least one lowercase letter"},"uppercase":{"label":"One uppercase letter","regex":"#[A-Z]+#","message":"Passwords must include at least one uppercase letter"},"number":{"label":"One number","regex":"#[0-9]+#","message":"Passwords must include at least one number"},"special-char":{"label":"One special character","regex":"\/(?=.*[^a-zA-Z0-9])\/","message":"password is invalid"}};' +
            '</script>');

        jQuery('body').append('<script src="' + domain + '/wp-content/plugins/formidable-pro/js/frm.min.js" id="formidable-js"></script>');
        jQuery('body').append('<script id="formidable-js-after">window.frm_js.repeaterRowDeleteConfirmation = "Are you sure you want to delete this row?";</script>');
        jQuery('body').append('<script src="' + domain + '/wp-content/plugins/formidable-chat/js/chat.min.js" id="formidable_chat-js"></script>');
    }, 300); // Delay in milliseconds, adjust as needed
}

Then Add the function to the Barba hook as necessary:

barba.hooks.after(() => {

    reInitFormidableForms();

});