Yet another dropdown list Q

Hey hey,
Been searching the forum but havent found the answer I was searching for. Appologies in advance if it is in here some where but havent seen it.

I want to generate a custom dropdown box from an existing object

Im using this in my .html document for node creation but get an empty drop down list.
In fact when debugging this thing I dont even think it executes it.
Do I need to include this in a function somewhere else ?

 <div class="form-row">
        <label for="node-input-unit"><i class="fa fa-tag"></i>unit</label>
        <select id="node-input-unit" style="width:60%; margin-right:5px;">
            <!-- fetch units from unit class -->
            <script>
                var Unit = require('./unit_class') ;
                
                //make new measurement on creation to work with.
                var unit = new Unit();

                Object.keys(unit.property.volume_flow_rate).foreach(key => {
                    return '<option value="' + unit.property.volume_flow_rate.key + '">' + unit.property.volume_flow_rate.name + '</option>';
                    
                });

                
            </script>

Cheers for help

If you want any custom scripts to run when your edit dialog opens, you need to provide it as the oneditprepare function in the node definition.

https://nodered.org/docs/creating-nodes/properties#custom-edit-behavior

1 Like

ok gotcha, how would this look like then? document.print( HTML code)? and loop over it where needed?

update : Tried this without succes

oneditprepare: function() {
            $("#node-input-smooth_method").change( function() {
                var a = $("#node-input-smooth_method").val();
                if ((a === "high") ||  ( a === "low" )) {
                    $("#node-over").html("with a smoothing factor of ");
                    $("#node-over2").html("");
                    //$("#row-input-reduce").hide();
                }
                else {
                    $("#node-over").html("over the most recent ");
                    $("#node-over2").html(" values");
                    //$("#row-input-reduce").show();
                }
            });
            $("#node-input-smooth_method").change();
            if ($("#node-input-round").val() === "true") {
                $("#node-input-round").val(0);
            }
            console.log("test " + Object.keys(unit.property.volume_flow_rate).length);
            for (let i = 0; i < Object.keys(unit.property.volume_flow_rate).length; i++) {
              let value = unit.property.volume_flow_rate.key;
              let text = unit.property.volume_flow_rate.name;
              $("#node-input-unit").append(
                $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text (   <option value="#">#</option>    )
              );
            }


        }

and lower in the html portion there is

<div class="form-row">
        <label for="node-input-unit"><i class="fa fa-tag"></i>unit</label>
        <select id="node-input-unit" style="width:60%; margin-right:5px;">
            
            <!--
            <option value="flow_liter_sec">l/s</option>
            <option value="flow_liter_min">l/min</option>
            <option value="flow_m3_hour">m3/h</option>
            <option value="pressure_bar">bar</option>
            <option value="pressure_mbar">mbar</option>
            <option value="level_meter">m</option>
            <option value="level_proc">%</option>
            <option value="level_m3">m3</option>
            -->
        </select>
    </div>

require is typically a serverside thing. This will not work here unless you have some kinda helper function named require

This is not really doing anything. Search jQuery add options to select

Hey steve,

Yeah was ahead of your second suggestion. Thats clear to me...
Just the require thing needs fixing now I think ( I edited my post for the code Im using)
Im trying to import the class object that I wrote because thats filled with my dropdown list items. Or is that not possible?

You can add a regular script element to bring the resource to client side.

https://nodered.org/docs/creating-nodes/resources

Sorry but the creating resources guide is pretty vague about how and where to apply it.
I have created a folder called "resources" under my main folder which is called " node-red-node-measurement"

I have tried adding the "url" which is a bit counter intuitive because it refers to building the url putting resource first and then the main folder name and then my js file. Having done that where do I add this ?

I have tried here

<script type="text/javascript" src="resources/node-red-contrib-measurement/unit_class.js">

    RED.nodes.registerType('measurement',{
        
        category: 'wbd typical',
        color: '#e4a363',
        defaults: {
            name: {value:""},
            number :{value:0},
            i_min:{value:0, 
                required:true,
                /*validate: function(v) {

but this just crashes my entire node red :stuck_out_tongue:

This is not valid HTML.

As it state in the doc

Loading resources in the editor

When loading resources in the editor, the node must use relative URLs rather than absolute URLs. This allows the browser to resolve the URL relative to the editor URL and removes the need for the node to know anything about how its root paths are configured.

Using the above example, the following HTML can be used to load those resources in the editor:

  • <img src="resources/node-red-node-example/image.png" />
  • <script src="resources/node-red-node-example/library.js">

So in your case, you should add

<script src="resources/node-red-contrib-measurement/unit_class.js"></script>

somewhere in your HTML file.

e.g.

<script type="text/javascript" src="resources/node-red-contrib-measurement/unit_class.js"></script>
<script type="text/javascript">
    RED.nodes.registerType('measurement',{
        // ...
        // your code here
        // ...
    })
</script>

NOTE: This fairly basic HTML - you might do well to read up on how to include resources like script files. E.G: Including JavaScript In Your Page

Hey steve thanks for your reply,
This still crashes the node red though.

could be basic, not used to doing frontend :stuck_out_tongue:

You will need to be more detailed to offer further advice

Node red log says " started flows" however when I load the localhost page it doesnt get past loading the specific node and completely hangs at that node.

I have done exactly what you described adding
in front of the code.

Do you happen to have a working example somewhere that I can see which uses this kind of file and a class which I can use further in the code?

Ok, so node-red has not crashed.

What do you see in the browsers console? Any errors ?

image

This is where it crashes

Bump,
Any of these errors seem obvious?
Any examples that you have i could scan through?

In the browser console, switch to the network tab, hit refresh & then inspect what URL path is being requested for your unit class file

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