CODEWITHSUNDEEP
javascriptjquerynode.jsexpresspug
MightyMouse
MightyMouse

Reputation: 13818

express and jade: loop and create dynamic ids

Ok, this should be a simple question on node.

Using express, one has one document called app.js, another one index.jade, one more index.js, and typically another javascript, say server.js, where the bulk of the work for the server is done (the code here can be inside app.js, but let's say that these are different files).

Say I have two object like these

myIDs   = ['afoo', 'abar'];
myArray = ['foo', 'bar'];

in the server.js and I would like to iterate through their elements in jade, and create buttons that have the value foo and bar respectively and their ids are afoo and abar respectively. How can we do such a thing?

Moreover, is it possible to realize if a mouse click occurs in one of these buttons? I tried to give a name to a specific button I created dynamically by using something like this

html = "<button id=\"aUniqueID\">Press me!</button>"
document.getElementById('puff').innerHTML = html;

but, even though it appears in the browser, nothing happens when the button is pressed (I am sending a message to the server, and the server is supposed to print a console log).

Any help would be appreciated.

Upvotes: 0

Views: 1722

Answers (1)

drivativ
drivativ

Reputation: 161

I recommend you don't use an inline function and I would attach the click event on the client-side but you can add it inline just like normal with jade

This assumes that the value and id for each button are at the same array position:

myIDs   = ['afoo', 'abar'];
myArray = ['foo', 'bar'];

each button_id, i in myIDs
    button(id="#{button_id}", onclick="yourFunctionHere();") #{myArray[i]}

UPDATED:

To pass the arrays to the .jade page is like:

app.get('/your-url-path', function(req, res){

    var my_ids_array = ['afoo', 'abar'];
    var my_values_array = ['foo', 'bar'];

    res.render('your-jade-page', { myIDs: my_ids_array, myArray: my_values_array });
});

Upvotes: 5

Related Questions