Home>Support>Using Ajax to load Page Builder Layout

Using Ajax to load Page Builder Layout

Greetings,

I use the Page Builder plugin on my wordpress site, and so far it works great. Thank you for this plugin! :)

I’m using a self programmed theme for my site, and now I’m trying to use Ajax to load in the content from one page into another. That works pretty well so far, but now I’m hitting a wall. Ajax is loading in the content nicely, including the Page Builder layout, widgets etc. Now I noticed missing styles for the numbered panels.

I’d like the content of this page (where ajax is used) to look exactly like the content on https://taijj.net/home/portfolio/private/ (the original).

When inspecting the two pages with chrome I noticed missing stylesheets for the siteorigin panels on the page, where I used ajax. How would I add those?

My Php code:

        // Load Post content dynamically
	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 )
		{
			$content = SiteOrigin_Panels::renderer()->render( $id );
		}
		else
		{
			$page = get_page($id);
			$content = apply_filters( 'the_content', $page->post_content );
		}

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

My Javascript Code:

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: replacePageContent
        });
    }

    function replacePageContent(content)
    {
        $("#portfolio-content").append(content);
        tryAddGalleryScript();
    }

Thanks and Regards,
Taijj

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 month, 25 days ago Alex S Hi, I Work Here

    Hi Taijj,

    We output styles to wp_head and wp_footer that need to output in addition to the layouts themselves You could either output wp_head and wp_footer directly, or you could output the CSS directly using siteorigin_panels_inline_styles. For the WB, you could use siteorigin_widget_print_styles.

    Kind regards,
    Alex

  2. 1 month, 23 days ago Taijj

    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).

  3. 1 month, 22 days ago Alex S Hi, I Work Here

    Hi Taijj,

    Your usage of that filter isn’t valid. That filter is designed to filter the generated layout CSS and isn’t designed to execute the layout renderer itself. You should add a filter for siteorigin_panels_inline_styles that outputs the CSS, and then render the page builder layout. That will allow for the correct CSS to be generated.

    Sorry, WB means SiteOrigin Widgets Bundle.

    Kind regards,
    Alex

  4. 1 month, 21 days ago Taijj

    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);
        }
    
  5. 1 month, 19 days ago Alex Stapleton Hi, I Work Here

    Hi Taijj,

    Great to hear you managed to get it working.

    But on mobile SiteOrigin_Panels::renderer()->render() just returns “false”.

    That’s odd. That is used regardless of the device being used – there are no other renderers used. Does this happen if you disable all plugins and use a default theme?

    Kind regards,
    Alex

  6. 1 month, 13 days ago Taijj

    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

  7. 1 month, 12 days ago Alex Stapleton Hi, I Work Here

    Hi Taijj,

    That’s great to hear! :)
    Please feel free to post another thread if anything else comes up.
    Have a good one mate.

    Kind regards,
    Alex

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More