Hi, I am creating a plugin whereby the contents of 2 selected historical versions of a page will be shown side by side. I am unable to publish the contents of the page versions as html code using the setAttribute(‘value’, content) method as this would convert the content into a string. So the page would display <tb><tr>...</tr></tb>
as oppose to an actual table for example. How do I pass the content as the html code instead? Below are my code:
templae.xml:
<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>
script function to set option value:
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");
}
})
});
my 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="pageVersion1" style="margin: 2vh 2vw;">Select Page Version:</label>
<select name="pageVersion1" style="margin: 2vh auto;" id="pageVersionSel1" onChange="fetchPageVersionContent(1)">
</select>
<div style="display: block;"></div>
<label for="pageVersion2" style="margin: 2vh 2vw;">Select Page Version:</label>
<select name="pageVersion2" style="margin: 2vh auto;" id="pageVersionSel2" onChange="fetchPageVersionContent(2)">
</select>
<fieldset>
</form>