データの行ごとに、その行の詳細を含む jQuery UI ダイアログをポップアップできる単純な Web ページがあります。サブクエリには複数の行が存在する可能性があるため、テーブルが最適な選択です。その結果、空のダイアログ ボックスが表示され、行をクリックしてダイアログをアクティブにするかどうかに関係なく、その div (ダイアログのテーブル) に含まれるテーブルがページの下部に表示されます。他のすべては完全に機能し、クリックのイベント、ダイアログのポップアップ、div の正しい ID の受け渡しなど、すべて完璧です。
しかし、dang テーブル ('inner-table' のクラスを持つダイアログ内のテーブル) は、すぐにページの下部に表示されます。
HTML は HTMLMarkupBuilder を使用して Groovy で作成され、結果の HTML は次のようになります。
<html>
<head>
<title>NAS Execution Groovy Servlet</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.dataTables.min.js'></script>
<script type='text/javascript' src='js/executions.js'></script>
<link rel='stylesheet' type='text/css' href='css/jquery.dataTables_themeroller.css'></link>
<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'></link>
<link rel='stylesheet' type='text/css' href='css/nas.css'></link>
</head>
<body>
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<div id='dialog-23456789' class='details-dialog'>
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</body>
</html>
このための jQuery は非常に単純です。クリックされた行の ID を使用し、ダイアログ ウィンドウをポップアップ表示します。これは問題なく動作しますが、その div に含まれるテーブルは実際には、何かがクリックされる前であっても画面の下部にあります。
$(document).ready(function() {
$('#nas-table').dataTable( {
"bJQueryUI": true,
"aaSorting": [[4, 'asc']]
} );
$('.row').live("click", function(){
var target = $(this);
var backupId = $(this).children(":first").html();
var thisId = '#dialog-' + backupId;
$(thisId).dialog(
{
title: "Backup Job Detail",
width: 800,
height: 450
}
);
$(thisId).dialog("open");
$(thisId).dialog("widget").position({
my: 'left top',
at: 'left bottom',
of: target
});
});
} );
最初は、Groovy HTMLMarkupBuilder がすべてが発生する前に DOM を出力していると思っていましたが、ソースを表示してファイルにコピーし、そのファイルをブラウザーで開くと、同じ結果が得られます。
これについて何か助けていただければ幸いです。あなたがそれについて不平を言いたい場合に備えて、私は以前にこの質問をしましたが、解決したGroovyコードの他の潜在的な問題をフォローアップする必要がありました. この例はより完全で、私のコードが何をするかを正確に表しています。
ブライアン