Can't get JQuery to work with Express js

Question

I'm trying to highlight every word on mouseover. I'm using node.js and express js. Here is a fiddle as example : https://jsfiddle.net/gsrgfd8e/

  var express = require('express');

  var app = express();
  app.use(express.static(__dirname + '/public'));
  app.set('view engine', 'ejs');

  //home
  app.get('/', function(req, res) {
  res.render('home');
  });

  // not found
  app.get('*', function(req, res){
  res.send('page not found');
  });

  app.listen(3000);

home.ejs

  <!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js"></script>
      <script type='text/javascript'>//<![CDATA[
      window.onload=function(){
      $(".word_split").lettering('words');
      }//]]>
      </script>

    <style type="text/css">
      #text{
        width:60%;
         margin: auto;
         text-align:justify;
         font-size:18pt;
      }
      .word_split span:hover {
      background-color: #20B2AA;
      color:white;
  }
    </style>

    <title></title>

  </head>

  <body>
    <div id="text">
      <p class="word_split">Peki nedir bu Bulletproof Coffee? Efendim adından da anlayabileceğimiz gibi cumhurbaşkanının bilmemkaçyüzbindolar değerindeki aracı gibi kurşungeçirmez özelliği olduğuna inanılan, Batman’ e, Hulk’ a, Flash’ e, Black Widow’ a, Jon Snow’a, Kenan Komutan’a, Şebnem Ferah’a ve hatta ne istiyorsanız ona dönüşebileceğinizi vaat ettiği rivayet edilen bir kahve çeşidi. Bugüne dek birçok farklı kahve denemiş, hepsinden ağzınıza size düşen payı almış olmanız muhtemel fakat bu tarife kulak verseniz pek de kötü etmiş olmazsınız gibi geliyor.</p>
      <p class="word_split">Size ölümsüzlük iksirinin bulunduğu müjdesini vermek isterdik lakin ne böyle bir iksir bulundu ne de buna gerek var. Size verdiği tek şey bünyeden bünyeye farklılık gösteren enerji etkisidir. Enerji dediysek öyle hemen içer içmez Galya’lı Asterix gibi Romalılara saldırmaya kalkmayın. Çünkü etkisi uzun zamanlı kullanımda kendini gösterecek bir kahve çeşididir. Tabi Obelix gibi kazana düşmediyseniz.</p>
      <p class="word_split">Vakit kaybetmeden Bulletproof Coffee tarifimize geçerek kendimizi kurşungeçirmez yapalım.</p>

  </div>

  </body>

  </html>

The page I get from localhost doesn't highlight the words like in the example. Javascript seems to work fine, after some testing. Maybe it's Jquery?

Answer 1

The headers for content type set by script you included :

  <script type="text/javascript" src="https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js"></script>

were having issue which you will find in console :

MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Solution :

Use express static content serving and add following in index.js

app.use(express.static(path.join(__dirname, 'public')));

now create a folder public/css inside your node server root and copy content of file https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js into a new file lettering.js

And then finaly replace script tag with this :

<script type="text/javascript" src="css/lettering.js"></script>

Can't get JQuery to work with Express js

Question

1 answers

solution1
2 2017-05-10 21:04:47

Can't get JQuery to work with Express js

Question

1 answers

solution1 2 2017-05-10 21:04:47

solution1
2 2017-05-10 21:04:47