I'm re-writing a project of mine to better align with the best practice documentation. I'm most of the way there, but it seems the jQuery I'm using to make the rows of my table sortable is not working. When I inspect the raw HTML of the table when it loads following the async call, I noticed that the sortable classes that the jQuery sortable widget is supposed to embed is not there (I can see it in my old code).
I have the relevant code duplicated on this sheet, but I'll include it here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_top">
<?!= include('1.1 openPackV2Stylesheet'); ?>
</head>
<body>
<div class="grid-container">
<table id="awayLineup">
<thead>
<tr>
<th></th>
<th>Rtg</th>
<th>Season</th>
<th>Name</th>
<th>Age</th>
<th>Team</th>
<th>OB</th>
<th>Out</th>
<th>Walk</th>
<th>Single</th>
<th>Single+</th>
<th>Double</th>
<th>Double+</th>
<th>Triple</th>
<th>Homer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?!= include('1.1 openPackV2Javascript'); ?>
</body>
</html>
1.1 openPackV2Javascript
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
function displayAwayLineup(awayLineup){
// $('.loading').style.display("hidden");
var tbody = $('#awayLineup > tbody');
for (i in awayLineup){
tbody.append(
'<tr><td class="demographics">'+awayLineup[i][54]+'</td><td class="demographics">'+awayLineup[i][52]+'</td><td class="demographics">'+awayLineup[i][0]+'</td><td class="playerName">'+awayLineup[i][3]+'</td><td class="demographics">'+awayLineup[i][4]+'</td><td class="demographics">'+awayLineup[i][7]+'</td><td class="cardData"><span class="circle">'+awayLineup[i][32]+'</span></td><td class="cardData">'+awayLineup[i][33]+'</td><td class="cardData">'+awayLineup[i][34]+'</td><td class="cardData">'+awayLineup[i][35]+'</td><td class="cardData">'+awayLineup[i][36]+'</td><td class="cardData">'+awayLineup[i][37]+'</td><td class="cardData">'+awayLineup[i][38]+'</td><td class="cardData">'+awayLineup[i][39]+'</td><td class="cardData">'+awayLineup[i][40]+'</td></tr>')
}
}
// make tables sortable
$(window).on("load", function(){
$("table tbody").sortable({
helper:function(e,row){
var originalCells = row.children();
var cloneRow = row.clone();
cloneRow.children().each(function(index){
$(this).width(originalCells.eq(index).width());
})
return cloneRow;
}
});
});
</script>