1

I am trying to understand how to ensure my code runs after an external JS file has finished running.

If you need a specific implementation, you can look at this SO question, which I am trying to help answer: How to get the last table row no matter the sort?

TDLR: The script found in bootstrap-sortable.js runs a table sort. After this table sort is complete; I want to make it so that I can run a snippet, which will add a simple CSS class to the last element in the freshly sorted table. The adding of the class can easily be achieved by this JQuery snippet:

var lastRow = $(this).closest("table").find("tbody tr:last");

if(!lastRow.hasClass("dropup")){
    // Removing dropup class from the row which owned it
    $(this).closest("table").find("tbody tr.dropup").removeClass("dropup");
    // Adding dropup class to the current last row
    lastRow.addClass("dropup");
}

I would like to know:

  1. Is it possible to run my script after the external script is done running?
  2. If not, can you explain why?
  3. I have already considering modifying bootstrap-sortable.js to add my script to it, is this the best recommendable approach?

Bonus round! (only if you feel you need the challenge).

Is there a better, do-it-yourself, solution for sorting the table other than using bootstrap-sortable.js for the linked question?

Thanks everyone!

Community
  • 1
  • 1
AGE
  • 3,752
  • 3
  • 38
  • 60
  • Isn't the event `$this.trigger('sorted')` what you want? – Dave Newton Dec 10 '15 at 16:42
  • is there a reason you want to use a js script and not just a CSS selector for the last row in the table? table tr:last-of-type { ... } ? – beauXjames Dec 10 '15 at 16:43
  • @DaveNewton possibly, I am not sure how your snippet works so feel free to expand in an answer if you think it's the right approach – AGE Dec 10 '15 at 16:44
  • @beauXjames only because it needs to happen once the table is done sorting. If it was possible to identify this via CSS then it would be a much simpler approach. – AGE Dec 10 '15 at 16:44
  • @AGE That is an event fired within the bootstrap-sortable code when sorting is done. – Dave Newton Dec 10 '15 at 16:59
  • @DaveNewton that's right, so I either do something within bootstrap-sortable and put my code in there, or how can I leverage this trigger event in my own snippet outside bootstrap-sortable? – AGE Dec 10 '15 at 17:00
  • @AGE Set up on `on('sorted')` (or whatever it ends up being) handler? – Dave Newton Dec 10 '15 at 17:01

1 Answers1

3

I want to thank Dave Newton for leading me to the answer to this question which is quite simple.

JSFiddle

$(document).ready(function() {
  $("#MyTable").on('sorted', function(){
    var lastRow = $("#MyTable").find("tbody tr:last");
      // Removing dropup class from the row which owned it
      $("#MyTable").find("tbody tr.dropup").removeClass("dropup");
      // Adding dropup class to the current last row
      lastRow.addClass("dropup");
  });
});

This is awesome, simple and lightweight, it also adheres to the linked question. Thanks Dave!

Community
  • 1
  • 1
AGE
  • 3,752
  • 3
  • 38
  • 60
  • 1
    No sweat. For reference: I've never used the library. I looked in the source code first for any callback events (like I thought maybe `applyLast` was a callback, but it isn't) then just looked for what happened at the end of sorting. The `trigger` was it, so figured that was their method of indicating end-of-sort, hence what you needed :) – Dave Newton Dec 10 '15 at 17:18
  • 1
    @DaveNewton I agree I also noticed all of this myself in their source code, however I was lost in terms of what to use to listen when the event had ended. So I learned something new which is awesome – AGE Dec 10 '15 at 17:21