Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Can't replace a confluence page text using getElementById and Ajax

Daniel Baron March 27, 2018

I want to replace text whose HTML tag has id equal to a variable called skillLevel (the text can just be part of a confluence page or part of an HTML macro embedded in a page, whatever's easier). However there's something wrong with this line 

existing_body.getElementById(skillLevel).innerHTML = skillString;
    }

in the code below, as evidenced by the fact that 

existing_body.getElementByTagName("p")

won't even work when I try it. Is the existing_body not getting recognized as HTML for some reason? 

 

function myFunction() {
 var users_name = document.getElementById("users_name").value;
 var email = document.getElementById("email").value;
 inputs = document.getElementsByTagName('select');

 for (i = 0; i < inputs.length; i++) {
     input = inputs[i];
     if (input.value.length > 1) {
     var skillString = "<p> " + users_name + " - " + input.value + " - " + email + '</p>';
     var skillName = input.name;
     var skillLevel = input.value;	
     $.get('/rest/api/content?spaceKey=EXPERTISE&title=' + skillName + '&expand=space,body.storage,version,container', function (data, status) {
         var pageData = data.results[0];
	 var existing_body = pageData.body.storage.value; 
	 var foundin = existing_body.search(email);
	 if (foundin > 0) {
           alert("You have already added the skill: " + skillName);
         } else {
	   pageData.version.number += 1;
           var page_id = pageData.id;
	   existing_body.getElementById(skillLevel).innerHTML = skillString;
    }
    $.ajax({
      type: "PUT",
      url: "/rest/api/content/" + page_id,
      data: JSON.stringify(pageData),
      contentType: "application/json; charset=utf-8",
      success: function (data) {
        alert("Successfully added info");
      },
      error: function (data) {
        alert("Error - could not complete request");
      }
    });
 
   });
  }
 }
}

 

1 answer

1 accepted

1 vote
Answer accepted
Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 28, 2018

getElementById is a method on the document class. You don't get that method with data returned from a jQuery Ajax call. Specifically, you are getting a JSON object from that Ajax call. If you want to modify the html in the returned string you will have to use a method such as this ...

https://stackoverflow.com/questions/7904480/jquery-modify-html-string

https://blog.slaks.net/2011/01/modifying-html-strings-using-jquery.html

Daniel Baron March 29, 2018

The second seems like the right candidate, particularly the part about needing to retrieve html from the DOM tree after modifying the source html, then assign that source back to the variable.  Thanks.

Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 29, 2018

Glad to help.

Lisbon Cruz March 6, 2024

I know this is an old thread but were you able to get this to work? I am trying to change the text from span class = fc-event-title (it's teams calendar) to be able to just pull some strings. Our teams calendar pulls the jira ticket info but the summary field has a lot of unecessary information that upper management do not want to see. Thank you for any help and guidance you can provide. I created a question in this post for more information. 

Confluence Team Calendar Jira Issue Dates Custom V... (atlassian.com)

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events