I’m trying to get the page generated from a Velocity template to execute some Javascript functions. I have some buttons that should execute their respective functions on click. However, the page simply refreshes whenever I click on the buttons. What is wrong?
Velocity template:
<!DOCTYPE HTML>
<html>
<head>
<title>$generalUtil.htmlEncode($pageTitle)</title>
<meta name="decorator" content="atl.general" />
#requireResource("confluence.web.resources:aui-forms")
#requireResource("com.example.plugin.comparator-plugin:comparator-plugin-resources")
#requireResource("confluence.web.resources:ajs")
</head>
<content tag="key">$action.space.key</content>
<body>
#applyDecorator("root")
#decoratorParam("helper" $action.helper)
#decoratorParam("context" "space-administration")
#decoratorParam("mode" "view-space-administration")
#decoratorParam("infopanel-width" "200px")
#applyDecorator ("root")
#decoratorParam ("context" "spaceadminpanel")
#decoratorParam ("selection" "comparator-plugin-action-web-ui")
#decoratorParam ("title" $action.getText("action.name"))
#decoratorParam ("selectedTab" "admin")
#decoratorParam("helper" $action.helper)
<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>
<div style="display: block;"></div>
<label for="title" style="margin: 2vh 2vw;">Enter Page Title</label>
<input name="title">
<fieldset>
</form>
#end
#end
</body>
</html>
Javascript:
let baseURL = "http://localhost:1990/confluence";
let pageTitleJson = "";
let pageVerJson = "";
let selectedPID = "";
/**
* fetchAllPageTitles - fetch all pages when Create is clicked
*/
function fetchAllPages() {
//fetch all page titles using fetch api
let url = baseURL + "/rest/api/content?type=page&start=0&limit=99999";
fetch(url)
.then(response => response.json())
.then(json => {
pageTitleJson = json.results;
})
}
/**
* fetchAllPagesTitlesOnClick - display all page titles in options on button click
*/
function fetchAllPagesTitlesOnClick(){
let selOption = document.getElementById("pageTitleSel");
//ensure that each page title is only shown once when button is clicked multiple times
if(selOption.length > 0){
selOption.innerHTML = ""; //remove all exisiting options first
}
//create and append options
pageTitleJson.forEach(array => {
let newOp = document.createElement("OPTION");
newOp.textContent = array.title;
selOption.appendChild(newOp);
})
}
/**
* fetchVersionsOfPage - based on page title selected, fetch all previous versions, on option change
*/
function fetchVersionsOfPage(){
let selectedOptions = document.getElementById("pageTitleSel");
let selectedPage = selectedOptions.options[selectedOptions.selectedIndex].text; //get the current selected value for page title
for(let i=0; i<pageTitleJson.length; i++){
if(pageTitleJson[i].title == selectedPage){
let url = baseURL + "/rest/experimental/content/" + pageTitleJson[i].id + "/version"
fetch(url) //fetch all versions using fetch api
.then(response => response.json())
.then(json => {
pageVerJson = json.results;
});
}
}
for(let i=0; i<pageTitleJson.length; i++){
if(pageTitleJson[i].title == selectedPage){
selectedPID = pageTitleJson[i].id; //get page id of selected page
}
}
}
/**
* fetchPageVersionsOnClick - display all page versions on button click
*/
function fetchPageVersionsOnClick(){
let pageVer1Sel = document.getElementById("pageVersionSel1");
let pageVer2Sel = document.getElementById("pageVersionSel2");
//ensure that each page version is only shown once when button is clicked multiple times
if(pageVer1Sel.length > 0 || pageVer2Sel.length > 0){
pageVer1Sel.innerHTML = ""; //remove all exisiting options first
pageVer2Sel.innerHTML = "";
}
//create and append options
pageVerJson.forEach(array => {
let newOp1 = document.createElement("option");
let newOp2 = document.createElement("option");
newOp1.textContent = array.number;
newOp2.textContent = array.number;
newOp1.setAttribute("id", "1." + array.number);
newOp2.setAttribute("id", "2." + array.number);
pageVer1Sel.appendChild(newOp1);
pageVer2Sel.appendChild(newOp2);
})
}
/**
* fetchPageVersionContent - fetch the content of each version and display in template
*/
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 = "<h3>Version " + selectedPageVer + "</h3>";
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");
}
})
});
}
AJS.toInit(function(){
fetchAllPages();
})