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

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

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

<html>

#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>

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>

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

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

</table></div>

</td>

<td>

X</td>

</tr>

</table></div>

</tr>

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

{html}

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

Thanks and Regards,

Harihar Pai

(Broadcom India)

7 answers

1 vote

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.

AJS.toInit(function () {

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

});

</script>

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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 () {

...

});

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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">

<head>

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>

<h3>Autobuild Report</h3>

<table>

<tbody>

<tr>

<th>Project</th>

<th>Project Owner</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>No Records</td>

<td>

</td>

<td>

<table>

<tbody>

<tr>

<td>ATHENARAY_APPS_PLUS</td>

</tr>

<tr>

<td>COMMS_ATHENARAY_HSPA_NXP</td>

</tr>

</tbody></table>

</div>

</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}

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>

<h3>Autobuild Report</h3>

<table>

<tbody>

<tr>

<th>Project</th>

<th>Project Owner</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>No Records</td>

<td>

</td>

<td>

<table>

<tbody>

<tr>

<td>ATHENARAY_APPS_PLUS</td>

</tr>

<tr>

<td>COMMS_ATHENARAY_HSPA_NXP</td>

</tr>

</tbody></table>

</div>

</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!!!!!!!!!!

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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>
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>

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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;

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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)

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

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

7 answers

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Ask a question

Start a discussion

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

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

7 answers

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events