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

Daniel Baron

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");
      }
    });
 
   });
  }
 }
}

 

Davin Studer

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