I have a simple web page where for each row of data, I can pop up a jQuery UI dialog with the details of that row. Since there can be multiple rows in the sub-query a table is the best choice. The result is that I get an empty dialog box, and the table contained in that div (the one for the dialog) appears at the bottom of the page, whether the row is clicked to activate the dialog. Everything else works perfectly, the event for the click, the dialog popup, the passing of the right id for the div, all perfect.
But the dang table (the one inside the dialog, with the class of 'inner-table') appears at the bottom of the page, right off the bat.
The HTML is created in Groovy, with the HTMLMarkupBuilder, and the resulting HTML looks like the following:
<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>
The jQuery for this is pretty simple; it uses the id from the row clicked on, and pops up a dialog window. That works fine, but the table that is contained in that div is actually at the bottom of the screen, even before anything is clicked:
$(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
});
});
} );
At first, I thought the Groovy HTMLMarkupBuilder was outputting the DOM before everything happened, but when I do a view source, copy it to a file, and open the file in my browser, I get the same result.
I would appreciate any help with this. I asked this question earlier, in case you want to complain about that, but I had to follow up some other potential issues in the Groovy code, which I resolved. This example is more complete, and represents exactly what my code will do.
Brian
The problem is that you have a div nested within a table outside of a TR and TD, which will cause the rendering and DOM to be a bit wrong. If you adjust the html so that it resembles something like this it will work:
<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>
</tbody>
</table>
<div id='dialog-23456789' class='details-dialog' style="display:none;">
<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>
</div>
The trick is to move the div outside of the parent table and also you need to set the display:none on the details table or it will be shown when the page is rendered.
Related
Does jQuery mobile has anything for highlight? For example, highlight a table row. Jquery ui has ui-state-highlight.
<table>
<tr class="ui-state-highlight">
It should works with different themes and swatches.
Thanks.
/*
I'm also searching for that question. The only way I just now can think at this is using jQuery to find the selector:
$("table tr.myTR").addClass('error');*/
----------
<style>
.error {
background-color: #fbec88;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
<div data-role="content">
<table data-role="table" data-mode="" id="myTable">
<tbody>
<tr class="myTR">
<td>Alfreds Futterkiste</td>
</tr>
<tr>
<td>Maria Anders</td>
</tr>
<tr>
<td>Obere Str. 57</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td>12209</td>
</tr>
<tr>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(function () {
$("table tr.myTR").addClass('error');
})
</script>
This is what my highchart looks like atm
I kinda want the chart to be on the right side while the table to be on the left
this is my html:
<div id="words" style="width:70%;float:left;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead>
<tr>
<th>Word</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>icon</td>
<td>12</td>
</tr>
<tr>
<td>text</td>
<td>12</td>
</tr>
<tr>
<td>your</td>
<td>9</td>
</tr>
<tr>
<td>post</td>
<td>6</td>
</tr>
<tr>
<td>document</td>
<td>5</td>
</tr>
<tr>
<td>with</td>
<td>5</td>
</tr>
<tr>
<td>parentNode</td>
<td>4</td>
</tr>
<tr>
<td>email</td>
<td>4</td>
</tr>
<tr>
<td>com"</td>
<td>4</td>
</tr>
<tr>
<td>googletag</td>
<td>3</td>
</tr>
</tbody>
</table>
What should i do to achieve such output?
If you can change HTML, then simply put table before Highcharts container and set proper styles (float, width). For example you can also use two divs: http://jsfiddle.net/68qdew8g/
<div style="float: left; width: 30%;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
...
</table>
</div>
<div id="words" style="width:70%;float:left;"></div>
I have nested tables where both the inner and outer tables have rows added to them dynamically. When I trigger an update of an inner table, after the inner table order has been changed, the order of the outer table is also changed. I've created a jsfiddle to demonstrate this:
http://jsfiddle.net/FZLxp/
which is forked from the OS question Nested jQuery Tablesorter tables, all sortable
To see the problem sort the outer table by Make so that Toyota is at the top and then click the "update" button. The update button triggers an update of the inner toyota table but also sorts the outer table as well to reflect the sort direction of the Toyota Doors column.
How can I sort the inner table after adding additional rows without sorting the outer table as well?
<script type="text/javascript">
function updateRW() {
$("#toyota").trigger("update", [true]);
}
</script>
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table id="toyota" class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type=button value="update" onclick="updateRW()">
$(document).ready(function()
{
$("table").tablesorter({selectorHeaders: '> thead > tr > th'});
});
This appears to be a bug in tablesorter!
I've opened an issue so we can track it, and I should have this fixed in the next update.
Thanks for reporting it!
I have a jquery dialog that contains a jquery accordion among other things. When I click the accordion headings to expand the different sections, the elements above the accordion lose their padding for the duration of the animation. The result is that these elements shift to the left for the duration of the animation. Below are the HTML/JS snippets in question.
Any thoughts?
HTML:
<div id="bodyDiv">
<!-- Dialog -->
<div id="patientPopup" title="Patient:" class="ui-widget">
<table style="width: 100%">
<tr>
<td class="AppointmentImage">
<img src="images/John-Petrucci-tn.jpg" alt="Patient Photo">
</td>
<td>
<b>Name:</b> Smith, Sally <b>DOB:</b> 02/15/1984 <br />
<b>SSN:</b> 999-99-9999 <b>Address:</b> 123 Main St Nashville, TN 37204
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%">
<!--Accordion-->
<div id="patientSummary">
<h3>Encounters</h3>
<div>
<table class="PatientSummary">
<tr>
<th>12/03/2011</th>
<td>
Office visit - this is text for the office visit. some notes perhaps.
</td>
</tr>
<tr>
<th>10/16/2011</th>
<td>
GYN visit - this is text to fill some space.
</td>
</tr>
</table>
</div>
<h3>Alerts</h3>
<div>
<ul>
<li>Diabetic</li>
<li>Due for FluShot</li>
</ul>
</div>
<h3>Labs/Radiology</h3>
<div>
<table style="vertical-align: text-top;">
<tr>
<th>Date</th>
<th>Lab</th>
<th>Result</th>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<button id="showPatient">Show Patient</button>
</div>
JavaScript:
$("#patientPopup").dialog({
autoOpen: false,
modal: true,
height: 530,
width: 600,
draggable: false,
resizable: false,
open: function () {
$("#patientSummary").accordion({
fillSpace: true,
autoHeight: true
});
}
});
$("#showPatient").button().click(
function () {
$("#patientPopup").dialog("open");
}
);
Any help would be appreciated. Thanks!
The solution was quite simple. I ended up putting the image and text in a completely separate table than the accordion.
Never determined exactly why the top elements were losing their padding though...
I'm using a jQuery UI sortable with a table (works fine). I would like to make the header and last row fixed (non-moveable).
The jQuery UI docs indicate this can be done using a selector for items, but I am at a loss for the syntax.
Here is the relevant code:
<script type="text/javascript">
$(function () {
$("#response_options tbody.content").sortable();
$("#response_options tbody.content").disableSelection();
});
</script>
<table id="response_options" class="data-table">
<tbody class="content">
<tr>
<th>Links</th><th>Response</th>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 1</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 2</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 3</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 4</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 5</td>
</tr>
<tr>
<td>Edit</td>
<td>Item 1</td>
</tr>
</tbody>
</table>
The selector goes inside .sortable(...):
$("#response_options tbody.content").sortable();
as
$("#response_options tbody.content").sortable( items: ??? );
and it should be possible to select only items with class="sortable-row"; but again, I am at a loss for the syntax.
This should work:
$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});
This worked for me:
jQuery(".sortable tbody").sortable({
items: 'tr:not(:first)'
});
For this markup:
<table id="tableid">
<thead>
<tr>
<th>namr</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>jagadeesh</td>
<td>1</td>
</tr>
<tr>
<td>jagadeesh</td>
<td>2</td>
</tr>
</tbody>
</table>
Use this jQuery:
$('#tableid tbody').sortable();
It will move only body content of table you cannot move header part.