Dynamic Preview – Reinit JS after block update

Hello!

Can you please let me know if you’re talking about the Flexible Dynamic Preview or the Gutenberg ACF Block Preview? As you’re talking about “Block”, it’s quite confusing ??

Thanks!

Regards.

Hello.

I’m talking about Flexible Dynamic Preview.

Hello!

Yeah, that’s a good idea. Just to validate that’s actually what you need, please add the following code in your latest ACF Extended 0.8 plugin:

In the file acf-extended\assets\acf-extended-fc.js line:134, add the following code:

acf.doAction('acfe/fields/flexible_content/before_preview', flexible.$el, ajaxData);

In the file acf-extended\assets\acf-extended-fc.js line:141, add the following code inside the ajax success callback:

success: function(response){
    acf.doAction('acfe/fields/flexible_content/preview', response, flexible.$el, ajaxData);
    
    //...
}

Now you have access to two new hooks, one before the ajax call, and now right on success. You can use it as follow:

acf.addAction('acfe/fields/flexible_content/before_preview', function($el, data){
    
    /*
     * $el: The flexible jQuery element
     * data: The ajax data (input data etc...)
     */
    
});

acf.addAction('acfe/fields/flexible_content/preview', function(response, $el, data){
    
    /*
     * response: The ajax response (template render HTML)
     * $el: The flexible jQuery element
     * data: The ajax data (input data etc...)
     */
    
});

Can you try to re-init your map on the acfe/fields/flexible_content/preview action?

Let me know if that’s what you need!

Regards.

Hello Dominik,

Just to let you know that the latest 0.8.1 update introduced those 2 new hooks, so you can use it on production ??

Let me know if you need anything else.

Regards.

Hey,

Does the hook helped you to implement your re-init?

Regards.

Hi

I had limited time to familiarize myself with this new feature.

As far as I can see, JavaScript event is fired before PHP code is being updated in the preview which is problematic.

Additionally, $el is returning the whole Flexible Content field instead of Layout in the Flexible Field which was edited.

Hello,

Thanks for the feedback! Just to let you know: the latest ACF Extended 0.8.2 update moved the JS action after the HTML parse in the preview. I also updated the hook, you now have access to the layout, and you can also directly hook using the layout name:

acf.addAction('acfe/fields/flexible_content/preview/name=my_flexible&layout=my_layout', function(response, $flexible, $layout, ajaxData){

    // do something

});

Or, you can just hook to all previews, and check the layout inside the callback (as usual with ACF).

acf.addAction('acfe/fields/flexible_content/preview', function(response, $flexible, $layout, ajaxData){

    // do something

});

Hope it will now work for you ??

Regards.