How to perform template injection in ajax?

How To
1

Browser: alla
OS: macOS / Windows / Linux / etc.

I’m having a bit of trouble starting section templates dynamically in ajax.

I’ll explain:
I’m trying to load the sections of my site with ajax : homepage, about us, portfolio etc., which I transformed into section templates.

To simplify, in my structure I have a container with 2 internal divs at 50% of the width: in the one on the left there is the menu where by clicking on the items I recall the section templates in ajax.

Now everything is ok with the loading of the templates (I’ll show you the code below) but I found a couple of anomalies.

The first anomaly is that the css is not loaded so much so that I had to force the loading manually, the second problem, a little more difficult, is that in one of my templates there is a query loop where all the data is loaded except the background images of the divs which as you can see from the attached image are also linked to a css which however is injected into the html and therefore up to now I have not yet understood how to recover it (I will find a solution but I wanted to point it out).

A final observation on query loops, if I assign an ID to the container I find the same id duplicated for the number of cycles, I think it should be foreseen that each id was assigned a numerical suffix (in an html page there should never be objects with the same id), I noticed that not assigning a bricks id eliminates the root problem by not printing the div id on output.

follow my simple ajax code:

add_action('wp_ajax_ajax_loadpage', 'ajax_loadpage_fn');       
add_action('wp_ajax_nopriv_ajax_loadpage', 'ajax_loadpage_fn');

function ajax_loadpage_fn() {
    
    // get id number from js event from ajax
    $template_id = isset($_POST['template_id']) ? $_POST['template_id'] : '882';

     //force related css
    $css_file = '/bricks/css/post-' . esc_attr($template_id) . '.min.css';    
    $css_link = '<link rel="stylesheet" href="' . wp_upload_dir()['baseurl'] . $css_file . '" type="text/css" media="all">'; 

    // load template
    echo $css_link . do_shortcode('[bricks_template id="' . esc_attr($template_id) . '"]');
    die();
}

image
image1407×1063 154 KB

image
image1282×882 271 KB

2

nothing, I can’t find a solution to load those styles inline…any ideas?

3

You’re not alone! I too want to know how this can be possible. My method was the same as yours - trying to load the shortcode, HOWEVER - in Wordpress’s documentation it is specifically said that loading Shortcodes won’t load JS or CSS, because you have to enqueue scripts and styles, and I hate this, because you may no know what JS or CSS to even enqueue, and this especially becomes true when dealing with AJAX loading form plugins for example.

I’m not sure if there is another way of doing it since no one answered this form and I can’t seem to find any other thread on this site talking about this. But I really need to figure out how to make this work because that would take building websites to the level of React.js

4

You need to load the template to your page where you use ajax. You can then hide the section, it’s just there for the styles to be loaded
bricks