Config Node Select not working

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="&#177;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>

As this is in a config node, the id should be node-config-input-db_type

1 Like

Of course, thanks a lot

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.