I'm using Nodejs/Express/Jade/Bootstrap to try to create an inventory system where I click on a room on a map (300 rooms), and a modal (boostrap) appears with a list of the items in that room (and eventually a CRUD). While it's entirely possible for me to create a different modal for every room and then write database queries for each modal, I feel like I should be able to do it dynamically. Ideally i should be able to do something like
for room-number in school
#school[room-number].modal.hide
(insert substance)
But I can't get the div id to work correctly. What shows up is
<#rm3 class="modal hide">
×
Room 3
some text
Here's what I have so far.
school.jade
extends layout
block content
.container
.hero-unit
h2 School
.row-fluid
.span12.pagination-centered.
<img src="/images/School.jpg" usemap="#schoolmap">
<map name="schoolmap">
<area shape="rect" coords="264,276,332,310" href="#rm3" data-toggle="modal" />
</map>
- for (num in numbers)
div#{numbers[num]}.modal.hide
.modal-header
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
h2 Room 3
.modal-body
p some text
and index.js
exports.lb = function(req, res) {
res.render('school', {
title: 'Inventory',
"numbers": ["#rm3", "#rm4", "#rm5", "#rm6"]
});
}
Hopefully my idea came across ok, and any help would be awesome. Thanks in advance!
There's a problem with the code for the modal.
- for (num in numbers)
.modal.hide(id="#{num}")
.modal-header
button.close(type="button", data-dismiss="modal", aria-hidden="true") x
h2 Room 3
.modal-body
p some text
Since you're in a for (num in numbers), you don't have to get the num out of numbers. You can access num directly.
In Jade, the id attribute for the div is normally set by using # but in this case, I doubt ##{num} will work, that's why I choose to put it as an attribute between parentheses.
I took the liberty to format your close button too.
There's in another way, instead of creating a modal for each room, why don't you build one empty modal that's gonna get loaded (with the jQuery load function with the infos while called ?
If you have no idea of what I'm talking about, tell me, I'll edit my answer.