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!

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.

Hey,

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

Regards.

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.