javascriptasp.netjsreport

JSReport error: Failed to load resource: the server responded with a status of 404 ()

I am working in JS report for the first time. I have created my JS report tamplate in JS report studio. Now, I am trying to call it from my asp.net application from the client side. But I am getting an error in my client side which is "Cannot POST /studio/templates/xyz/api/report" when I am rendering it. I have checked it in the browser console and it shows that "The server responded with a status of 404 ()".

Here is my client side code,

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="jsReportTesting.aspx.vb" Inherits="TraceMate.jsReportTesting" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>JS Report Testing</h1>
            
            <input type="button" title="test" onclick="generateReport();" value="Get PDF Report" />
            <div id="placeholder" style="height: 900px;"></div>

        </div>
    </form>

    <script src="script/jsreport/jsreport.js"></script>
    <script type="text/javascript">
        jsreport.headers['Authorization'] = "Basic " + btoa("myusername:mypasword")
        jsreport.serverUrl = 'https://reports.myapp.de/studio/templates/xYZas';
        //URL path in which jsreport server runs    
        /* For the sample purpose, the below JSON can be used. But in real time this data should come from Web API calls */

        var json_data = {
            "employees": [{
                "name": "A",
                "team": "X"
            },
            {
                "name": "B",
                "team": "Y"
            },
            {
                "name": "C",
                "team": "Z"
            }
            ]
        }

        function generateReport() {
            var request = {
                template: {
                    "name": "samplereport",
                    "recipe": "phantom-pdf",
                    "engine": "handlebars",
                    "chrome": {
                        "landscape": true
                    }
                },
                data: json_data,
                "options": { "reports": { "save": true } }
            };
            jsreport.render(document.getElementById("placeholder"), request);
            // here ”placeholder” is div tag name in html page    
        }
    </script>
</body>
</html>

Can somebody show me where am I doing wrong in my code? Thanks in advance!

Solution 
  • jsreport.serverUrl = 'https://reports.myapp.de';