Problem getting elements by ID inside <Content> of AccordionPane

Dear All,

I've got problem on changing the content inside a <div> element inside the Content part of AccordionPane. The code is below:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
<script type="text/javascript">
function test1(){
 var table = document.createElement('TABLE');
 table.setAttribute('border',0);
 table.setAttribute('id','sliderTable');
 var tBody = document.createElement('TBODY');
 table.appendChild(tBody);
 
  var row = document.createElement('TR');
  var cell = document.createElement('TD');
  cell.style.backgroundColor = "#CCCCCC" ;
  cell.style.width = 10+ "px";
  cell.style.height = 5+ "px";
  row.appendChild(cell);
  tBody.appendChild(row);
 }
 document.getElementById('colorTable').appendChild(table);
 document.getElementById('colorTable').style.display='';
}
</script>
 
<asp:ScriptManager id="ScriptManager1" runat="server" />
<ajaxToolkit:Accordion ID="Accordion1" .....>
 <Panes>
 <ajaxTookit:AccordionPane...>
 <Header>Color</Header>
 <Content><div id='colorTable' style="display:none"></div><Content>
 </ajaxToolkit:AccordionPane>
 ......
 </Panes>
 </ajaxToolkit:Accordion>
</asp:Content>
 
When I run the code it said there is a javascript error "Object Required". It is the script cannot locate the 'colorTable' element? And what way can I locate the element?
Thanks!!
 
Stard

Hello,

As you propably discovered:

function test1(){
 var table = document.createElement('TABLE');
 table.setAttribute('border',0);
 table.setAttribute('id','sliderTable');
 var tBody = document.createElement('TBODY');
 table.appendChild(tBody);
 
  var row = document.createElement('TR');
  var cell = document.createElement('TD');
  cell.style.backgroundColor = "#CCCCCC" ;
  cell.style.width = 10+ "px";
  cell.style.height = 5+ "px";
  row.appendChild(cell);
  tBody.appendChild(row);
 } <----- syntax error
 document.getElementById('colorTable').appendChild(table);
 document.getElementById('colorTable').style.display='';
}

has syntax error, there is an unnecessary } /or your copy/paste was not successful/

Hi stmarti,

sorry I've got typo error in my post :) Since I just type the main structures of my code and my original one haven't got this typo error.

Btw I searched some other forum and got some solutions like document.getElementById('<%colorTable.ClientID%>') because I am working with a content page under a master page. But I get "colorTable do not have the ClientID property" error.

Any idea on this?

Many thanks.

Stard

Hi,

I have some comments maybe it helps:

a) the correct syntax is <%= colorTable.ClientID %> or <%# colorTable.ClientID %>

but I think it is unnecessary, because your div isnot a server side control so it's id won't be altered! This is only necessary when you have:

<div id='colorTable' style="display:none"runat="server" ></div>

b) The really big problem is style="display:none"andthe empty div.

Why? Because with this style yourempty div will not ever rendered in the browser(!!!) and not even part of the DOM tree! Just check this.

Try instead of: strip style="display:none" or change it style="visibility: hidden;" or use a span instead of div as a placeholder or put some content in the div. Try all these to understand how your browser render empty or display:none divs.

Hi,

Small update, start here: change your div to

<div id='colorTable' style="display: none;"> </div>

and document.getElementById( 'colorTable' ) should works