2

Hi I am brand new to Jade templating for Node.js. I am trying to create a basic starter application using Express 4 , JQuery, Bootstrap 3, and Jade.

I am trying to add the navbar into my layout.jade file. It seems to add the navbar, but it does not function properly. When it collapses I cannot click on the button the toggle the list of links. Also dropdown links do not work as well. I am receiving no console errors when I am inspecting in Google Chrome.

Below I have included my layout.jade, and my index.jade files.

layout.jade:

    doctype html
    html
      head
        title= title
        script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js')
        link(rel='stylesheet', href='/stylesheets/style.css')    
        link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css')
        script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')


      body
        nav.navbar.navbar-default.navbar-fixed-top
          div.container 
            div.navbar-header 
              button(type='button', class='navbar-toggle collapsed', data-target='#bs-example-navbar-collapse-1')
                span.sr-only Toggle Navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
            a.navbar-brand(href='#') Brand
            div.collapse.navbar-collapse(id='bs-example-navbar-collapse-1')
              ul.nav.navbar-nav
                li
                  a(href='#') Link 

        block content

index.jade:

    extends layout

    block content
      h1 #{8oo8s}
      p Welcome to #{title}

Here is a link to my git-hub containing the full code repository.

Here is a link to where the application is running live on Heroku.

Thank you for your time in advance and please let me know if there is any more information I should include that would be more helpful,

Sincerely Fred K

Edit: I changed href to src on line 5 and 8 of layout.jade as informed by user oddarriba below I have also indented to source file references to include them in the head on lines 5-8 in layout.jade.

Answer:

So there was two problems from where I had originally started. The first issue was in my source tags for JQuery and Boostrap.js I was trying to reference them using a href. User Odarriba suggested that I changed the href to src. This was correct and solved the first problem. The second problem lies somewhere in the sytax for my navigation bar. I replaced it with boilerplate code I obtained from here and that solved the second problem. Thank you all for your time.

1 Answer 1

1

I think you are having a problem with the inclusion of external JS libraries.

To load jQuery and Bootstrap CSS correctly, use the src attribute of script tag instead of href, which is used in links.

Something like:

doctype html
html
  head
    title= title
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js')
    link(rel='stylesheet', href='/stylesheets/style.css')    
    link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css')
    script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')


  body
    nav.navbar.navbar-default.navbar-fixed-top
      div.container 
        div.navbar-header 
          button(type='button', class='navbar-toggle collapsed', data-target='#bs-example-navbar-collapse-1')
            span.sr-only Toggle Navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
            a.navbar-brand(href='#') Brand
        div.collapse.navbar-collapse(id='bs-example-navbar-collapse-1')
          ul.nav.navbar-nav
            li
              a(href='#') Link 

    block content

Hope this helps!

2
  • Hi I went back and changed the href inside of the jquery and boostrap source refereces to src as they should be. I also indented the tags to include them in the head as you have.Here is a link to a pastebin containing the changes made. I have also updated my github and pushed the changes through to the heroku app listed above. Unfortunately this did not solve my problem. I am continuing to look over now to see if I missed something. Thank you so much for your time.
    – tilted
    Mar 4, 2015 at 22:07
  • Hey so there is something wrong with my navbar syntax. I went at got boilerplate code for a jade boostrap nav bar from here and plugged it in over my old nav bar. That along with the changes you suggested enabled me to have a working bootstrap nav bar. Thank you so much .
    – tilted
    Mar 4, 2015 at 22:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.