Shortcode does not exist in Ajax context

Hello,

Please share your site credentials by submitting this contact form https://metabox.io/contact/
I will take a look.

I have the same issue. Were you able to fix it?

Thanks,
Ger

Hi Peter,

In my case it is a form I want to insert by ajax through a MutationObserver, when a certain div is created.
Whenever I try to call do_shortcode in the ajax call, it returns nothing. I tried to work around it by calling the shortcode in wp_loaded and saving the output to a transient. I thought this worked, as I was able to output the form when i got the transient value through the ajax call and output it in the right place on my page, but the form mustn't be fully initialised and parts of it don't work like the date picker, conditional logic.

Could the fix you are working on for views also be a fix for forms?

Thanks,
Ger

Thanks Peter but the form still doesn't show?

I updated the bootstrap file to the below

$renderer = new Renderer( $meta_box_renderer );
new Shortcode( $renderer );

if ( is_admin() ) {
$location = new Location\Settings;
new Editor( $location );
new ConditionalLogic;
new AdminColumns;
new Category;
new Import;
new Export;
} else {

new ActionLoader( $renderer );

new TemplateLoader( 'singular' );
new TemplateLoader( 'archive' );
new TemplateLoader( 'code' );

new ContentLoader( $renderer, 'singular' );
new ContentLoader( $renderer, 'archive' );
new ContentLoader( $renderer, 'code' );
}

This is my ajax code. you can ignore the references to transient. I just modified to see if the shortcode was working. The issue is that do_shortcode("[mb_frontend_form id='amelia-custom-field-group']"); returns ''?

add_action('wp_ajax_insert_inss_mb_attendee_form', 'insert_inss_mb_attendee_form');
add_action('wp_ajax_nopriv_insert_inss_mb_attendee_form', 'insert_inss_mb_attendee_form');
function insert_inss_mb_attendee_form() {
    $output = do_shortcode("[mb_frontend_form id='amelia-custom-field-group']");
    //$output = get_transient('amelia_custom_field_group_output');
    
    if ($output === false) {
        error_log(__METHOD__ . " Transient not found or expired");
        echo '<p>No output from shortcode.</p>';
    } elseif ($output === '') {
        error_log(__METHOD__ . " No output from shortcode");
    } else {
        echo $output;
    }
    wp_die(); // This is required to terminate immediately and return a proper response
}

js ajax call

function callInsertMBInssOrderForm(bookingCostDiv) {
    // Check if the div with class 'rwmb-meta-box inss_custom_fields' exists
    if (bookingCostDiv.querySelector('.inss_custom_fields')) {
        return; // Exit the function if the div exists
    }

    fetch(<code>${ajaxurl}?action=insert_inss_mb_attendee_form</code>, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({})
    })
    .then(response => response.text())
    .then(mbOrderForm => {
        // Append the response data (shortcode HTML) to the start of the div with class am-custom-fields
        const customFieldsDiv = bookingCostDiv.querySelector('.am-custom-fields');
        if (customFieldsDiv) {
            if (customFieldsDiv.querySelector('.inss_custom_fields')) {
                return;
            }       
            customFieldsDiv.insertAdjacentHTML('afterbegin', mbOrderForm);

            handleMetaboxGroupCloning(customFieldsDiv, numberOfPeople)
        } else {
            console.error('Error: .am-custom-fields element not found');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}