Jade: How to set 'selected' form options programmatically with Express locals?

[C. Mundi]

This seems like it should be simple, but I am having trouble.

Note! The following jade 'code' is wrong! I'm just trying to explain
what I need to do.

When I render my response, I pass a local called 'user' which has a
field called 'role'. And would like to be able to programmatically
select the drop-down menu in the form to reflect the current value of
user.role as follows:

form(action='/user_edit', method='POST')
label(for='role') Role:<br>
select(name='role')
option(value='admin', ('admin' == user.role) ? 'selected' :
'') Admin
option(value='editor', ('editor' == user.role) ?
'selected' : '') Editor
option(value='user', ('user' == user.role) ? 'selected' : '')
User

Of course we know that does not work because we jade does not evaluate
arbitrary code in the textual context.

So I tried a number of things, like computing three new variables
(yuck!) (either in the route or in jade-script) each of which
evaluates to either 'selected' or null. And then I tried to place
these values as attributes:

- foo1 = ('admin'==user.role) ? 'selected' : null;
- foo2 = ('editor'==user.role) ? 'selected' : null;
- foo3 = ('user'==user.role) ? 'selected' : null;

form(action='/user_edit', method='POST')
label(for='role') Role:<br>
select(name='role')
option(value='admin', foo1 ) Admin
option(value='editor', foo2 ) Editor
option(value='user', foo3 ) User

That produces attributes like foo1="foo1" which is a clue but not what
I need.

So I tried

form(action='/user_edit', method='POST')
label(for='role') Role:<br>
select(name='role')
option(value='admin', #{foo1} ) Admin
option(value='editor', #{foo2} ) Editor
option(value='user', #{foo3} ) User

But that produces (yikes!) attributes like #foo="[object Object]"

Can someone please help me see how to accomplish programmatic
selection (based on locals) using Jade without resorting to embedding
raw HTML?

Thanks!

Carlos

[C. Mundi]

I forgot to mention...

If I do an option like this...

option(value=admin', !=foo1) Admin

then I get rendered

<option value="admin">Admin</option> <-- if foo1 is null... good...

or

<option value="admin" !="selected">Admin</option> <-- if
foo1=="selected"

Argh!! So close!! If only the != were not being treated literally in
this context!

[C. Mundi]

Never mind... I was obviously being stupid. I'm still not 100% clear
on the rules of jade for every context, but I have it working and it
works pretty much the way one would expect. Sorry for the lunatic
noise.

On Jan 25, 9:37 pm, "C. Mundi" <cmu...@gmail.com> wrote:

[vision media [ Tj Holowaychuk ]]

I would write some js helpers for that sort of thing, it gets too ugly doing it all in Jade.

!= option('Admin', user.role == 'admin')

something like that maybe

--
You received this message because you are subscribed to the Google Groups "Express" group.
To post to this group, send email to expre...@googlegroups.com.
To unsubscribe from this group, send email to express-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/express-js?hl=en.

--
Tj Holowaychuk
Vision Media
President & Creative Lead

[C. Mundi]

Thanks, TJ. 

I think I'm so used to how ugly php is, that I accept more ugliness than I should.  Thanks for nudging me back toward elegance

[Matthew Vickers]

On 26/01/12 6:00 PM, C. Mundi wrote:
> Never mind... I was obviously being stupid. I'm still not 100% clear
> on the rules of jade for every context, but I have it working and it
> works pretty much the way one would expect. Sorry for the lunatic
> noise.
>
>

Out of curiosity would you mind sharing your solution Carlos ?

Matt

--
quispiam.com | filtosaur.com
0405 001 707 | Eradicate unwanted email

[C. Mundi]

Hi Matt,

Here's what I did in the jade file:

//- first a little prep
- admin = ('admin'==user.role) ? 'selected' : null;
- editor = ('editor'==user.role) ? 'selected' : null;
- user = ('user'==user.role) ? 'selected' : null;

 
form(action='/user_edit', method='POST')
    label(for='role') Role: 

    select(name='role')
      option(value='admin',   selected=admin) Admin
      option(value='editor', selected=editor) Editor
      option(value='user', selected=user) User

This works because (per the Jade docs) attributes which are null are not rendered. (Recall that the mere presence of a 'selected' attribute -- regardless of value -- is treated as selected and the last one wins.  So the nulls-do-not-render rule is important.)

As TJ has already pointed out in this thread, this style may be ok for simple pages but quickly becomes clunky.

Carlos

--
You received this message because you are subscribed to the Google Groups "Express" group.
To post to this group, send email to expre...@googlegroups.com.

To unsubscribe from this group, send email to express-js+unsubscribe@googlegroups.com.

[Danjovi .sagat]

Hi  there Carlos just wanted to say thank you for helping me with something so simple

    select(name='role') 
      option(value='admin',   selected=admin) Admin 
      option(value='editor', selected=editor) Editor

      option(value='user', selected=user) User 

Thats the code i needed to make a drop down select in a jade file, just wanted to say thank you. :)