0

In confluence I need to change text on a page into an image Inside of a table i have multiple values that need to be replaced by an image. So i created following Jquery and put it into a usermacro.

<script>
AJS.toInit(function() {
AJS.$("body").html($("body").html().replace(/text to be replaced/g,'<img src="image.png">'))
});
</script>

This works fine to change the text with the image. But it breaks the left menu when put in a macro. When i run the line AJS.$("body")... directly in developer tools in the console from google chrome it does not break the menu.

I can't seem to figure out how to solve this. Anyone have an idea?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Dave Bosman
  • 1
  • 1
  • I would guess that this is a timing issue/race condition. Whatever is happening in the left menu probably hasn't completed when this script is executed in the user macro. Giving it a bit more time by executing it in the developer console allows the left menu to complete rendering. – dvdsmpsn Oct 10 '16 at 10:59

2 Answers2

0

$(document).ready(function(){   
    $("#btn2").click(function(){
 var a= $("#a").html();
     a=a.replace('<i> with Italic</i>','<u> with UnderLine</u>');   
        alert("HTML: " + $("#a").html());
 $("#a").html(a);
        alert("HTML: " + a);
    });
});
<html>
  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head>
  <body>
  <div id ='a'>
This is a div<i> with Italic</i></br>
<b>and bold</b>
</div>

<button id="btn2">Show HTML</button>
  </body>
  </html>
Sagar Gorasiya
  • 62
  • 3
0

If you need to chenge text only inside content in confluence you need to change the content of #main div:

AJS.$("#main").html($("#main").html().replace(/text to be replaced/g,'<img src="image.png">'))

I think you break menu confluence js.

Artem Gorlachev
  • 597
  • 4
  • 9