Styles Not Loading When Dynamically Loading Content via AJAX in Bricks

[dennishurber]

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.

[dennishurber]

Still can’t figure this out.

[sinanisler]

well because only content getting loaded not the head scripts

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

htmx ~ The htmx Head Tag Support Extension Extension

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

[dennishurber]

@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');

[moalla]

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

How to render bricks page content manually?

are you inside a multisite environment? if so, you probably testet out the render_shortcode function in combination with switch_to_blog()? I didn’t quite get it to work back when I last tried, but you will get some things rendered (if I remember correctly). I might try again when i have the time and let you know.

[UserfreundSuat]

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!

[moalla]

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

[dennishurber]

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

[sinanisler]

it may help;

Page Transitions, WordPress + Bricks Builder + HTMX

[moalla]

i explained more about what i did here:

How to render bricks page content manually?

thank you very much for ur code. it really helped. i made some changes. some times the page is made by Gutenberg and some times with bricks. so this code can tell: function dynamic_page_content_shortcode($atts) { ob_start(); ?> <div id="dynamic-content-container"> <div class="loading-spinner" style="display: none;"> <div class="spinner"></div> </div> <div id="page-content-area"> <p>choose one item on the list</p> </div> </…

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