JQuery Accordion Ajax Height issue -

i'm having issue implementing jquery accordion.

okay need / doing following:

javascript:

$.ajax(             {                 url:'myservlet.jsp',                 type:"get",                 async:true,                 datatype: "text",                 success:function(data)                 {                      $("#leaverecordstable").html(data);                     $( "#leaverecordstable" ).accordion({                           collapsible: true,                           icons: null,                           heightstyle: "content"                         });                 }             }); 

html:

<div id="leaverecordstable"> </div> 

okay happens gets data correctly servlet, , adds dom, reason height of each div inside accordion 0, little space , can't bigger.

i know caused ajax , dynamically adding accordion because if add own headings , divs inside "leaverecordstable" div, , not execute ajax execute accordion method, shows correct heights.

link image see looks (note: inside accordion in each div there textfields , data, height should lot bigger):

<a href='http://postimg.org/image/rp6eilhvh/' target='_blank'><img src='http://s22.postimg.org/rp6eilhvh/accordion.jpg' border='0' alt="accordion" /></a> 

data i'm sending servlet:

out.println("<h3>" + "number: " + q + "</h3>"); out.println("<div style='height:0px;'>"); out.println("<table>"); out.println("<tr>"); out.println("<td>from date</td>"); out.println("<td><input type='text' id='from' name='from' readonly='readonly' style=' width:185px;'/></td>"); out.println("<td style='width:60px;'>to date</td>"); out.println("<td><input type='text' id='to' name='to' readonly='readonly' style=' width:185px;'/></td>"); out.println("</tr>"); out.println("</table>"); out.println("</div>"); 

basically gets added "leaverecordstable" (a few of these headings & divs):

<h3>number: 1</h3> <div> <table> <tr> <td>from date</td> <td><input type='text' id='from' name='from' readonly='readonly' style=' width:185px;'/></td> <td style='width:60px;'>to date</td> <td><input type='text' id='to' name='to' readonly='readonly' style=' width:185px;'/></td> </tr> </table> </div> 

try this

$.ajax(         {             url:'myservlet.jsp',             type:"get",             async:true,             datatype: "text",             success:function(data)             {                  $("#leaverecordstable").html(data);                 $( "#leaverecordstable" ).accordion({                       collapsible: true,                       icons: null,                       heightstyle: "content"                     });                 $("#leaverecordstable").accordion("refresh");             }         });