17: Partial refresh reference

Current versions of Beaver Builder plugin employ Partial Refresh for layout, in which only the row, column, or module that you are currently editing is updated when you click Save (or a preview refresh is triggered). However, custom module developers need to enable this for their modules and be sure that they are compatible for partial refresh to work. Custom modules that do not support partial refresh will trigger a full layout refresh when edited.

Partial refresh compatibility

info

If your module doesn't use JavaScript, you can skip this section and enable partial refresh.

To make your custom modules compatible with partial refresh, any JavaScript written for them must only run for the current instance that is being edited. If it doesn't, then when your module is refreshed, the JavaScript will run for all instances on the page (if any are present) potentially causing things to break.

Here's an example of JavaScript code that is NOT partial-refresh compatible and runs for all instances on the page.

$( '.my-module-class' ).each( function(){
    // Do something to each module on the page.
} );

As you can see, that code will run the same function for each module on the page, even when just a single module is updated.

Here's an example of JavaScript code that is partial-refresh compatible and only runs for an individual instance. Note: this should be in frontend.js.php.

$( '.fl-node-<?php echo $id; ?>' ).css( 'background', '#ffffff' );

That code will only run for a module with a specific ID.

At this point, you may be wondering how you can accomplish this without having to use frontend.js.php for everything. We typically do that by using frontend.js.php for the instance code and frontend.js to house the bulk of the logic. Here's an example:

In frontend.js.php , we instantiate the module's JavaScript logic for the individual instance. Any number of parameters can be passed here. We're just using id for this module.

(function($) {
  $(function() {
    new FLBuilderAccordion({
      id: '<?php echo $id ?>'
    });
  });
})(jQuery);

In frontend.js we build the FLBuilderAccordion object, which has all of the module's JavaScript logic and uses the parameters passed in < frontend.js.php (some code omitted for brevity).

(function($) {

  FLBuilderAccordion = function( settings ) {
    this.settings   = settings;
    this.nodeClass  = '.fl-node-' + settings.id;
    this._init();
  };

  FLBuilderAccordion.prototype = {

    _init: function() {
      $( this.nodeClass + ' .fl-accordion-button' ).click( $.proxy( this._buttonClick, this ) );
    },

    _buttonClick: function( e ) {
      ...
    },

    _slideUpComplete: function() {
      ...
    },

    _slideDownComplete: function() {
      ...
    }
  };

})(jQuery);

Enable partial refresh

Once your module is compatible, enabling partial refresh is easy. Just set the partial_refresh parameter in your module's constructor to true as shown in the example below and partial refresh will be enabled for your module.

class MyModuleClass extends FLBuilderModule {

  public function __construct()
  {
    parent::__construct(array(
      'partial_refresh' => true // Set this to true to enable partial refresh.
    ));
  }
}