The java script onclick doesnot work with confluence 4 ( as it does with confluence 3) and so is CSS

Hello All,

This is my html code I post in confluence. I am using the XML RPC to post. All was working fine with confluence 3. Recently we upgraded it to confluence 4.3 and all the problems started. Well the onclick of java script doesnot seem to work and so is the CSS kindly help

<!-- This doesnot work the two appears but I cannot click neither it shows hidden tables -->

<a onclick ="javascript:ShowHide('WEIRONG_TEST_PUT-1')" href="javascript:;" >2 </a>

********************************

<html>

<style type="text/css">

#outerdiv {

max-width: 90%;

overflow-x: auto;

overflow-y: auto;

margin: auto;

font-family: Calibri;

padding: 0.5em 0.5em 0.5em 0.5em;

text-align:center;

-moz-border-radius: 10px; /* rounded corners */

border-radius: 10px;

background-color: #FDEEF4;

}

table {

margin-left:auto;

margin-right:auto;

border: 1px solid black;

border-collapse: collapse;

}

table tr td, table tr {

border: 1px solid black;

border-collapse: collapse;

}

</style>

<script language="JavaScript">

function ShowHide(divId)

{

if(document.getElementById(divId).style.display == 'none')

{

document.getElementById(divId).style.display='block';

}

else

{

document.getElementById(divId).style.display = 'none';

}

}

</script>

</head>

<div id="outerdiv"><caption><h3> Autobild Report </h3> </caption><table border="1" align="center"> <tr> <th>Project</th><th>Project Owner</th><th>Last CL </th> <th> Submit Date </th><th> Failed Count </th> <th> AB History </th><th> HIGH Priority </th><th> LOW Priority </th></tr>

<tr> <td> WEIRONG_TEST_PUT </td> <td>weirong@broadcom.com</td><td> 553151</td><td>2013/08/26</td>

<td> No Records </td>

<td><Font COLOR="green"> Link </font></td><td>

<div id ="WEIRONG_TEST_PUT-1" style="DISPLAY: none"><table>

<tr> <td>1</td><td> ATHENARAY_APPS_PLUS </td></tr>

<tr> <td>2</td><td> COMMS_ATHENARAY_HSPA_NXP </td></tr>

</table></div>

<!-- This doesnot work the two appears but I cannot click neither it shows hidden tables -->

<a onclick ="javascript:ShowHide('WEIRONG_TEST_PUT-1')" href="javascript:;" >2 </a>

</td>

<td>

X</td>

</tr>

</table></div>

</tr>

</table></div></html>

{html}

***********************************

Thanks and Regards,
Harihar Pai
(Broadcom India)

7 answers

0 vote
Davin Studer Community Champion Oct 03, 2013

Well, there are a few issues. First of all you should not be putting in <html>,<head>, and <body> elements into an html macro. That is totally invalid html. The html, head, and body elements are already defined on the confluence page. Secondly, you really should try not to use onclick handlers drectly on the elements. A better way would be to include something like this. This will programatically add the event handler once the page is ready for use. Check out the jQuery documentation for using the click event.

<script>

AJS.toInit(function () {

AJS.$('#myanchor').click(function() {
alert( "Handler for .click() called." );
});

});

</script>

<a id="myanchor" href="#" />Stuff</a>

Sir,

I did all that you told Its working in my local machine. But when I add AJS. to $ and try to post to confluence it dont seem to work. Below is my code .As its gone critical kindly help me ASAP

</style>
<script>
AJS.$(document).ready(function(){
AJS.$("button").click(function(){
var id = AJS.$(this).attr('id');
AJS.$('#'+id).toggle();
});
});
</script>
<div id="outerdiv"><caption><h3> Autobild Report </h3> </caption><table border="1" align="center"> <tr> <th>Project</th><th>Project Owner</th><th>Last CL </th> <th> Submit Date </th>
<th> Failed Count </th> <th> AB History </th><th> HIGH Priority </th><th> LOW Priority </th></tr>
<tr> <td> WEIRONG_TEST_PUT </td> <td>weirong@broadcom.com</td><td> 553151</td><td>2013/08/26</td>
<td> No Records </td>
<td><Font COLOR="green"> Link </font></td><td>
<div id ="WEIRONG_TEST_PUT-1"><table>
<tr> <td>1</td><td> ATHENARAY_APPS_PLUS </td></tr>
<tr> <td>2</td><td> COMMS_ATHENARAY_HSPA_NXP </td></tr>
</table></div>
<a href="#" class="show_hide" id='WEIRONG_TEST_PUT-1'>2 </button>
</td>
<td>
X</td>
</tr>
</table></div>
</tr>
</table></div>

Thanks and Regards,

Harihar Pai

(Broadcom India)

try with this

&lt;script type="text/javascript"&gt;
jQuery(document).ready(function($) {
	$("#button").click(function(){
		var id = $(this).attr('id');
		$('#'+id).toggle();
		//i think you can try something like 
		$(this).toggle();
	});
});
&lt;/script&gt;

Nothing seems to be working please help. I have done this as the laterst code. As there are multiple divs I want to show id the div by its id which is in the link of href. I replaced the AJS.$(document).ready(function() with AJS.toInit(function() still nothing is seems to be working please help me to solve the issue . It is going critical with passing day.

=============================================================

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> -->
<script>
AJS.toInit(function(){
AJS.$('.show_hide').click(function(){
var id = AJS.$(this).attr('id');
AJS.$('#'+id).toggle();
});
});
</script>
<div id="outerdiv"><caption><h3> Autobild Report </h3> </caption><table border="1" align="center"> <tr> <th>Project</th><th>Project Owner</th><th>Last CL </th> <th> Submit Date </th>
<th> Failed Count </th> <th> AB History </th><th> HIGH Priority </th><th> LOW Priority </th></tr>
<tr> <td> WEIRONG_TEST_PUT </td> <td>weirong@broadcom.com</td><td> 553151</td><td>2013/08/26</td>
<td> No Records </td>
<td><Font COLOR="green"> Link </font></td><td>
<div id ="WEIRONG_TEST_PUT-1" style="DISPLAY: none"><table>
<tr> <td>1</td><td> ATHENARAY_APPS_PLUS </td></tr>
<tr> <td>2</td><td> COMMS_ATHENARAY_HSPA_NXP </td></tr>
</table></div>
<a href="#" class="show_hide" id='WEIRONG_TEST_PUT-1' >2 </a>
</td>
<td>
X</td>
</tr>
</table></div>
</tr>
</table></div>

Please can some one help me with above. I am heavily depended on this forum and the task is going critical with each passing day. Please help ASAP

I am waiting for some of you to help me. Please do help me to solve this problem.

try with this

&lt;!-- &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; --&gt;
 
&lt;div id="outerdiv"&gt;&lt;caption&gt;&lt;h3&gt; Autobild Report &lt;/h3&gt; &lt;/caption&gt;
&lt;table border="1" align="center"&gt;
 &lt;tr&gt; 
	&lt;th&gt;Project&lt;/th&gt;
	&lt;th&gt;Project Owner&lt;/th&gt;
	&lt;th&gt;Last CL &lt;/th&gt; 
	&lt;th&gt; Submit Date &lt;/th&gt;
	&lt;th&gt; Failed Count &lt;/th&gt;
	&lt;th&gt; AB History &lt;/th&gt;
	&lt;th&gt; HIGH Priority &lt;/th&gt;
	&lt;th&gt; LOW Priority &lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt; 
	&lt;td&gt; WEIRONG_TEST_PUT &lt;/td&gt;
	&lt;td&gt;weirong@broadcom.com&lt;/td&gt;
	&lt;td&gt; 553151&lt;/td&gt;
	&lt;td&gt;2013/08/26&lt;/td&gt;
	&lt;td&gt; No Records &lt;/td&gt;
	&lt;td&gt;&lt;Font COLOR="green"&gt; Link &lt;/font&gt;&lt;/td&gt;
	&lt;td&gt;
		&lt;div id ="WEIRONG_TEST_PUT-1" style="DISPLAY: none"&gt;
			&lt;table&gt;
				&lt;tr&gt; &lt;td&gt;1&lt;/td&gt;&lt;td&gt; ATHENARAY_APPS_PLUS &lt;/td&gt;&lt;/tr&gt;
				&lt;tr&gt; &lt;td&gt;2&lt;/td&gt;&lt;td&gt; COMMS_ATHENARAY_HSPA_NXP &lt;/td&gt;&lt;/tr&gt;
			&lt;/table&gt;
		&lt;/div&gt;
		&lt;a href="#" id='show_hide' &gt;2 &lt;/a&gt;
	&lt;/td&gt;
&lt;td&gt;X&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
jQuery(document).ready(function($) {
    $("#show_hide").click(function(){  
		alert("click event");	
        $('#WEIRONG_TEST_PUT-1').toggle();
    });
});
&lt;/script&gt;

let me know is alert is showing or not


I got the problem. Its in confluence as I am using confluence2 API (XML-RPC) to post the below to confluence page the below script.

In confluence4 release notes its given

Note: You cannot edit content in wiki markup. Confluence does not store page content in wiki markup. Although you can enter wiki markup into the editor, Confluence will convert it to the rich text editor format immediately. You will not be able to edit the wiki markup after initial entry.It stores in xhtml format

I tried this but still its not working.

============================================================

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<script>

AJS.toInit(function () {

AJS.$('.show_hide').click(function () {

AJS.$(this).next('div').toggle();

/**

var id = AJS.$(this).attr('id');

AJS.$('#' + id).toggle();

**/

});

});

</script></head>

<body>

<div id="outerdiv">

<h3>Autobuild Report</h3>

<table>

<tbody>

<tr>

<th>Project</th>

<th>Project Owner</th>

<th>Last CL</th>

<th>Submit Date</th>

<th>Failed Count</th>

<th>AB History</th>

<th>HIGH Priority</th>

<th>LOW Priority</th>

</tr>

<tr>

<td>WEIRONG_TEST_PUT</td>

<td>weirong@broadcom.com</td>

<td>553151</td>

<td>2013/08/26</td>

<td>No Records</td>

<td>

<font color="green">Link</font>

</td>

<td>

<a href="#" class="show_hide" id="WEIRONG_TEST_PUT-1">2</a>

<div id="WEIRONG_TEST_PUT-1" style="display: none;">

<table>

<tbody>

<tr>

<td>1</td>

<td>ATHENARAY_APPS_PLUS</td>

</tr>

<tr>

<td>2</td>

<td>COMMS_ATHENARAY_HSPA_NXP</td>

</tr>

</tbody></table>

</div>

</td>

<td>X</td>

</tr>

</tbody></table></div></body></html>

=============================================================

This thing if i do directly in confluence it works. But i want to post it from perl script using XML-RPC
===================================================
{html}
<script>
AJS.toInit(function () {
AJS.$('.show_hide').click(function () {
AJS.$(this).next('div').toggle();
/**
var id = AJS.$(this).attr('id');
AJS.$('#' + id).toggle();
**/
});
});
</script></head>
<body>
<div id="outerdiv">
<h3>Autobuild Report</h3>
<table>
<tbody>
<tr>
<th>Project</th>
<th>Project Owner</th>
<th>Last CL</th>
<th>Submit Date</th>
<th>Failed Count</th>
<th>AB History</th>
<th>HIGH Priority</th>
<th>LOW Priority</th>
</tr>
<tr>
<td>WEIRONG_TEST_PUT</td>
<td>weirong@broadcom.com</td>
<td>553151</td>
<td>2013/08/26</td>
<td>No Records</td>
<td>
<font color="green">Link</font>
</td>
<td>
<a href="#" class="show_hide" id="WEIRONG_TEST_PUT-1">2</a>
<div id="WEIRONG_TEST_PUT-1" style="display: none;">
<table>
<tbody>
<tr>
<td>1</td>
<td>ATHENARAY_APPS_PLUS</td>
</tr>
<tr>
<td>2</td>
<td>COMMS_ATHENARAY_HSPA_NXP</td>
</tr>
</tbody></table>
</div>
</td>
<td>X</td>
</tr>
{html}
This works but I have to post it in to wikimarkup editor.
My actual requirement is to post it using the XML-RPC. So please help me how to post in wikimarkup section using XML-RPC
Now the problem is visible but I am far away from solution Please help!!!!!!!!!!

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

830 views 23 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you