The java script onclick doesnot work with confluence 4 ( as it does with confluence 3) and so is CSS
Asked by Harihar Pai:

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)


Answers:
author: Davin Studer
body: 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\>

comments: author: Sameer V
body: 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 () {

...

});


author: Harihar Pai
body: 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!!!!!!!!!!


author: RambanamP
body: 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
```

```

```


author: Harihar Pai
body: I am waiting for some of you to help me. Please do help me to solve this problem.


author: Harihar Pai
body: 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\>  

comments: author: Harihar Pai
body: 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


author: RambanamP
body: 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;
```


author: Harihar Pai
body: 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)