Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
Level
0 / 0 points
Next:
badges earned

Your Points Tracker
Challenges
Leaderboard
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Recognition
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Kudos
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

1 vote
Davin Studer Community Leader 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>

Thanks to this, I was able to figure out why my dialog pop up was not working!

https://aui.atlassian.com/aui/9.2.0/docs/dialog2.html

Had to enclose the script functions inside 

AJS.toInit(function () {

...

});

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
TAGS
Community showcase
Published in Confluence

⚡️NEW Group for Confluence Cloud Admins

Calling all Confluence Cloud Admins!  We created a new Community Group to support your unique needs as Confluence admins. This is a group where you can ask questions, access resou...

144 views 2 10
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you