node.jsjade4j

tab its not working correctly


I am trying to put a tab panel in my Node.js with Express but I can't change the text when I click in the tab for example general.

I don't have any errors.

I don't know why it is not working. I am converting the PHP website to Node.js Jade and Express.

This is my code:

Jade file:

   block content
  h1 Last News
  section#page-title
      h1.mainTitle 
      br
      .tabbable
        ul#myTab2.nav.nav-tabs.nav-justified
          li.active
            a(href='#All', data-toggle='tab')
              | All
          li
            a(href='#Geral', data-toggle='tab')
              | General
          li
            a(href='#Events', data-toggle='tab')
              | Events
          li
            a(href='#Updates', data-toggle='tab')
              | Updates
          li
            a(href='#Sales', data-toggle='tab')
              | Sales
          li
            a(href='#Community', data-toggle='tab')
              | Community
        .tab-content
          #All.tab-pane.fade.in.active
            p
              | Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
            p
              | Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
          #Geral.tab-pane.fade
            p
              | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.
            p
              | Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          #Events.tab-pane.fade
            p
              | Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.
            p
              | Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

and my New.js:

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.render('news', { title: ' Last news' });
  $(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
});
});

module.exports = router;

What am I doing wrong?


Solution

  • Node.js is Server Side, you can't update the contents of a Web Page within the Browser from Express. With Express, you can only respond to requests for data. You will need to build out an API of Routes within your Express application to retrieve data from your Data Store and when a request is received via AJAX calls from within you UI code.