acf.Model event when changing from edit to preview mode

• danielle_2314

• February 1, 2024 at 7:34 pm

I use the change event to listen for changes on certain fields when in preview mode so I can run a script.
Like so:

var instance = new acf.Model({
events: {
'change': 'onChange'
},
onChange: function(e, $el){
//run code
});
},

});

It works great. But if a user clicks into edit mode, makes their change. Then clicks the button to switch to preview mode, I need to find an event to listen to so I can run a script on the rendered HTML like I do for the change event.

Thank you!

• danielle_2314

• February 9, 2024 at 4:45 pm

The answer is this simple bit of code (https://gist.github.com/hereswhatidid/a67dc3697a481c223bdced42586f6664):

if( window.acf ) {
  window.acf.addAction( 'render_block_preview/type=accordion', function( $elem, blockDetails ) {
    initializeElement( $elem );
  } );
}

And this bit from this article helps if you change the namespace to target your block(https://www.billerickson.net/building-acf-blocks-with-block-json/):
“If you use a namespace other than “acf/” you need to use the full block name in the callback, so: render_block_preview/type=cwp/tip”