Uibuilder: socket disconnect on enter in html form [solved]

General
1

Hi!

I'm quiet new to node-red, html, javascript and pretty much all of the things going on.
I got a node-red flow with a uibuilder node to build a dynamic website. Updating the website based on events in my flow works fine. I then tried to send data back from my webpage to node red by adding a

<form>
    Room number to subscribe to: <input id="inputRoomnumber" type="text" name="roomnumber" size="3">
</form>

to my index.html.
My index.js contains:

$("#inputRoomnumber").change(function () {
    console.info('roomnumber has changed!')
})

If I now enter something to the input and then click something else on the page the 'roomnumber has changed!' message appears in the browsers console. If I enter something and then hit enter (kinda the natural way to do it) node-red recieves the uibuilderCtrl messages client disconnected, client connect and ready for content but no 'roomnumber has changed!' message in the console. What do I have to do to make it behave the same way (no reconnect, just fire the function in my index.js) at the press of a the enter key as if I just clicked something else on the page after I entered a text?

2

You need to make your form so that the standard html form handling doesn't kick in.

I think that, by default, when you press enter in an HTML form, it will reload the page which will be what is causing the disconnection (more accurately, a reconnection). This is because, when the form tag was created, the only way to do things was to submit the form which sends it as an http request.

You can simply strip out the <form> tags which aren't needed or you will need to look up how to stop your browser reloading - sorry, can't remember how to do that off the top of my head. Maybe something like <form action="">?

For uibuilder, you really don't need form tags unless you want to do something clever with multiple form elements together.

You probably already know that, to send the data back to Node-RED, all you need to do is to add something like uibuilder.send({....}) in your change function. Also, I think that the change function can have a parameter that should give you the updated value? I'm a bit rusty with jQuery right now.

1 Like
3

Thanks! Thats the solution I could not find an answer to because I simply got it too wrong. I thought the input has to be part of a form and didn't really thing about the form beeing the source of this inconvenience. Ditching the form made it behave the way I wanted it to.
I grab and send the new value like that:

uibuilder.send({ 'payload': uibuilder.get('inputRoomnumber').value })

This works fine after I noticed that the "UI Builder" node spits out "normal messages" on the topmost output and not the lower one, which I used to catch the reconnect control messages.

4

Glad you got it sorted. Yes, the 2 outputs are really handy since you can easily arrange a small flow to send cached data when a new client connects or an existing one does a reload. You also get to find out when a client disconnects so, for example, you can keep track of how many connections you have.