Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

How to trigger a JavaScript function on load?

I’ve got a basic page that displays a table. I’m choosing Tablesorter for my table (jQuery tablesorter 2.0). This is done by referencing the tablesorter theme in the className of the Table html component, like so:

myTable = html.Table(myTableHeader + [myTableBody], 
                        className='tablesorter-blue')

^Obviously you also need to have referenced the blue css as an external css script plus the jQuery and tablesorter scripts which you can either download or reference externally from the CDN (jquery.tablesorter - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers / jQuery tablesorter 2.0).

So the above works if I set the className to tablesorter-blue matching the definition in the css file (https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.css).

However, what this doesn’t do is enable two tablesorter widgets, in particular zebra and filter. The first is a style preference, the second allows text input filtering on column values. Applying the widgets is done via a JavaScript call like so:

$(function() {
  // call the tablesorter plugin
  $("table").tablesorter({
    theme: 'blue',
    widgets : [ 'zebra', 'filter' ]
  });
});

As you can see this achieves two things: first it sets the theme to blue, and second enables the widgets. So what I should be able to do is just set the className to tablesorter per the documentation, then call the function separately. However, I cannot get this to trigger in Dash, even if I add this to a separate js under assets. I’ve also experimented with the including a html.Script() as well, but no luck. I keep having to go into Chrome developer console to do it manually.

How can I do this through Dash?

I guess you could either do the import post rendering as in this example,

Or alternatively use a client side callback. That being said, mixing jQeury and React is typically not the best idea.

mixing jQeury and React is typically not the best idea.

That’s fair enough but, my Dash apps are not critical so I’ll risk it in the interim.

The solution in the SO post is to use dash-defer-import-js module. I’m using conda and can’t find it in the channels; I’d rather avoid pip installs.

However, the SO post is indeed what’s needed. The function needs to be called after rendering. Are there no other alternatives? What about onload html event on the div or something?

Solved it but not in the way I’d hoped. Isn’t elegant. Using: https://github.com/zouhairm/dash_defer_js_import

And then load the table plus a html.P(dji.Import('customtrigger.js')).

While it works, maybe there’s a path which doesn’t require a pip install outside of a conda env. And as you say, I should look into the dash datatable component to replace tablesorter.

Yes, i think for most cases, a “real” Dash component would be better. An alternative to the DataTable is the DashTabular,

I have only used it in one project, but so far i like it :slight_smile:. Is there a reason you don’t like packages from pypi? I never publish any of my code on conda channels.