Sweetalert2 in Jade

Question

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.

gandreadis · Accepted Answer · 2017-08-31 12:00:28Z

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.

answered Aug 31, 2017 at 12:00

gandreadis

3,25233 gold badges3030 silver badges3939 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Anderson Over a year ago

I modified the script line as follows: <pre> script(src='../js/sweetalert2.min.js') </pre> And in my firebug console output I now receive: "Network Error: 404 Not Found - localhost:3017/js/sweetalert2.min.js" My app is running on port 3017

gandreadis Over a year ago

You need to serve that js folder as well (quite straightforward 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

Dave Anderson Over a year ago

That was it! I appreciate the answer and the references...thanks!

Collectives™ on Stack Overflow

Sweetalert2 in Jade

1 Answer 1

3 Comments

Your Answer

Post as a guest

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related