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

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>

Solution 1:^[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tanaike

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

Solution 1:[1]

From:

To:

Reference:

Sources

Related Questions

Solution 1:^[1]