Can I reference a Node JS function from JS within a <script> tag in a Jade template

Question

I am building a blog with Node.js, Express and MongoDB. In my "create new post" template I have a title field and a slug field.

I am using the Slugs for Node.js from NPM: https://npmjs.org/package/slugs

What I am trying to do is:

dynamically take the value from the title text input using EventListener,
filter it through the slugs() function, and
add it to the value attribute of the slug text input.

So I would type "My favorite character is &" in the title field and the value in the alias field would dynamically change to "my-favorite-character-is".

I believe you have to do something like the accepted answer in this question: JADE + EXPRESS: Iterating over object in inline JS code (client-side)?

However, that was more for referencing variables rather than executing functions. And it seems like that is preprocessed and then you can't access it anymore.

Is what I'm trying to do even possible?

Or should I go with something like this? https://github.com/stipsan/String.Slugify.js

Here's what I tried to no avail:

!= "<script>"
!= "var post_title = document.getElementById('title');"
!= "var post_alias = document.getElementById('alias');"
!=
!= "var aliasValidator = function() {"
!= "  this.value = " + slug( + "this.value" ) + ";"
!= "};"
!= "var titleValidator = function() {"
!= "  post_alias.value = " + slug( + "this.value" ) + ";"
!= "};"
!=
!= "post_title.addEventListener({'keyup': titleValidator, 'keydown': titleValidator, 'change': titleValidator});"
!= "post_alias.addEventListener({'change': aliasValidator});"
!= "</script>"

And here's the view where the variable is passed:

var slugs = require('slugs');

newPost: function(req, res) {
  return res.render('add-post', {
    title: "Write new post",
    slug: slugs,
    dayDateName: tools.dayName
  });
}

Peter Lyons · Accepted Answer · 2013-03-07 00:02:20Z

This should be pieced together with a few things:

Get yourself a sluggify function you can load into the browser as well as node. There are trivial ways to do this like copy/pasting the code into a public/slugs.js file, as well as more sophisticated things like browserify or RequireJS. Start simple, but to directly answer your question, no, you can't just magically call a function that exists within your node process from the browser directly but YES you can share the same function in both node and the browser using one of the aforementioned techniques.
In the browser, use events to take the title as it is entered, transform it, and populate the slug field. This is all browser-side JS and has nothing to do with template rendering or node
In your node code to handle the form submission, you'll also need to make sure the slug is valid be running it through the sluggify function again (here you can just use the npm module).

For jade, you don't need all those crazy != prefixes, just do this (this has no direct bearing on your question, just FYI).

script
    var put = "your raw javascript here";
    var jade = "knows what to do and you don't need prefixes or escaping";

Pascal Belloncle · Accepted Answer · 2013-03-07 00:07:57Z

0

The way you are writing your template, you seem to be implying the function will be executed on the client.

This is not possible.

Instead, you should use an ajax call back to your server to execute the slug function, or precompute all the values and send this to the client.

edited Mar 7, 2013 at 0:07

answered Mar 6, 2013 at 23:48

Pascal Belloncle

11.4k3 gold badges59 silver badges56 bronze badges

4 Comments

Peter Lyons Over a year ago

Making an AJAX call to perform a basic slug transformation is quite unnecessary and inefficient.

David Yeiser Over a year ago

Yeah, I don't plan on doing that. I was mainly wondering if what I was trying to do initially was a dead end or not.

David Yeiser Over a year ago

I changed the correct answer to the other one since it's a little more detailed. Apologies if that is bad form. I didn't see that one until after I had initially accepted this one. Both are correct. Group hug?

Pascal Belloncle Over a year ago

no worries! That's fine. I wasn't suggesting to use ajax for this particular case, but in general, if the client needs to execute something on the server, ajax is the way to go.

Collectives™ on Stack Overflow

Can I reference a Node JS function from JS within a <script> tag in a Jade template

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related