Cmag Cmag - 3 months ago 13
Jade Question

Jade and jQuery together

Folks,
How would I implement jQuery styles on a form that I generate using Jade? What I am trying to do is to

prettify
forms and make them clickable. I am terrible at UI. period.

How would I implement this selectable method on a form? http://jqueryui.com/selectable/

pendingArray
is an Array of JSON objects coming from
Express
. Just need to draw it and make it clickable. Upon a click, I would like a popup window open that I can POST to my api with... Being a backend programmer, this UI stuff is completely over my head as I never spend any time in this void.

page.jade:

include mainNavMenu

body
h1= title
p#container Welcome to #{title}
p#message (to be filled in)
script
alert('hello world');
$("#message").html("message set through jquery")

block Content

if (pendingArray)
- each val, key in pendingArray
<h1>#{val}</h1>

Answer

Your problem is not Jade & jQuery, it's Jade & JavaScript ;)

Jade try to interpret your JavaScript code as Jade code. You need to write the JavaScript as a plain text. For you purpose you can use the block in a tag syntax, just add a dot after script:

script.
    alert('hello world');
    $("#message").html("message set through jquery")

source: documentation


There is another error at the loop. each is Jade syntax and not JavaScript, you could also loop with JavaScript code, but that would look not very nice. In the next line you try to write plain text/HTML, but it's not plain, see above.

if pendingArray
    each item in pendingArray
        h1=val

source: documentation