Call Jade mixin function on button click

Question

I'm trying to create a dynamic table where the user can press a button and the content of the table is updated.

Code

extends layout

// Builds a row in the table
mixin tableRowBuilder(modules)
  tr
    for module, index in modules
      td
        if module.name
          +cardBuilder(module.name, module.time, module.location)

// Builds card to be displayed in the table
mixin cardBuilder(name, time, location)
  .card-panel.teal
    span.white-text
      h5= name

      i.material-icons.left alarm
      p= time

      i.material-icons.left place
      p= location

block content

  table#timetable
    thead
      tr
      // Table headers here...  
    tbody

      +tableRowBuilder(morningModules)
      +tableRowBuilder(afternoonModules)      

    script.
      function semesterOneButtonClicked() {

        $('#timetable').empty();
        $('#timetable').addRow(tableRowBuilder(morningModules))
        $('#timetable').addRow(tableRowBuilder(afternoonModules))
      }

Currently however I get the error:

ReferenceError: Can't find variable: tableRowBuilder

Which I'm assuming is because the mixin isn't within the same context as the script .

So my question is: Is what i'm trying possible to achieve?

Answer 1

in my opinion it should not work, because js execution and jade execution it is different stages and different scopes, you need to call it mixin in jade, to leave the result in a hidden element and get later get it from js

try:

extends layout

// Builds a row in the table
mixin tableRowBuilder(modules)
  tr
    for module, index in modules
      td
        if module.name
          +cardBuilder(module.name, module.time, module.location)

// Builds card to be displayed in the table
mixin cardBuilder(name, time, location)
  .card-panel.teal
    span.white-text
      h5= name

      i.material-icons.left alarm
      p= time

      i.material-icons.left place
      p= location

block content

  #morning-modules-row(style='display:none')
      +tableRowBuilder(morningModules)
  #afternoon-modules-row(style='display:none')
      +tableRowBuilder(afternoonModules)

  table#timetable
    thead
      tr
      // Table headers here...  
    tbody

      +tableRowBuilder(morningModules)
      +tableRowBuilder(afternoonModules)      

    script.
      function semesterOneButtonClicked() {

        $('#timetable').empty();
        $('#timetable').addRow($('#morning-modules-row')[0].innerHTML);
        $('#timetable').addRow($('#afternoon-modules-row')[0].innerHTML);
      }