Jquery ui tabs with jade

Question

Hi I was trying to create Jquery UI tabs with jade template engine for node js. and its not working.

Here is the index.jade:

#tabs
  ul
    li
      a(href='#tabs-1') New employee
    li
      a(href='#tabs-2') Index of employees

  #tabs-1
    .page-header
      h1 New employee

    - var form = formFor(employee, {action: pathTo.employees(), method: 'POST', id: "employee_form", class: 'form-horizontal'})

    != form.begin()
    include _form
    .form-actions
      != form.submit('<i class="icon-ok icon-white"></i>  Create employee', {class: 'btn btn-primary'})
      span= ' or '
      != linkTo('Cancel', pathTo.employees(), {class: 'btn'})
    != form.end()

  #tabs-2
    .page-header
      h1 Index of employees


    - if (employees.length) {
    .row
      .span12
         table.table.table-striped
           thead
             tr
               th ID
               th.span3 Actions
           tbody
             - employees.forEach(function (employee) {
             tr
               td
                 != linkTo('employee #' + employee.id, path_to.employee(employee))
               td
                 != linkTo('<i class="icon-edit"></i> Edit', pathTo.edit_employee(employee), {class: 'btn btn-mini'}) + ' '
                 != linkTo('<i class="icon-remove icon-white"></i> Delete', pathTo.employee(employee), {class: 'btn btn-mini btn-danger', method: 'delete', remote: true, jsonp: '(function (u) {location.href = u;})'})
             - });
    - } else{
    .row
      .span12
         p.alert.alert-block.alert-info
            strong No employees were found.
    - }

This is my layout.jade

!!! 5
html
  head
    title= title
    != stylesheetLinkTag('http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css', 'bootstrap', 'application', 'bootstrap-responsive')
    != javascriptIncludeTag('http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'rails', 'application')
    script
      $(document).ready(function() {
        alert("hi");
        $("#tabs").tabs();
      });
    != csrfMetaTag()
  body
    .navbar
        .navbar-inner
            .container
               a.brand(href='#') Project name

    .container
      - var flash = request.flash('info').pop(); if (flash) {
        .alert.alert-info= flash
      - }

      - flash = request.flash('error').pop(); if (flash) {
        .alert.alert-error= flash
      - }

      != body

      hr
      footer
        p © Company 2012
  != contentFor('javascripts')

the tabs are not rendered.

the rendered html is at: http://jsfiddle.net/DUUdr/5/

But this is not working in jade

Answer 1

It worked the error was in the postion on jquery-min.js and jquery-ui.js

Jquery-min.js should be first and Jquery-ui.js as second in linking javascripts to the page

Updated

 != javascriptIncludeTag('http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'rails', 'application')

To

  != javascriptIncludeTag('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'rails', 'application')

Answer 2

1. You don't have a valid JQuery UI Tabs layout on your page (in template)
2. You don't have container with id tabs on your page
3. You have error in your JS - you are trying to alert undefined variable hi

Look for working example in official documentation .

Answer 3

you missed the <ul> tag inside <div id="tabs"> for tab header.. for tab to work proprely..

try this

<div id="tabs">
<ul>
  <li><a href="#tabs-1">New employee</a></li>
  <li><a href="#tabs-2">Index of employees</a></li>
</ul>
<div id="tabs-1">
 ......

i have not much idea in jade.. but the structure should be this for tab to work and for ui-css styling... add <ul><li>.... in jade structure and it should work

NOTE: you had missing "" in alert in your fiddle.. so it was ot working

and added the above <ul>.. in html and it worked... working fiddle here

updated

you have loaded your jquery ui code first and jquery min second.... that is not correct... load jquery min first and thn ui.. check out the fiddle too.. view source the fiddle and you'll get the structures..

  != javascriptIncludeTag('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'rails', 'application')