CODEWITHSUNDEEP
javascriptpostgoogle-visualizationrequest-headers
Robert Marlan
Robert Marlan

Reputation: 369

Javasciprt Post Error: Can't set headers after they are sent

I am trying to display a chart, select an element and do a post request to a new page with the data from the selected element.

The page displays fine and I can select the element. But when I do the POST I get this error:

Error: Can't set headers after they are sent

And I am not sure how to do it properly.

I tried to reformat the POST request with no change.

Code

<!DOCTYPE html>
<html lang="en">

    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>

    <body>
        <p> </p>
        <p> </p>
        <div id="table_div"></div>
        <script>
            // 
            //  https://developers.google.com/chart/interactive/docs/gallery/table
            //
            google.charts.load('current', {
                'packages': ['table']
            });
            google.charts.setOnLoadCallback(drawTable);

            var data1 = <%-JSON.stringify(data1)%>

            function drawTable() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Filename');
                data.addColumn('string', 'Doclink');
                data.addColumn('number', 'Size');
                data.addColumn('string', 'Date');
                data.addColumn('string', 'Meta1');
                data.addColumn('string', 'User');
                data.addRows(data1);

                var table = new google.visualization.Table(document.getElementById('table_div'));

                table.draw(data, {
                    showRowNumber: true,
                    width: '70%',
                    height: '100%'
                });

                var cssClassNames = {
                    'headerRow': 'italic-darkblue-font large-font bold-font',
                    'tableRow': '',
                    'oddTableRow': 'beige-background',
                    'selectedTableRow': 'orange-background large-font',
                    'hoverTableRow': '',
                    'headerCell': 'gold-border',
                    'tableCell': '',
                    'rowNumberCell': 'underline-blue-font'
                };

                var options = {
                    'showRowNumber': true,
                    'allowHtml': true,
                    'cssClassNames': cssClassNames
                };

                // table is my global orgchart chart variable.
                google.visualization.events.addListener(table, 'select', selectHandler);

                // Create our table.
                var table = new google.visualization.Table(document.getElementById('table_div'));
                table.draw(data, options);

                // Add our selection handler.
                google.visualization.events.addListener(table, 'select', selectHandler);

                function selectHandler() {
                    var selection = table.getSelection();
                    var item = selection[0].row;
                    console.log('selection ', item);
                    var str = data.getFormattedValue(item, 0) + '   ' + data.getFormattedValue(item, 1);
                    // console.log (str);
                    alert('You selected ' + str);

                    let post_data = {
                        docId: data.getFormattedValue(item, 1)
                    };
                    console.log('post_data ', post_data);

                    fetch("/showdocument", {
                        method: "POST",
                        body: JSON.stringify(post_data)
                    }).then(res => {
                        console.log("Request complete! response:", res);
                    });
                }
            }
        </script>
    </body>

</html>

The row and data selection are working. I just can't do the POST to a new page without the error.

How can I resolve this?

Upvotes: 0

Views: 47

Answers (1)

Ruben Saucedo
Ruben Saucedo

Reputation: 249

Correct me if I am wrong but you want to be redirected to the showdocument page with the information gathered from the table.

Remember that: Request.redirect could be "follow", "error" or "manual".

Your fetch method should be like this:

fetch("/showdocument", {
     method: "POST",
     redirect: "follow",
     body: JSON.stringify(post_data)
   }).then(res => {
     console.log("Request complete! response:", res
    );

   });

Here is more documentation:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Upvotes: 0

Related Questions