Im currently working on a Jade/NodeJS application that does not respond to an onClick function for a select option control. You can see the index.jade in the following:
extends layout
block content
.jumbotron
h1 JSON Attribute Changer
.row
.col-md-4
h2 Select the document
p Use this control to select which form you want to update:
select.Documents.btn.btn-default
a.dropdown-toggle(data-toggle="dropdown")
| Documents
span.caret
ul.dropdown-menu(name="documentSelector")
each document in documents
option(type="option", onClick='getAttributes()') #{document._id}
The getAttributes() function is defined in the layout.jade file:
doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title #{title} - Utilities
link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap.min.css')
link(rel='stylesheet', type='text/css', href='/stylesheets/style.css')
script(src='/javascripts/modernizr-2.6.2.js')
script.
function getAttributes() {
console.log('something')
}
body
etc, etc, etc.
The select option controls are dynamically created from entries in a Mongo db (which works fine). How can I attach the onclick function to each select option control that is created. Also, as a bonus, how could I go about using the value of the select option thats selected to retrieve its full json document from Mongo for field population?
Any and all help is awesome!
EDIT:
I just changed the Javascript code in layout.jade to reflect the following:
script.
$('#DocumentOptions').change(function() {
var val = $("#DocumentOptions option:selected").text();
alert(val);
});
I also added an ID to the select control as follows:
select.Documents.btn.btn-default#DocumentOptions
a.dropdown-toggle(data-toggle="dropdown")
| Documents
span.caret
ul.dropdown-menu(name="documentSelector")
each document in documents
option #{document._id}
I am still not getting a response. I do not have any browser plugins running that block JS. Also, I have checked the browser console and Node console to no avail.