Render HTML elements in a page

I’m developing a blueprint plugin where 2 versions of a page are displayed side by side for comparison on a separate page. I am able to get the contents of the versions to show on the page, the problem is the html elements are not rendered. The following is an example:

image

How do I get the html elements to render? Would appreciate any help!

Hi @ChongJingHong,

For people on here to be able to you help you’ll need to share a little more on how you have exactly built what you have so far. I’ll assume that you are rendering a Velocity template. If that’s the case, you need to disable the HTML escaping mechanism by naming your variable after something that ends in Html.

$set($var = "<p>Pancakes</p>")

## This will be escaped like in your screenshot
<div>$var</div>

$set($varHtml = "<p>Pancakes</p>")

## This will be rendered as HTML
<div>$varHtml</div>

Hope this helps! If you aren’t using Velocity, please share your code that you are using to render what you currently have.

Cheers,
Sven

Hi @sven.schatter, my apologies for not being clear. I’m not using rendering a Velocity template, but a XML template, similar to the blueprint tutorial.

Basically, I use a Soy template to select the page and versions that I want to compare and through Javascript, I attach the contents of the page to value attribute of the <select></select> tags.

Below are my code:

XML template:

<ac:layout>

   <ac:layout-section type="two_equal">

       <ac:layout-cell>

           <p><at:var at:name="pageVersion1"/></p>

       </ac:layout-cell>

       <ac:layout-cell>

           <p><at:var at:name="pageVersion2"/></p>

       </ac:layout-cell>

   </ac:layout-section>

</ac:layout>

Javascript function to get the contents of the page:

function fetchPageVersionContent(num){

    let selectedOptions = document.getElementById("pageVersionSel" + num);

    let selectedPageVer = selectedOptions.options[selectedOptions.selectedIndex].text; //get the current selected value for page title

        

    let contentURL = "";

    let fetchURL = baseURL + "/rest/experimental/content/" + selectedPID + "/version/" + selectedPageVer;   

    fetch(fetchURL)// fetch page version content

    .then(response => response.json())

    .then(json => {

        contentURL = baseURL+json.content._links.webui;

        $.ajax({

            url : contentURL,

            success : function(response){

                let contentTitle = "Version " + selectedPageVer + "\n";

                let content = $(response).find("#main-content").html();

                content = contentTitle + content;

                let pageVerSel = document.getElementById(num + "." + selectedPageVer);

                pageVerSel.setAttribute("value", content);  //set the content as the value of the option

                alert("Success");

            }

        })

    });

Soy template:

{template .form}

    <form action="#" method="post" class="aui">

        <fieldset>

            <button onClick="fetchAllPagesTitlesOnClick()" style="margin: 2vh auto; display: block;">Get All Pages</button>

            <div style="display: block;"></div>

            <label for="pageTiles" style="margin: 2vh 2vw;">Select Page Title:</label>

            <select name="pageTitles" id="pageTitleSel" style="margin: 2vh auto;" onchange="fetchVersionsOfPage()">

            </select>

            <button onClick="fetchPageVersionsOnClick()" style="margin: 2vh auto; display: block;">Get All Versions</button>

            <label for="pageTiles" style="margin: 2vh 2vw;">Select Version:</label>

            <select name="pageVersion1" style="margin: 2vh auto;" id="pageVersionSel1" onChange="fetchPageVersionContent(1)">

            </select>

            <div style="display: block; margin: 2vh auto;"></div>

            <label for="pageTiles" style="margin: 2vh 2vw;">Select Version:</label>

            <select name="pageVersion2" style="margin: 2vh auto;" id="pageVersionSel2" onChange="fetchPageVersionContent(2)">

            </select>

        <fieldset>

    </form>

{/template}

Only skimmed your code, but as far as I can tell setting the page content as value of your <select> and not properly rendering it into the DOM looks like your problem. You probably want to have a <div> instead that you render your content into. Something like this:

<div id="second-page-content"></div>

And then in your JS:

document.getElementById('second-page-content').innerHTML = content;

Hope this brings you closer to a solution. :slight_smile:

Cheers,
Sven

Thank you so much for taking the time. Just wanted to clarify, for this code:

is it meant for the Soy template or for the XML template? Because the Javascript code can only interact with the Soy template and not the XML template. And having it in the Soy template wouldn’t make sense it serves as a setup wizard for the XML template.

Thanks again for your time!

Solution: add at:rawxhtml="true" to the xml template. For reference.