Using Ajax to load Page Builder Layout

Hi Alex, thanks for the reply and suggestions.

The most promising result was this:

$content = apply_filters( 'siteorigin_panels_inline_styles', SiteOrigin_Panels::renderer()->render( $id ) );

It did add the missing styles, but since I use ajax to paste one page’s layout into a totally different page, the ids don’t match.

Any ideas how I could fix that?

Also, what’s the WB? Probably should’ve mentioned, that I’m not a very experienced web developer (and wordpress for that matter).

Hi Alex,

I tried adding the filter and besides other issues, it also didn’t generate the right css. However, I found generate_css and used it to generate the css I needed, send it with in the ajax response and then replace the content of #siteorigin-panels-layouts-head with it using jQuery.

This works well on Desktop. But on mobile SiteOrigin_Panels::renderer()->render() just returns “false”. What’s going on here?

My code:

add_action( 'wp_ajax_tnet_load_post_content', 'tnet_load_post_content' );
	add_action( 'wp_ajax_nopriv_tnet_load_post_content', 'tnet_load_post_content' );

	function tnet_load_post_content() {

		$id = $_POST['pageId'];
		$meta = get_post_meta( $id, 'panels_data', true );

		if( class_exists( 'SiteOrigin_Panels' ) && $meta )
		{
			$renderer = SiteOrigin_Panels::renderer();
			$css = $renderer->generate_css( $id );
			$content = $renderer->render( $id );
		}
		else
		{
			$css = '';
			$content = apply_filters( 'the_content', get_page($id)->post_content );
		}

		echo json_encode(array($content, $css));
		die(); //<- will add a 0 in response, if not called!
	}

function loadContent(id)
    {
        $.ajax({
            type: "post",
            url: ajaxAdmin.ajaxurl, // defined in functions.php wp_localize_script()
            cache: false,
            data: {
                action: "tnet_load_post_content",
                pageId: id
                },
            success: onContentLoaded
        });
    }

    function onContentLoaded(response)
    {
        var data = JSON.parse(response);

        $("#portfolio-content").append(data[0]);
        addMissingStyles(data[1]);
        addMissingScripts();
    }

    function addMissingStyles($css)
    {
        if($css == '')
        {
            return;
        }
        $("#siteorigin-panels-layouts-head").html($css);
    }

Hey Alex,

had a suspicion and did some digging. My pages are localized and the German version (which was shown by default on my mobile device) is password protected. The password protection prevents the content from being shown with ajax, as can be seen in the plugin’s code.

Thanks for the support. My issues seem to be resolved now! :3