Jade and jQuery together

Question

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>

Solution

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