Javascript changes are not showing up until I go into Page Builder edit mode

Beaver Builder
1

Hi there! I have created a custom module and I am doing some javascript work in my frontend.js.php file. It is working perfectly except when I do a change to my javascript, I have to go into Page Builder edit mode before I can see the change reflected. I thought I would just be able to refresh the browser to see my changes? Is there a way to do this without going into edit mode every time? Thanks for the help.

2

Hi Mark,

Unfortunately, frontend.js.php is compiled into POST_ID-layout-draft.js and POST_ID-layout.js, so you do need to be in edit mode to see the changes. However, refreshing the page while in edit mode should refresh the cache. Sorry I don’t have a better answer!

Justin

3

Ok, thanks for the info, Justin.

4

Justin,

I think I might have come up with a solution around this, but just have one more question if you could help me. I decided to do my javascript in my child theme instead, so it would get loaded and refreshed with the page. Im am using variables that I am now passing from my module’s frontend.js.php.

var moduleVars = (function($){
  moduleID = '<?php echo $id ?>';

  return {
    getModuleId: function(){
      return moduleID;
    }
  };
})(jQuery);

This is working just fine except for one issue - I am only getting the module id from one module per page. So if I have 2 or more of my modules on a page, it is only passing the last one at the bottom, instead of sending the id’s of each.

I there something I need to adjust in my frontend.js.php code so that all modules on the page send the info I need? Thanks!

5

Hey Mark,

Since frontend.js.php is compiled for each module, your moduleVars function is being created multiple times and is getting overridden by each subsequent copy of it.

Thinking about this, you might just try calling the builder’s render_js method in your child theme like this…

if ( FLBuilderModel::is_builder_enabled() ) {
     FLBuilder::render_js();
     FLBuilder::render_css(); // You can also do this to flush the CSS.
}

I haven’t tested if that will work, but I’m thinking it should clear the JS cache for the current page on each load.

Let me know if that works for you.

Justin

6

Justin, thanks for the suggestion, but that did not work. :frowning:

7

You know what, that might need to fire in an init action. Something like…

function refresh_bb_cache()
{
  if ( FLBuilderModel::is_builder_enabled() ) {
     FLBuilder::render_js();
     FLBuilder::render_css(); // You can also do this to flush the CSS.
  }
}
add_action( 'init', 'refresh_bb_cache' );

If that doesn’t work I’ll do some testing for you on Monday.

Justin

8

That did not work either, sorry. Thanks for any testing you can do; it would be extremely helpful.

I have a lot of sites and modules, so it would be a full time job to have to edit every site and every page that a module is on every time an update or change is made.

Thanks again!

9

Hey Mark,

No worries. I don’t have time today but I think we should be able to get this working. I’ll do some testing Monday and get back to you. Have a great weekend!

Justin

10

Hey Mark,

I tested this and it looks like the action needs to be changed from init to wp as shown below. Give that a shot and let me know how it goes.

Justin

function refresh_bb_cache()
{
  if ( FLBuilderModel::is_builder_enabled() ) {
     FLBuilder::render_js();
     FLBuilder::render_css(); // You can also do this to flush the CSS.
  }
}
add_action( 'wp', 'refresh_bb_cache' );
11

Thanks Justin, that works perfectly!

12

Great! You’re welcome, Mark.

Justin