jQuery I'm using to make the rows of my table sortable is not working-CodePudding

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 >
      <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 >' awayLineup[i][54] '</td><td >' awayLineup[i][52] '</td><td >' awayLineup[i][0] '</td><td >' awayLineup[i][3] '</td><td >' awayLineup[i][4] '</td><td >' awayLineup[i][7] '</td><td ><span >' awayLineup[i][32] '</span></td><td >' awayLineup[i][33] '</td><td >' awayLineup[i][34] '</td><td >' awayLineup[i][35] '</td><td >' awayLineup[i][36] '</td><td >' awayLineup[i][37] '</td><td >' awayLineup[i][38] '</td><td >' awayLineup[i][39] '</td><td >' 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>

CodePudding user response：

When I saw your script, it seems that jQuery UI is not loaded. So, how about the following modification?

From:

<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();
  });

To:

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
  $(function() {
    google.script.run.withSuccessHandler(displayAwayLineup).getLineupV2();
  });

In your script, var awayLineup = of var awayLineup = google.script.run can be removed.

Reference:

jQuery UI