Template node cannot receive POST data correctly

General
1

Hi, I tried to retrieve data in template node from POST by AJAX. However, data is returned in the header and not in the body. Attached is my flow. Help is much appreciated.

[{"id":"1683bd9a.5e0a02","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"309b31de.02ea2e","type":"http in","z":"1683bd9a.5e0a02","name":"send test data","url":"test","method":"get","upload":false,"swaggerDoc":"","x":150,"y":100,"wires":[["45541a65.2076a4"]]},{"id":"47fdf580.8734cc","type":"http response","z":"1683bd9a.5e0a02","name":"","statusCode":"","headers":{},"x":470,"y":100,"wires":[]},{"id":"45541a65.2076a4","type":"template","z":"1683bd9a.5e0a02","name":"create HTML ","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n    <head>\n        <script src=\"https://code.jquery.com/jquery-3.6.0.js\" integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\" crossorigin=\"anonymous\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js\" integrity=\"sha512-N/WbW5rCM/O+/QpzuqYXkInRdSfFu6txbJcbQioBywGXDiF1XCJY2LXVKIGjNFUMS4P79mtf9pDu5ViXaa+BnA==\" crossorigin=\"anonymous\"></script>\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css\" integrity=\"sha512-qXb7/N44R94029hvbV06tyEl1P3TCwCbyPsIUl61D6W8mRCFbCPsRYOVJbCUaEzlwUvg7JJSLsglThYs7zNoZw==\" crossorigin=\"anonymous\" />\n    <style>.tabulator-col-title {text-align: center;}</style> <!-- center tubalator header in table-->\n    \n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/slate/bootstrap.min.css\" integrity=\"sha384-8iuq0iaMHpnH2vSyvZMSIqQuUnQA7QM+f6srIdlgBrTSEyd//AWNMyEaSF2yPzNQ\" crossorigin=\"anonymous\">\n    </head>\n\n<body>\n    <div class=\"container\">\n        \n        <button id=\"save_table\" type=\"button\" class=\"btn btn-secondary\" onclick=\"save_table()\">Send Data</button>\n       \n       \n        <div id=\"save_response\"></div>\n     \n    </div>\n<script>\n\n\n\n\nfunction save_table(){\n    \n    $.post(\"save_table\", JSON.stringify(\"testing...\"),\n\n   \n    function(){\n     document.getElementById(\"save_response\").innerHTML =\n          \"Configuration Saved\";\n    });\n}\n\n\n</script>\n\n</script>\n\n\n\n\n</body>\n</html>","output":"str","x":310,"y":100,"wires":[["47fdf580.8734cc"]]},{"id":"428468e1.c65b38","type":"http in","z":"1683bd9a.5e0a02","name":"","url":"save_table","method":"post","upload":false,"swaggerDoc":"","x":160,"y":260,"wires":[["5d96e290.26f78c","6b29bcb2.20a0a4"]]},{"id":"5d96e290.26f78c","type":"http response","z":"1683bd9a.5e0a02","name":"send response back","statusCode":"","headers":{},"x":480,"y":340,"wires":[]},{"id":"e738cfa1.a7b39","type":"debug","z":"1683bd9a.5e0a02","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":550,"y":240,"wires":[]},{"id":"6b29bcb2.20a0a4","type":"template","z":"1683bd9a.5e0a02","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload}} !","output":"str","x":380,"y":240,"wires":[["e738cfa1.a7b39"]]}]
2

Hi, I assume your intention is to setup a tabulator table and post the data back to node-red?

Here is a working demo...

image

image
image756×577 26 KB

The flow...

[{"id":"309b31de.02ea2e","type":"http in","z":"1683bd9a.5e0a02","name":"send test data","url":"test","method":"get","upload":false,"swaggerDoc":"","x":1970,"y":200,"wires":[["45541a65.2076a4"]]},{"id":"47fdf580.8734cc","type":"http response","z":"1683bd9a.5e0a02","name":"","statusCode":"","headers":{},"x":2290,"y":200,"wires":[]},{"id":"45541a65.2076a4","type":"template","z":"1683bd9a.5e0a02","name":"create HTML ","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<head>\n    <script src=\"https://code.jquery.com/jquery-3.6.0.js\" integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\" crossorigin=\"anonymous\" ></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js\" integrity=\"sha512-N/WbW5rCM/O+/QpzuqYXkInRdSfFu6txbJcbQioBywGXDiF1XCJY2LXVKIGjNFUMS4P79mtf9pDu5ViXaa+BnA==\" crossorigin=\"anonymous\"></script>\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css\" integrity=\"sha512-qXb7/N44R94029hvbV06tyEl1P3TCwCbyPsIUl61D6W8mRCFbCPsRYOVJbCUaEzlwUvg7JJSLsglThYs7zNoZw==\" crossorigin=\"anonymous\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/slate/bootstrap.min.css\" integrity=\"sha384-8iuq0iaMHpnH2vSyvZMSIqQuUnQA7QM+f6srIdlgBrTSEyd//AWNMyEaSF2yPzNQ\" crossorigin=\"anonymous\">\n    <style>\n         <!-- center tubalator header in table-->\n        .tabulator-col-title {\n            text-align: center;\n        }\n        #table {\n            display: inline-block;\n            max-height: 600px;\n            max-width: 400px;\n        }\n    </style>\n</head>\n<body>\n\n    <div class=\"container\">\n        <div id=\"players\" style=\"height: 400px\"></div>\n        <button id=\"save_table\" type=\"button\" class=\"btn btn-secondary\" onclick=\"save_table()\">Send Data</button>\n        <div id=\"save_response\"></div>\n    </div>\n\n    <script>\n\n        var tabledata = [{\n                playerid: 1,\n                playername: \"Virat Kohli\",\n                price: \"17\",\n                team: \"RCB\",\n                joiningdate: \"01/01/2020\"\n            }, {\n                playerid: 2,\n                playername: \"Rohit Sharma\",\n                price: \"15\",\n                team: \"MI\",\n                joiningdate: \"02/01/2020\"\n            }, {\n                playerid: 3,\n                playername: \"MS Dhoni\",\n                price: \"15\",\n                team: \"CSK\",\n                joiningdate: \"03/01/2020\"\n            }, {\n                playerid: 4,\n                playername: \"Shreyas Iyer\",\n                price: \"7\",\n                team: \"RCB\",\n                joiningdate: \"04/01/2020\"\n            }, {\n                playerid: 5,\n                playername: \"KL Rahul\",\n                price: \"11\",\n                team: \"KXIP\",\n                joiningdate: \"05/01/2020\"\n            }, {\n                playerid: 6,\n                playername: \"Dinesh Karthik\",\n                price: \"7\",\n                team: \"KKR\",\n                joiningdate: \"06/01/2020\"\n            }, {\n                playerid: 7,\n                playername: \"Steve Smith\",\n                price: \"12\",\n                team: \"RR\",\n                joiningdate: \"07/01/2020\"\n            }, {\n                playerid: 8,\n                playername: \"David Warner\",\n                price: \"12\",\n                team: \"SRH\",\n                joiningdate: \"08/01/2020\"\n            }, {\n                playerid: 9,\n                playername: \"Kane Williamson\",\n                price: \"3\",\n                team: \"SRH\",\n                joiningdate: \"09/01/2020\"\n            }, {\n                playerid: 10,\n                playername: \"Jofra Archer\",\n                price: \"7\",\n                team: \"RR\",\n                joiningdate: \"10/01/2020\"\n            }, {\n                playerid: 11,\n                playername: \"Andre Russell\",\n                price: \"9\",\n                team: \"KKR\",\n                joiningdate: \"11/01/2020\"\n            }, {\n                playerid: 12,\n                playername: \"Chris Gayle\",\n                price: \"2\",\n                team: \"KXIP\",\n                joiningdate: \"12/01/2020\"\n            },\n\n        ];\n\n        var table = new Tabulator(\"#players\", {\n            height: 220,\n            data: tabledata,\n            layout: \"fitColumns\",\n            pagination: \"local\",\n            paginationSize: 5,\n            tooltips: true,\n            columns: [{\n                    title: \"Player Name\",\n                    field: \"playername\",\n                    sorter: \"string\",\n                    width: 150,\n                    headerFilter: \"input\"\n                }, {\n                    title: \"Player Price\",\n                    field: \"price\",\n                    sorter: \"number\",\n                    hozAlign: \"left\",\n                },\n\n                {\n                    title: \"Team\",\n                    field: \"team\",\n                    sorter: \"string\",\n                    hozAlign: \"center\",\n                    editor: \"select\",\n                    headerFilter: true,\n                    headerFilterParams: {\n                        \"RCB\": \"RCB\",\n                        \"MI\": \"MI\",\n                        \"KKR\": \"KKR\",\n                    }\n                }, {\n                    title: \"Joining Date\",\n                    field: \"joiningdate\",\n                    sorter: \"date\",\n                    hozAlign: \"center\"\n                },\n            ],\n            rowClick: function(e, row) {\n                alert(\"Row \" + row.getData().playerid + \" Clicked!!!!\");\n            },\n        });\n\n        function save_table(){\n            debugger\n            var data = table.getData();\n            document.getElementById(\"save_response\").innerHTML = \"Sending Configuration...\";\n            $.ajax({\n                type: \"POST\",\n                url: \"/save_table\",\n                data: JSON.stringify(data),\n                contentType: \"application/json; charset=utf-8\",\n                dataType: \"json\",\n                success: function(msg) {\n                    document.getElementById(\"save_response\").innerHTML = \"Configuration Saved\";\n                },\n                error: function(XMLHttpRequest, textStatus, errorThrown) {\n                    document.getElementById(\"save_response\").innerHTML = \"There was an error\";\n                }\n            });\n        }\n    </script>\n\n</body>","output":"str","x":2130,"y":200,"wires":[["47fdf580.8734cc"]]},{"id":"428468e1.c65b38","type":"http in","z":"1683bd9a.5e0a02","name":"","url":"save_table","method":"post","upload":false,"swaggerDoc":"","x":1980,"y":260,"wires":[["5d96e290.26f78c","e738cfa1.a7b39"]]},{"id":"5d96e290.26f78c","type":"http response","z":"1683bd9a.5e0a02","name":"send response back","statusCode":"","headers":{},"x":2300,"y":320,"wires":[]},{"id":"e738cfa1.a7b39","type":"debug","z":"1683bd9a.5e0a02","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2250,"y":260,"wires":[]}]

NOTE however, - have you considered using the node-red-dashboard and the ui-table node? With these, there is no need to endpoints or custom templates.

3

Hi Steve, thank you very much for your help. It works!

4

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