In Jade, how can you call a function in external Javascript

Question

In / javascripts / showlist.js I have (plus a few more not shown)

var interestMap = gets loaded from localStorage... function getInterest(id) { return interestMap[id] || ''; } 

My showlist.jade file looks like this: (very simplistic, it is passed in the array of declarations in the variable "shows")

 extends layout script(src='/javascripts/showlist.js') block content table#showtable.sortable thead tr td... (column headers such as date and location, many are sortable) tbody each show in shows - var interest = getInterest(show._id); <<< JADE problem here tr td... (various values, including) td =interest // maybe this should be #{interest} 

but I get: "undefined is not a function" when I try to call getInterest (). So it is not visible. I also tried a small mod for external javascript

 var getInterest = function(id) { ... } 

and paste the getInterest code into the line, with no success.

Note that the base layout that it extends has doctype 5 as the first line.

As you call the external (or I even agree to the internal) javascript function from Jade. Or did I miss something simple and stupid? I also tried "../javascripts/showlist.js".

Answer 1

You are trying to call a function on the client side on the server side. That is why it returns as undefined. This does not exist here.

Your jade script() tag simply displays the <script> on the page - it does not work on the server side. To do this, you use require() instead.

Since you are referring to localStorage, you cannot just copy the function on the server side and execute it there too.

However, you can update your showlist.js so that on dom ready it updates td with their percentage value. Add the html5 attribute to your td with the show identifier. eg.

 td(data-show-id=show._id) 

Then find the td that needs updating and call getInterest ():

 $('td[data-show-id]').each(function(index){ var $el = $(this); $el.val(getInterest($el.data('show-id'))); }); 

Suppose you are running jQuery.