I am developing a custom node for Node-Red. Below is the simple html, I am trying to select an element using Jquery. Jquery get/post/ajax is actually working, but selectors are not.
<script type="text/javascript">
RED.nodes.registerType('air-conditioner',{
category: 'function',
color: '#a6bbcf',
defaults: {
name: {value:""},
aclist:{value:""}
},
inputs:1,
outputs:1,
icon: "file.png",
label: function() {
return this.name||"air-conditioner";
}
});
$( document ).ready(function() {
alert("Name: "+$("#node-input-name").html());
var root = 'http://172.20.0.107:8080/sitewhere/api/sites/bb105f8d-3150-41f5-b9d1-db04965668d4/assignments?includeDevice=false&includeAsset=true&includeSite=false';
$.ajax({
headers: {
'Authorization':'Basic YWRtaW46cGFzc3dvcmQ=',
'X-Sitewhere-Tenant':'atif12345'
},
url: root,
method: 'GET'
}).then(function(data) {
debugger;
$("#node-input-aclist").append('<option>hello</option>');
});
});
<script type="text/x-red" data-template-name="air-conditioner">
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Give this A.C a name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Select A.C</label>
<select id="node-input-aslist">
<option>hello 1</option>
</select>
</div>
</script>
You should not be putting any code in
$( document ).ready()
- a node's edit form only gets created when a node is being edited.
You should add any code you need for the edit form into the node's oneditprepare
function. That gets called each time the edit form is being built for a node.
See http://nodered.org/docs/creating-nodes/properties#custom-edit-behaviour for more information.