hello everyone, i'm trying to develop a config node with a select inside for the type of the db.
The select never saves its value, it takes the first option in the html and there's nothing i can do about it, even the default value doesn't work.
What am i missing?
<script type="text/html" data-template-name="DB">
<div class="form-row">
<label for="node-input-db_type"><span data-i18n="db-hub.label.dbType"></span>
</label>
<select id="node-input-db_type">
<option value="POSTGRESQL" data-i18n="db-hub.label.postgre">></option>
<option value="MYSQL" data-i18n="db-hub.label.mysql"></option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-host"><i class="fa fa-globe"></i> <span data-i18n="db-hub.label.host"></span></label>
<input type="text" id="node-config-input-host">
</div>
<div class="form-row">
<label for="node-config-input-port"><i class="fa fa-random"></i> <span data-i18n="db-hub.label.port"></span></label>
<input type="text" id="node-config-input-port">
</div>
<div class="form-row">
<label for="node-config-input-user"><i class="fa fa-user"></i> <span data-i18n="db-hub.label.user"></span></label>
<input type="text" id="node-config-input-user">
</div>
<div class="form-row">
<label for="node-config-input-pass"><i class="fa fa-lock"></i> <span data-i18n="db-hub.label.password"></label>
<input type="password" id="node-config-input-password">
</div>
<div class="form-row">
<label for="node-config-input-db"><i class="fa fa-database"></i> <span data-i18n="db-hub.label.database"></span></label>
<input type="text" id="node-config-input-db">
</div>
<div class="form-row">
<label for="node-config-input-tz"><i class="fa fa-clock-o"></i> <span data-i18n="db-hub.label.timezone"></span></label>
<input type="text" id="node-config-input-tz" placeholder="±hh:mm">
</div>
<div class="form-row">
<label for="node-config-input-charset"><i class="fa fa-language"></i> <span data-i18n="db-hub.label.charset"></span></label>
<input type="text" id="node-config-input-charset">
</div>
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="db-hub.label.name"></span></label>
<input type="text" id="node-config-input-name" data-i18n="[placeholder]db-hub.label.name">
</div>
<div class="form-tips"><span data-i18n="[html]db-hub.tip"></span></div>
</script>
<script type="text/javascript">
RED.nodes.registerType('DB',{
category: 'config',
defaults: {
name: {value:""},
db_type: {
value:"POSTGRESQL",
required:true,
},
host: {value:"127.0.0.1",required:true},
port: {value:"3306",required:true},
db: {value:"",required:true},
tz: {value:""},
charset: {value:"UTF8"}
},
credentials: {
user: {type: "text"},
password: {type: "password"}
},
label: function() {
return this.name || this.db;
}
});
</script>
<script type="text/html" data-template-name="db-hub">
<div class="form-row">
<label for="node-input-mydb"><i class="fa fa-database"></i> <span data-i18n="db-hub.label.database"></label>
<input type="text" id="node-input-mydb">
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="db-hub.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]db-hub.label.name">
</div>
<!-- <div class="form-row">
<label for="node-input-query"><i class="fa fa-sign-out"></i> <span data-i18n="db-hub.label.query"></span
></label>
<input type="text" id="node-input-query" data-i18n="[placeholder]db-hub.label.query" />
</div>
-->
<div class="form-row" style="position: relative; margin-bottom: 0px;">
<label for="node-input-query">
<i class="fa fa-file-code-o"></i>
<span data-i18n="db-hub.label.query"></span>
</label>
<input type="hidden" id="node-input-query" autofocus="autofocus" />
</div>
<div class="form-row node-text-editor-row">
<div style="height: 300px; min-height: 150px;" class="node-text-editor" id="node-input-editor"></div>
</div>
<div class="form-row">
<label for="node-input-outputName"><i class="fa fa-sign-out"></i> <span data-i18n="db-hub.label.outName"></span
></label>
<input type="text" id="node-input-outputName" data-i18n="[placeholder]db-hub.label.outName" />
</div>
</script>
<script type="text/javascript">
RED.nodes.registerType('db-hub',{
category: "SpreadSheetSpace",
color: "#59adea",
defaults: {
mydb: { type: "DB", required: true },
name: {value:""},
outputName: {value:""},
query: {value:""}
},
inputs:1,
outputs:1,
icon: "db.png",
label: function () {
var levelNode = RED.nodes.node(this.mydb);
return this.name || (levelNode ? levelNode.label() : this._("db-hub.label.db-hub"));
},
paletteLabel: function () {
return this._("db-hub.label.db-hub");
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function () {
this.editor = RED.editor.createEditor({
id: 'node-input-editor',
mode: 'ace/mode/sql',
value: $('#node-input-query').val(),
});
this.editor.focus();
},
oneditsave: function () {
$('#node-input-query').val(this.editor.getValue());
delete this.editor;
},
});
</script>