1

I'm new to javascript/jade. I'm attempting to create a simple example using sweetalert2 from within a jade template file. When I run the following I receive the 'Help Me' alert but when I get to the swal line I receive:

ReferenceError: swal is not defined

html  
  head
    title= title
    style.
      body {
        font-family: verdanna;
        font-size: 19px;
        background: #aaaaaa;
      }
    link(type='text/css' rel='stylesheet' href='file:///home/dave/css/sweetalert2.css')
  body
    script(src='file:///home/dave/js/sweetalert2.min.js')
    script.
      var func=function() {
        alert('Help me');
        swal('swal help');
    block content
      h2 Hello
      button(onclick='func()') Alert
  footer
    .row
      .col-xs-12
        small © Neo Inc 2017

It should be noted that I'm running this from within an express/node.js based toy application. I've verified that the sweetalert2.css and sweetalert2.min.js files exist by copying the locations from the code and inserting them into another tab on the browser. Any suggestions/help would be appreciated.

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
Dave Anderson
  • 15
  • 2

1 Answers1

1

The problem is that you can't include files with an absolute file:///... link in modern browsers from sites that are served with the HTTP protocol (source). You need to specify a relative path, e.g. src='../myPage.js'. That path should be relative to the directory the HTML/Pug file is located in.

gandreadis
  • 3,004
  • 2
  • 26
  • 38
  • I modified the script line as follows: 
    script(src='../js/sweetalert2.min.js')
    And in my firebug console output I now receive: "Network Error: 404 Not Found - http://localhost:3017/js/sweetalert2.min.js" My app is running on port 3017     – Dave Anderson Sep 01 '17 at 15:50
  • You need to serve that `js` folder as well ([quite straightforward](https://expressjs.com/en/starter/static-files.html) in Node express). The problem is that you're mix-and-matching files served from your file system and files served from your Node.js server - they need to be served by only _one_ of those two – gandreadis Sep 01 '17 at 16:00
  • That was it! I appreciate the answer and the references...thanks! – Dave Anderson Sep 01 '17 at 16:36