JQuery Accordion Ajax高度問題

我遇到了實現JQuery Accordion的問題。JQuery Accordion Ajax高度問題

好了，所以基本上我需要什麼/我做的是以下幾點：

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

好了，所以現在發生的事情是，它得到的數據正確地從我的servlet中，並且它完美地將其添加到DOM，但由於某種原因，手風琴內每個div的高度爲0，這是一個小空間，我無法做到更大。

我知道它是由ajax和動態添加手風琴引起的，因爲如果我在「leaveRecordsTable」div中添加自己的標題和div，並且不執行ajax而是執行手風琴方法，它將與正確的高度。

鏈接到圖片，看看是什麼樣子（注：在裏面每個手風琴的div有文本字段和數據，因此高度應該是大了很多）：

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

數據我送從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>");

基本上，這被添加到「leaveRecordsTable」（幾個這些標題的&的div）：

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

來源

2013-07-15 Foxticity

你能不能請您發佈從Ajax請求接收數據。 –

@PranayPrakash請參閱我上面的編輯。 – Foxticity

試試這個

$.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"); 
      } 
     });

來源

2013-07-15 11:09:06

仍然無法正常工作，但僅用於測試目的，我添加了一個附加按鈕，其中包含一個被單擊時調用的方法，請執行以下操作：$（「＃leaveRecordsTable」）。accordion（「destroy」）。accordion（）;這是有效的，但在數據設置後調用它，仍然無法工作？ – Foxticity

嗯，我注意到一件事，你對每個div都有相同的內容。因此，使用CSS設置div的高度，然後將'heightStyle：'content「'改爲'heightStyle：」fill「'並移除刷新行（即'$（」＃leaveRecordsTable「）。accordion（」refresh「）; ）Temme會發生什麼 –

僅用於測試目的，仍然不應該是一個問題。對於生產，每個div將具有相同的組件但數據不同。 – Foxticity

JQuery Accordion Ajax高度問題

回答

相關問題