Tablesorter non-functional after load even though its placed in the
callback function
I had a similar question earlier and at the time placing the tablesorter
call in the .load() callback worked, but now, after what I thought was
unrelated changes, its devolved to its former behavior: It sorts
initially, but after the load clicking on the column headers has no
effect. Any help is appreciated.
JS code:
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables');
}, 5000);
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index
#status-tables',
function(){$("#workstation-table").tablesorter(); });
}, interval);
}
});
$("#workstation-table").tablesorter();
});
HTML (from HAML template):
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css"
media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA="
name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<button class='btn btn-default' id='refresh-5-sec'>5
sec</button>
<button class='btn btn-default' id='refresh-30-sec'>30
sec</button>
<button class='btn btn-default' id='refresh-60-sec'>60
sec</button>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>Status Dashboard</small>
</h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne'
data-toggle='collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered'
id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
1,578,262
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
5,828,812
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
2,970,946
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,918,186
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
6,331,230
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
9,082,103
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
9,681,110
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
5,572,147
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
502,000
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
6,517,368
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
8,603,032
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
8,716,460
</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs'
data-toggle='collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered'
id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
3,286,731
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Sunt
</td>
<td>
3,269,134
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
6,720,385
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
4,965,628
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,318,889
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,060,083
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Sunt
</td>
<td>
7,625,906
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,863,118
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
1,294,952
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,809,659
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>(click column name to sort)</div>
</div>
<table class='table table-striped table-hover table-bordered'
id='workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>
dignissimos
</td>
<td>
19,787
</td>
<td>
1,278,685
</td>
<td>
2013-09-01 07:59:58
</td>
</tr>
<tr>
<td>
sint
</td>
<td>
23,634
</td>
<td>
5,673,401
</td>
<td>
2013-09-15 12:43:55
</td>
</tr>
<tr>
<td>
magnam
</td>
<td>
31,465
</td>
<td>
4,094,304
</td>
<td>
2013-09-03 09:56:55
</td>
</tr>
<tr>
<td>
enim
</td>
<td>
36,566
</td>
<td>
4,579,378
</td>
<td>
2013-09-01 08:09:41
</td>
</tr>
<tr>
<td>
quos
</td>
<td>
28,638
</td>
<td>
5,486,033
</td>
<td>
2013-07-16 01:56:16
</td>
</tr>
<tr>
<td>
voluptatibus
</td>
<td>
15,129
</td>
<td>
2,612,705
</td>
<td>
2013-07-14 04:35:11
</td>
</tr>
<tr>
<td>
ullam
</td>
<td>
17,624
</td>
<td>
3,661,141
</td>
<td>
2013-07-10 10:33:42
</td>
</tr>
<tr>
<td>
et
</td>
<td>
52,962
</td>
<td>
3,951,956
</td>
<td>
2013-07-10 09:24:28
</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
<tr>
<td>
CIDNE
</td>
<td>
http://lang.com/jarrett_reynolds
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://mraz.net/coy
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
HAML (just in case its helpful):
.whole-page
.container
%h1#application-title.hero-unit
.row-fluid
.span1#replication-server
= image_tag "cog_logo.png"
= image_tag "crs.png"
Replication Server
.span1.pull-right#refresh-label
%button.btn#refresh-button Refresh Rate
.btn-group#refresh-buttons
%button.btn.btn-default#refresh-off Off
%button.btn.btn-default#refresh-5-sec 5 sec
%button.btn.btn-default#refresh-30-sec 30 sec
%button.btn.btn-default#refresh-60-sec 60 sec
%h2
%small#application-name-label Status Dashboard
#status-tables
.col-md-4
%h3 Reports
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target
=> "#collapse-cidne"} } CIDNE
#collapse-cidne.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- @reports.each do |report|
- if report[:source] == "CIDNE"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target
=> "#collapse-dcgs"} } DCGS
#collapse-dcgs.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- @reports.each do |report|
- if report[:source].blank?
- elsif report[:source] == "DCGS"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
.col-md-5
%h3#workstation-title Workstations
.span-1
#sort-instructions (click column name to sort)
%table#workstation-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Name
%th#table-header Downloaded
%th#table-header Available
%th#table-header Last Connect
%tbody
- @workstations.each do |workstation|
%tr
%td
= workstation[:name]
%td
= workstation[:downloaded]
%td
= workstation[:available]
%td
= workstation[:last_connect]
.col-md-3
%h3 Source
%table.table.table-striped.table-hover.table-bordered
%tr
%th#table-header Type
%th#table-header Name
%th#table-header Status
- @data_sources.each do |data_source|
%tr
%td
= data_source[:type]
%td
= data_source[:name]
%td
- if data_source[:status] == "UP"
#service-up
- else
#service-down
No comments:
Post a Comment