Reputation: 142
I am trying to create custom node, I am experimenting with very simple one. I need to use the node's property, the value chosen by the user from a dropdown, to send/output the value of that property with msg.payload.
This is the error msg in the debug tab:
4/7/2017 21.45.06node: lolo
msg : error
"ReferenceError: $ is not defined"
This is the desired output:
"ppp[lolo:m2]"
I remove the line with $ in js file, because it does not recognize jQuery. I use this instead
msg.payload = msg.payload +"[" + nodeName+":"+ node.axis +"]";
but in output the option value is undefined instead of value of one of the options from select dropdown:
5/7/2017 11.34.22node: 5aa4aa59.f9fa04
msg.payload : string[19]
"ppp[lolo:undefined]"
This is the html file for the node:
<script type="text/javascript">
RED.nodes.registerType('Hello World',{
category: 'Demo',
color: '#ffaaaa',
defaults: {
name: {value:""},
axis:{value:""}
},
inputs:1,
outputs:1,
icon: "face.png",
label: function() {
return this.name||"Hello World";
}
});
</script>
<script type="text/x-red" data-template-name="Hello World">
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-topic"><i class="icon-tag"></i> Topic</label>
<input type="text" id="node-input-topic" placeholder="Topic">
</div>
<div class="form-row">
<label for="node-input-axis"><i class="icon-tag"></i> Motor</label>
<!--<input type="text" id="node-input-axis" placeholder="axis">-->
<select value="" id="node-input-axis" placeholder="axis">
<option value="m1">m1</option>
<option value="m2">m2</option>
<option value="m3">m3</option>
<option value="m4">m4</option>
</select>
</div>
</script>
<script type="text/x-red" data-help-name="Hello World">
<p>A node that increments every time a new message is received and sends Hello World in return.<br/>
</p>
</script>
This is the js file for the node:
module.exports = function(RED) {
function helloWorld(config) {
RED.nodes.createNode(this,config);
//var context = this.context();
var nodeName = this.name;
var axis = config.axis;
var node = this;
//var $ = require('jQuery');
var x = $("#node-input-axis").val();
this.on('input', function(msg) {
msg.payload = msg.payload +"[" + nodeName+":"+ x +"]";
//{payload: nodeName+" "+node.axis};
node.send(msg);
});
//console.log(value);
}
RED.nodes.registerType("Hello World",helloWorld);
};
Upvotes: 2
Views: 2785
Reputation: 59608
It is important to remember that the 2 separate parts of a Node-RED node run in very different locations:
.js
file runs on the backend server side of Node-RED.html
file runs in the web browser that is accessing the Node-RED Editor on the users client machine.This means that the .js
file has no direct access to the fields in the editor configuration window and also there is no access to jquery ($
) notation.
When a flow is deployed all the configuration variables are passed to the backend in the config
variable. You have already accessed that value in:
var axis = config.axis;
so rather than the var x = $("#node-input-axis").val();
you can just use the axis
variable.
You can't use node.axis
because you have not bound config.axis
to either this.axis
or node.axis
before trying to use it
e.g.:
module.exports = function(RED) {
function helloWorld(config) {
RED.nodes.createNode(this,config);
//var context = this.context();
var nodeName = this.name;
this.axis = config.axis;
var node = this;
this.on('input', function(msg) {
msg.payload = msg.payload +"[" + nodeName+":"+ node.axis +"]";
//{payload: nodeName+" "+ node.axis};
node.send(msg);
});
//console.log(value);
}
RED.nodes.registerType("Hello World",helloWorld);
};
Upvotes: 5