Pug file not recognizing jQuery

Question

I have a simple Pug interface for my Node/Express app that includes a WebChat widget and some tabs that have iFrames in them. I want to use a jQuery snippet to capture a variable and put it into the URLs located inside the tabs' iFrames. For now, I'm just trying to get the Wikipedia URL to work (variable is inputMessage).

The problem is I need the jQuery to be a part of my WebChat widget script in order to capture the user's input from its input box (into a variable), but then the script runs and the footer tabs have not even been created yet, so when the project runs, I get an "undefined" as a URL from Wikipedia, because inputMessage was never placed there correctly. But I can't place a footer before the script either, since the tabbed iFrames need to be lower on the page than the chat widget. I imagine there are many ways to achieve this. I'm new to Pug and scripts, so I'm not aware of a way yet.

index.pug

extends layout

block content

  doctype html
  html(lang="en")
    head
      meta(charset='utf-8')
      meta(name='viewport' content='width=device-width, initial-scale=1')
      script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')

    article
      ul
        li.title Study Bot
        li.robot 
          img(src='/images/robot-face.jpg' alt='Robot face')

    chat-window
      #webchat(action='/chat', method='POST')
      script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
      script.
        const styleSet = window.WebChat.createStyleSet({
          bubbleBackground: 'rgba(252, 229, 53, 1)',
          bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
          paddingRegular: 10,
          sendBoxHeight: 50,  
          bubbleMinWidth: 400,
          bubbleMaxWidth: 700
        });
        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }),
        styleSet
        }, document.getElementById('webchat'));

        // Add on keypress listener to text input and wait for the user to hit the `enter` key
        $("input[aria-label='Type your message']").on('keypress', event => {
          // Check if user pressed `enter`
          if (event.which === 13){
            var inputMessage = $("input[aria-label='Type your message']").val();
            document.getElementById('#tab-window').innerHTML = inputMessage;
          }
        });

    footer
      .tab
        button.tablinks(onclick="openSite(event, 'Encyclopedia')") Encyclopedia
        button.tablinks(onclick="openSite(event, 'MSAcademic')") Microsoft Academic
        button.tablinks(onclick="openSite(event, 'NewsBlogs')") News / Blogs
      #Encyclopedia.tabcontent
        iframe#tab-window(src=`https://en.wikipedia.org/wiki/${inputMessage}`)
      #MSAcademic.tabcontent
        iframe#tab-window(src='https://academic.microsoft.com/')
      #NewsBlogs.tabcontent
        iframe#tab-window(src='https://www.bing.com/')

    script
      include ../routes/index.js

score 2 · Accepted Answer · answered Jan 02 '19 at 20:33

Turns out I had a:

doctype html html(lang="en") head

in both my index.pug file and my layout.pug file. I only needed it in my layout.pug file, so I guess the script was having troubles being read. Since I'm new to Pug, I overlooked that. So now I have the following code that works:

index.pug

extends layout

block content

  article
    ul
      li.title Study Bot
      li.robot
        img(src='/images/robot-face.jpg' alt='Robot face')

  chat-window
    #webchat(action='/chat', method='POST')
    script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
    script.
      const styleSet = window.WebChat.createStyleSet({
        bubbleBackground: 'rgba(252, 229, 53, 1)',
        bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
        paddingRegular: 10,
        sendBoxHeight: 50,
        bubbleMinWidth: 400,
        bubbleMaxWidth: 700
      });

      window.WebChat.renderWebChat({ directLine: window.WebChat.createDirectLine({ 
      secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }), 
      styleSet}, 
      document.getElementById('webchat'));

      // Add on keypress listener to text input and wait for the user to hit the `enter` key
      $("input[aria-label='Type your message']").on('keypress', event => {

        // Check if user pressed enter
        if (event.which === 13) {
          var inputMessage = $("input[aria-label='Type your message']").val();

          var wiki = 'https://en.wikipedia.org/wiki/' + inputMessage;
          var encycl = 'https://academic.microsoft.com/#/search?iq=%40' + inputMessage + '%40&q=' + inputMessage;
          var newsBlogs = 'https://www.bing.com/search?q=' + inputMessage;

          document.getElementById('tab1-window').src =  wiki;
          document.getElementById('tab2-window').src = encycl;
          document.getElementById('tab3-window').src = newsBlogs;
        }
      });

  tabs-container
    .tab
      button.tablinks(onclick="openSite(event, 'Encyclopedia')") Encyclopedia
      button.tablinks(onclick="openSite(event, 'MSAcademic')") Microsoft Academic
      button.tablinks(onclick="openSite(event, 'NewsBlogs')") News / Blogs
    #Encyclopedia.tabcontent
      iframe#tab1-window(src='https://en.wikipedia.org/wiki/')
    #MSAcademic.tabcontent
      iframe#tab2-window(src='https://academic.microsoft.com/')
    #NewsBlogs.tabcontent
      iframe#tab3-window(src='https://www.bing.com/')

layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/main.css')
    meta(charset='utf-8')
    meta(name='viewport' content='width=device-width, initial-scale=1')
    script(src='https://code.jquery.com/jquery-3.3.1.min.js')
    script
      include ../routes/index.js

  body
    block content

boehm_s · Answer 2 · 2019-01-02T12:16:01.543

When using document.getElementById, you must not use the #, because # is the selector that tells JQuery that tab-windo is an ID. Here, you're already selecting an ID so :

document.getElementById('tab-window')

Then, you don't want to change the content (innerHTML) of your Iframe, but it's source (src), so we now have :

document.getElementById('tab-window').src = inputMessage

EDIT

You could try to wait for the DOM content to be loaded, and then execute your script :

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  // do your stuff here
});

Or (more explicitly) wait for JQuery to be loaded :

See this answer

Hope it helps, keep me updated,
Regards

Thanks @boehm_s, I corrected that, it's still coming up as undefined in my Wikipedia query though. I'm sure it's because the script is before the creation of the tabs, I just don't know how else to make it work since the tabs must come below the chat widget. — Azurespot, Dec 27 '18 at 20:26

Pug file not recognizing jQuery

2 Answers2