2

JQuery アコーディオンの実装で問題が発生しています。

さて、基本的に私が必要としている/やっていることは次のとおりです。

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>

さて、サーブレットからデータを正しく取得し、DOM に完全に追加しますが、何らかの理由でアコーディオン内の各 div の高さが 0 であり、これは小さなスペースであり、できません。それくらい大きくして。

「leaveRecordsTable」div内に独自の見出しとdivを追加し、ajaxを実行せずにアコーディオンメソッドを実行すると、正しい高さで完全に表示されるため、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>

サーブレットから送信しているデータ:

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

1 に答える 1

2

これを試して

$.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-15T11:09:06.767 に答える