Goodmorning everyone,
I recently found Node-Red and I think it's amazing!
I created a little project with an html table that works perfectly.
I use Node-RED version: v2.1.1 and Node.js version: v14.18.1
Now I've a problem that I can't solve.
In the table I have a button that write in my sql. The problem is that I'm not able to change the name and the color of this button after I pressed it, how can I do that? I tried with a java node, but it doesn't work at all.
Thank you!
Welcome to the forun Daniele.
First off, node-red uses JavaScript not Java, they are two different things.
It would be very helpful if you let us know what vrsion of Node-red and node.js you are using (you can get this from the startup log) and could export your flow and attach it to a reply so someone could actually see what you are doing. In order to make code more readable and importable it is important to surround your code with three backticks
```
like this
```
You can edit and correct your post by clicking the pencil icon.
See this post for more details - How to share code or flow json
This is my flow
[
{
"id": "ee0a9f786f8f120e",
"type": "tab",
"label": "Piegatrice",
"disabled": false,
"info": "",
"env": []
},
{
"id": "487d1012e8ec4b16",
"type": "http in",
"z": "ee0a9f786f8f120e",
"name": "",
"url": "/viewdata",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 120,
"y": 60,
"wires": [
[
"c1cb5409b1f41a8c"
]
]
},
{
"id": "6969a2d427c1d9fa",
"type": "mysql",
"z": "ee0a9f786f8f120e",
"mydb": "7787d27d4bcc22dd",
"name": "Database",
"x": 340,
"y": 180,
"wires": [
[
"fd80931eaa432393"
]
]
},
{
"id": "af9a89b66c75fa52",
"type": "template",
"z": "ee0a9f786f8f120e",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n <head>\n <title>My Site</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n \n\n <h2>Using CSS to style an HTML form with AJAX POST and Node-RED</h2>\n <h4><a href=\"http://www.internetoflego.com\">Internet of LEGO</a></h4>\n\n<table>\n <tr>\n <th>Prod Id</th>\n <th>Descrizione</th>\n <th>Ordine</th>\n <th>Quantità</th>\n <th></th>\n <th></th>\n </tr>\n {{#payload}}\n <tr>\n <td>{{id_prod}}</td>\n <td>{{descript}}</td>\n <td>{{order_id}}</td>\n <td>{{quantita}}</td>\n <td>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <input type=\"text\" id=\"fname\" name=\"id\" hidden value={{id_prod}}>\n <button id=\"modifica\" type=\"submit\" value=\"1\" class=\"btn\" onclick=\"return changeText('submitbutton');\">Inizio</button>\n </form>\n </td>\n </tr>\n {{/payload}}\n</table>\n\n</body>\n</html>\n<script>{{{payload.script.due}}}</script>\n<script>{{{payload.script}}}</script>",
"output": "str",
"x": 1080,
"y": 180,
"wires": [
[
"742514667af4db55"
]
]
},
{
"id": "742514667af4db55",
"type": "http response",
"z": "ee0a9f786f8f120e",
"name": "",
"statusCode": "",
"headers": {},
"x": 1250,
"y": 180,
"wires": []
},
{
"id": "c1cb5409b1f41a8c",
"type": "function",
"z": "ee0a9f786f8f120e",
"name": "Get data from DB",
"func": "msg.topic = \"SELECT * FROM OrdineProdotto\";\nmsg.url = \"mysitepost\";\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 130,
"y": 180,
"wires": [
[
"6969a2d427c1d9fa"
]
]
},
{
"id": "75c7dff9662b10bb",
"type": "template",
"z": "ee0a9f786f8f120e",
"name": "CSS",
"field": "payload.style",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "table {\nwidth: 100%;\n}\n\ntable, td {\n border: 1px solid red;\n border-collapse: collapse;\n}\ntd {\n padding: 15px;\n text-align: left;\n}\nth {\n background-color: black;\n color: white;\n padding: 15px;\n text-align: left;\n}",
"output": "str",
"x": 910,
"y": 180,
"wires": [
[
"af9a89b66c75fa52"
]
]
},
{
"id": "e22da544cdfe09ae",
"type": "template",
"z": "ee0a9f786f8f120e",
"name": "JavaScript",
"field": "payload.script",
"fieldType": "msg",
"format": "javascript",
"syntax": "plain",
"template": "$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\n \n $(\"#loadingimg\").show();\n \n $.ajax({\n url: form_url, \n type: form_method, \n data: form_data, \n cache: false,\n success: function(returnhtml){ \n $(\"#modifica\").html('Fine');\n $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});",
"x": 750,
"y": 180,
"wires": [
[
"75c7dff9662b10bb"
]
]
},
{
"id": "ddbd387870adc47d",
"type": "http in",
"z": "ee0a9f786f8f120e",
"name": "",
"url": "/mysitepost",
"method": "post",
"upload": false,
"swaggerDoc": "",
"x": 130,
"y": 260,
"wires": [
[
"418926dd11aa642a"
]
]
},
{
"id": "189b86da2a260718",
"type": "function",
"z": "ee0a9f786f8f120e",
"name": "Inserisco Fine",
"func": "var id = msg.payload.id;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"UPDATE `Industria` SET `fine`= NOW() WHERE `prodId` = \"+id+\"\";\n return msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 380,
"y": 360,
"wires": [
[
"16e12fd289943f47"
]
]
},
{
"id": "16e12fd289943f47",
"type": "mysql",
"z": "ee0a9f786f8f120e",
"mydb": "7787d27d4bcc22dd",
"name": "",
"x": 920,
"y": 360,
"wires": [
[
"205dc60f583af9ce"
]
]
},
{
"id": "052d53a1e372c4fd",
"type": "function",
"z": "ee0a9f786f8f120e",
"name": "Cerco Immagine",
"func": "var id = msg.payload.id;\nif (msg.payload.m == 1 ){\nmsg.topic =\"SELECT `img` FROM `OrdineProdotto` WHERE `id_prod` = \"+id+\"\";\nreturn msg;\n}\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 840,
"y": 660,
"wires": [
[
"c8fa69b587468df2"
]
]
},
{
"id": "c8fa69b587468df2",
"type": "mysql",
"z": "ee0a9f786f8f120e",
"mydb": "7787d27d4bcc22dd",
"name": "",
"x": 1040,
"y": 660,
"wires": [
[
"42c70c803e229a55"
]
]
},
{
"id": "42c70c803e229a55",
"type": "switch",
"z": "ee0a9f786f8f120e",
"name": "",
"property": "payload[0].img",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "2A",
"vt": "str"
},
{
"t": "eq",
"v": "1",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 1230,
"y": 660,
"wires": [
[
"ab197c035a3d21c7"
],
[
"e8697811ecf652b3"
]
]
},
{
"id": "ab197c035a3d21c7",
"type": "debug",
"z": "ee0a9f786f8f120e",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1430,
"y": 620,
"wires": []
},
{
"id": "e8697811ecf652b3",
"type": "debug",
"z": "ee0a9f786f8f120e",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1430,
"y": 700,
"wires": []
},
{
"id": "359058415499e68c",
"type": "comment",
"z": "ee0a9f786f8f120e",
"name": "Tipo Piega",
"info": "",
"x": 1420,
"y": 580,
"wires": []
},
{
"id": "d5fe7b9b2d9cdbc4",
"type": "change",
"z": "ee0a9f786f8f120e",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "global",
"to": "payload.id",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 390,
"y": 420,
"wires": [
[
"0d19638842eb8b9b"
]
]
},
{
"id": "418926dd11aa642a",
"type": "switch",
"z": "ee0a9f786f8f120e",
"name": "",
"property": "payload",
"propertyType": "global",
"rules": [
{
"t": "eq",
"v": "payload.id",
"vt": "msg"
},
{
"t": "istype",
"v": "undefined",
"vt": "undefined"
},
{
"t": "else"
}
],
"checkall": "true",
"repair": false,
"outputs": 3,
"x": 140,
"y": 420,
"wires": [
[
"189b86da2a260718"
],
[
"d5fe7b9b2d9cdbc4"
],
[
"7fa50ab83423609c"
]
]
},
{
"id": "bab901e37393d314",
"type": "function",
"z": "ee0a9f786f8f120e",
"name": "Inserisco Fine",
"func": "var id = msg.payload.idtwo;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"UPDATE `Industria` SET `fine`= NOW() WHERE `prodId` = \"+id+\"\";;\n return msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 600,
"y": 480,
"wires": [
[
"4bdf6718fea28b3c",
"16e12fd289943f47"
]
]
},
{
"id": "205dc60f583af9ce",
"type": "debug",
"z": "ee0a9f786f8f120e",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1130,
"y": 360,
"wires": []
},
{
"id": "0d19638842eb8b9b",
"type": "function",
"z": "ee0a9f786f8f120e",
"name": "Inserisco Inizio",
"func": "var id = msg.payload.id;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"INSERT INTO `Industria`(`prodId`, `inizio`) VALUES (\"+id+\",NOW())\";\n return msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 600,
"y": 420,
"wires": [
[
"16e12fd289943f47",
"052d53a1e372c4fd"
]
]
},
{
"id": "4bdf6718fea28b3c",
"type": "change",
"z": "ee0a9f786f8f120e",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "global",
"to": "payload.id",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 850,
"y": 480,
"wires": [
[
"9c6cfbc0b798a88b"
]
]
},
{
"id": "7fa50ab83423609c",
"type": "change",
"z": "ee0a9f786f8f120e",
"name": "",
"rules": [
{
"t": "set",
"p": "payload.idtwo",
"pt": "msg",
"to": "payload",
"tot": "global"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 400,
"y": 480,
"wires": [
[
"bab901e37393d314"
]
]
},
{
"id": "817bf98e1b6829cc",
"type": "function",
"z": "ee0a9f786f8f120e",
"name": "Inserisco Inizio",
"func": "var id = msg.payload.id;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"INSERT INTO `Industria`(`prodId`, `inizio`) VALUES (\"+id+\",NOW())\";\n return msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1080,
"y": 480,
"wires": [
[
"16e12fd289943f47"
]
]
},
{
"id": "9c6cfbc0b798a88b",
"type": "change",
"z": "ee0a9f786f8f120e",
"name": "",
"rules": [
{
"t": "set",
"p": "payload.id",
"pt": "msg",
"to": "payload",
"tot": "global"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 850,
"y": 520,
"wires": [
[
"817bf98e1b6829cc"
]
]
},
{
"id": "fd80931eaa432393",
"type": "template",
"z": "ee0a9f786f8f120e",
"name": "Pulsante",
"field": "payload.script.due",
"fieldType": "msg",
"format": "javascript",
"syntax": "mustache",
"template": " function changeText(submitId){\n var submit = document.getElementById(submitId);\n submit.value = 'Loading...';\n return false;\n };",
"output": "str",
"x": 540,
"y": 180,
"wires": [
[
"e22da544cdfe09ae"
]
]
},
{
"id": "7787d27d4bcc22dd",
"type": "MySQLdatabase",
"name": "",
"host": "ra266794-002.dbaas.ovh.net",
"port": "35737",
"db": "db_pod",
"tz": "",
"charset": "UTF8"
}
]
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy