Styles Not Loading When Dynamically Loading Content via AJAX in Bricks

I’m new to bricks and wordpress so I apologize if I am doing something wrong. I am trying to load different sections of my website dynamically using AJAX. It’s a customer portal using the wordpress my account pages. I’ve also created some custom endpoints. I have 4 buttons and when one is pressed, the content is displayed underneath properly but the styles do not apply when loaded via ajax. Also it seems like other shortcodes from other plugins seem to be loading in fine with styles.

Here is my AJAX JavaScript code:

jQuery(document).ready(function($) {
    $('.dynamic-content-button').on('click', function() {
        var contentId = $(this).data('content-id');  

        $.ajax({
            url: ajax_object.ajax_url,
            type: 'GET',
            data: {
                action: 'load_dynamic_content',
                content_id: contentId
            },
            success: function(response) {
                $('#dynamic-content-area').html(response);

                if (window.bricksFrontend) {
                    window.bricksFrontend.init();
                }
            },
            error: function() {
                alert('Sorry, there was an error loading the content.');
            }
        });
    });
});

This is what I have in my functions.php

function enqueue_dynamic_content_script() {
    wp_enqueue_script( 'dynamic-content', get_template_directory_uri() . '/js/dynamic-content.js', array('jquery'), null, true );
    
 
    wp_localize_script( 'dynamic-content', 'ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'enqueue_dynamic_content_script' );


function load_dynamic_content() {
    if ( isset( $_GET['content_id'] ) ) {
        $content_id = sanitize_text_field( $_GET['content_id'] );
        
        switch ( $content_id ) {
            case 'edit-address':
         
                echo do_shortcode( '[bricks_template id="285"]' ); // Replace with your template ID for Edit Address page
                break;

            case 'marketplace':
     
                echo do_shortcode( '[bricks_template id="414"]' ); // Replace with your template ID for Marketplace page
                break;

  
              case 'orders':
                echo do_shortcode( '[bricks_template id="281"]' ); 
                break;
				
			    case 'aktualnosci':
                echo do_shortcode( '[bricks_template id="430"]' ); 
                break;
				
				case 'edit-profile':
                echo do_shortcode( '[bricks_template id="1270"]' ); 
                break;
            
            default:
          
                echo 'Content not found.';
        }
    }
    wp_die();
}
add_action( 'wp_ajax_load_dynamic_content', 'load_dynamic_content' );
add_action( 'wp_ajax_nopriv_load_dynamic_content', 'load_dynamic_content' );

It shows up properly when visiting the page directly:

But this is what happens when it’s loaded dynamically.

Still can’t figure this out.

well because only content getting loaded not the head scripts

I would use htmx and head extension with it for simple ajax

use chatgpt to write a simple html example for you it is much cleaner way to create ajax if you need to.

@sinanisler Thank you for your response. I’ve tried implementing that but still am not getting any styles. This is my first website so I’m following some tutorials and using chatgpt for some explanations. Content loads in fine but seems like the head scripts are not.

My button is set up:
hx-get: /my-account/marketplace
hx-target: #account-content
hx-swap: outerHTML
hx-trigger: click

function bt_add_htmx_support() {
    wp_enqueue_script('htmx', 'https://unpkg.com/htmx.org@1.9.10', [], '1.9.10', true);
    wp_enqueue_script('htmx-head', 'https://unpkg.com/htmx.org/dist/ext/head-support.js', ['htmx'], '1.9.10', true);
}
add_action('wp_enqueue_scripts', 'bt_add_htmx_support');

function bt_is_htmx_request() {
    return isset($_SERVER['HTTP_HX_REQUEST']) && $_SERVER['HTTP_HX_REQUEST'] === 'true';
}

function bt_add_marketplace_to_menu($items) {
    $items['marketplace'] = __('Marketplace', 'bricks');
    return $items;
}
add_filter('woocommerce_account_menu_items', 'bt_add_marketplace_to_menu');

function bt_register_marketplace_endpoint() {
    add_rewrite_endpoint('marketplace', EP_ROOT | EP_PAGES);
}
add_action('init', 'bt_register_marketplace_endpoint');

function bt_marketplace_content() {
    if (bt_is_htmx_request()) {
        ob_start();
        ?>
        <head hx-head="merge">
            <style><?php echo file_get_contents(get_stylesheet_directory() . '/style.css'); ?></style>
        </head>
        <?php
        echo do_shortcode('[bricks_template id="281"]');
        $content = ob_get_clean();
        echo $content;
        exit;
    }
    echo do_shortcode('[bricks_template id="281"]');
}
add_action('woocommerce_account_marketplace_endpoint', 'bt_marketplace_content');

function bt_add_htmx_head_support() {
    if (is_account_page()) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                document.body.setAttribute('hx-ext', 'head-support');
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'bt_add_htmx_head_support');

have you found any solution?
i have the same problem and you can see my code at the end of this topic:

Hi guys,
i was wondering if you could use “External Files” as the “CSS Loading Method” in bricks, and then when you use the snippet [bricks_template id="281"] just load the styles via that post_id?
I don’t know where bricks saves the styles but from the picture it looks like they use the post_id is the reference:

You could either path to the css-asset and load it inline by file_get_contents or link it.

hope this helps!

thanks for your help
it really helped. i made the css external and changed my code like this: (complete code is here)

function load_page_content_ajax() {
    global $wpdb;
    check_ajax_referer('load_page_content_nonce', 'security');
    
    $page_id = isset($_POST['page_id']) ? intval($_POST['page_id']) : 0;
    
    if (!$page_id) {
        wp_send_json_error('not valid.');
        die();
    }
    
    ob_start();
    
    // external css file
    $css_url = esc_url_raw("https://www.yourwebsite.com/wp-content/uploads/bricks/css/post-{$page_id}.min.css?ver=" . time());
    echo "<link rel='stylesheet' id='bricks-page-custom-css-{$page_id}' href='{$css_url}' type='text/css' media='all' />";
    
    // checks the database for bricks content
    $bricks_content = $wpdb->get_var($wpdb->prepare(
        "SELECT meta_value FROM {$wpdb->prefix}postmeta WHERE post_id = %d AND meta_key = '_bricks_page_content_2'",
        $page_id
    ));
    
    if ($bricks_content && !empty($bricks_content)) {

        // bricks content
        $elements = maybe_unserialize($bricks_content);
        echo \Bricks\Frontend::render_data($elements, $page_id);
    } else {

        // normal content(not bricks)
        $post = get_post($page_id);
        
        if ($post) {
            echo apply_filters('the_content', $post->post_content);
        } else {
            echo '<p>صفحه مورد نظر یافت نشد.</p>';
        }
    }
    
    die();
}

but still i have this question that where they are stored while they are inline?
i think it is stored in database but couldn’t fine the table.
it is not in “postmeta”
and I think it is not an external file

@moalla Can you help me out? I’m still having this issue and tried many different things.

it may help;

i explained more about what i did here:

if it didn’t work for you, let me know so i can make a tutorial or a plugin for it