Файл мопса, не распознающий jQuery

Question

У меня есть простой интерфейс Pug для моего приложения Node / Express, включающий виджет WebChat и некоторые вкладки с iFrames в них.Я хочу использовать фрагмент jQuery для захвата переменной и помещения ее в URL-адреса, расположенные внутри вкладок iFrames.Сейчас я просто пытаюсь заставить работать URL-адрес Википедии (переменная inputMessage ).

Проблема в том, что мне нужно, чтобы jQuery был частью моего скрипта виджета WebChat вчтобы захватить ввод пользователя из его поля ввода (в переменную), но затем сценарий запускается, и вкладки нижнего колонтитула еще даже не были созданы, поэтому, когда проект запускается, я получаю «неопределенный» в качестве URL-адреса из Википедии,потому что inputMessage никогда не был помещен туда правильно.Но я не могу поместить нижний колонтитул перед сценарием, так как iFrames с вкладками должны быть ниже на странице, чем виджет чата.Я думаю, что есть много способов достичь этого.Я новичок в Pug и скриптах, поэтому пока не знаю, как это сделать.

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

Answer 1

Оказывается, у меня было:

doctype html html(lang="en") head

как в моем файле index.pug, так и в файле layout.pug.Мне это нужно было только в моем файле layout.pug, поэтому я думаю, что у сценария были проблемы с чтением.Так как я новичок в Pug, я упустил это.Так что теперь у меня есть следующий код, который работает:

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

Answer 2

При использовании document.getElementById вы не должны использовать #, потому что # - это селектор, который сообщает JQuery, что tab-windo является идентификатором.Здесь вы уже выбираете идентификатор так:

document.getElementById('tab-window')

Затем вы не хотите изменять содержимое (innerHTML) вашего Iframe, но его источник (src), поэтомутеперь у нас есть:

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

РЕДАКТИРОВАТЬ

Вы можете попытаться дождаться загрузки содержимого DOM, а затем выполнить свой сценарий:

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

Или (более явно) дождитесь загрузки JQuery:

См. Этот ответ

Надеюсь, это поможет, держите меня в курсе,
С уважением