Html script in iframe not running

  • Goal: I am trying to write a custom component that will contain html and convert the document to pdf. I have the pdf part of my goal completed, but now I am having trouble on creating dynamic html with js within the iframe code. I have a javascript function that generates html based on certain data. When I call the function nothing runs. Even when I call a simple test function that logs to the console, it does not run. I believe there must be a detail on iframe that I am missing.

  • Steps: I have tested my html in vscode and repl and it produces my desired result. I have tried debugging in the iframe code such as formatting the html and adding a simple test function with no success. Ive researched the iframe docs on retool with no findings

  • Details: I am using a custom component and writing the html in the iframe code. The html I wrote does not depend on any outside data sources in order to things simple. It is a basic html and js interaction, which is why I believe there is a simple iframe detail that I am unaware of that causes the code not to work. Note: In the html, I have all of the css in a style element and all of the js in a script element. Again, I did this to keep all of the code in one place to see where things go wrong.

  • Screenshots: Screenshot of app and failed result

Screenshot of expected result. (in repl)

html code in Iframe




<head>
    <!---Load dependancies here---->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
        integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
        integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
      var element = document.getElementById('container');
        html2pdf(element);
        


    </script>
    <style>
        body {
            position: relative;
            width: 21cm;
            height: 29.7cm;
            margin: 0 auto;
            color: #001028;
            background: #FFFFFF;
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-family: Arial;
            outline: 2px solid rgb(235, 155, 81);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        #container {
            position: relative;
            width: 21cm;
            height: 29.7cm;
            margin: 0 auto;
            color: #001028;
            background: #FFFFFF;
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-family: Arial;
            outline: 2px solid rgb(235, 155, 81);
            min-height: 100vh;
            display: flex;
            flex-direction: column;

        }



        h1 {
            color: #5D6975;
            font-size: 2.4em;
            line-height: 1.4em;
            font-weight: normal;
            margin: 0 0 0px 0;
            display: inline-block;
            position: relative;
            left: 31%;
        }

        header {
            border-bottom: 1px solid #5D6975;
            border-top: 2px solid rgb(235, 155, 81);
        }

        #info {
            margin-top: 5px;
            margin-bottom: 5px;
            border-bottom: 1px solid black;
        }

        #eDate {
            position: relative;
            left: 40%;
            top: 2px;
            font-size: 0.8em;
            color: #5D6975;
        }

        .infoBlock {
            /*outline: 3px solid black;*/
            display: inline-block;
            margin-right: 5px;
        }

        .infoBlock:nth-of-type(1),
        .infoBlock:nth-last-of-type(2) {
            width: 30%;
        }

        .infoTitle {
            background-color: #457b9d;
            color: white;
            padding: 1px 60px 1px 5px;
        }

        .infoData {
            padding: 1px 0px 1px 5px;
        }

        table {
            width: 100%;
            background-color: #f3f3f3;
            outline: 2px solid rgb(235, 155, 81);
        }

        th {
            background-color: #457b9d;
            color: white;
            padding-top: 7px;
            padding-bottom: 7px;
        }

        td {
            background-color: #FFFFFF;
            text-align: center;
            padding-top: 7px;
            padding-bottom: 7px;
        }

        footer {
            margin-top: auto;
            background-color: #f3f3f3;
            break-after: page;
        }


        h2 {
            padding-left: 40px;
            color: #5D6975;
            display: inline-block;
        }

        .footerSh {
            display: inline-block;
            margin-left: 260px;
            color: #5D6975;
        }
    </style>
</head>

<body id='bd'>
  <button onclick="test()">Click me</button>
    <script>
        function generateSop(data, tableHtml) {
            var body = document.getElementById('bd');
            body.innerHTML += `  <div id="container">
                <header>
                <h1>SOP Training Sign In Sheet</h1>
                <span id="eDate"> SOP Effective Date: </span>
                </header>
                <div id="info">
                <div class="infoBlock">
                    <div class="infoTitle">
                    Supervisor
                    </div>
                    <div class="infoData">
                    ${data.supervisor_name}
                    </div>
                </div>
                <div class="infoBlock">
                    <div class="infoTitle">
                    Training Code
                    </div>
                    <div class="infoData">
                    ${data.tc}
                    </div>
                </div>
                <div class="infoBlock">
                    <div class="infoTitle">
                    Description
                    </div>
                    <div class="infoData">
                    ${data.desc}
                    </div>
                </div>
                <div class="infoBlock">
                    <div class="infoTitle">
                    Tracking Num
                    </div>
                    <div class="infoData">
                    ${data.trackc}
                    </div>
                </div>
                </div>
                <table>
                <thead>
                    <tr>
                    <th>Employee ID</th>
                    <th>Full Name</th>
                    <th>Training Date</th>
                    <th>Signature</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    ${tableHtml}
                </tbody>
                </table>
                <footer>
                <h2>
                    Trainer __________________
                </h2>
                <div class="footerSh"> Form Code Revision Date</div>
                </footer>
            </div>`;
        }
        function buildTable(data) {
            var tableHtml = ''
            for (let i = 0; i < data.length; i++) {
                var row = `
                                <tr>
                                <td>${data[i].employee_id}</td>
                                <td>${data[i].employee_name}</td>
                                <td>_________________________</td>
                                <td>_________________________</td>
                            </tr>`
                tableHtml += row
                //table.innerHTML += row
            }
            return tableHtml
        }

        function buildPage(mainData, employeeArray) {
            console.log("started")
            for (let i = 0; i < mainData.length; i++) {
                var tableHtml = buildTable(employeeArray)
                generateSop(mainData[i], tableHtml)

            }
        }

        function test() {
            console.log("Function ran")
        }
        //variables for testing in repl
        var myArray = [{ 'employee_id': '001', 'employee_name': 'John Anderson' }, { 'employee_id': '002', 'employee_name': 'Erick Quadsquez' }]

        var mainData = [{ supervisor_name: 'john cena', tc: "trainCode01", desc: "training Description", trackc: 1 }, { supervisor_name: 'rick ross', tc: "trainCode02", desc: "training Description", trackc: 2 }]

        //calling functions
        buildPage(mainData, myArray)
        window.Retool.subscribe(function(model) {
          if (!model) { return }
          //This prevents the component from entering an endless loop.
          buildPage(mainData, myArray)
        });
    </script>
</body>

</html>
  • Problem resolved.
    I just had to add an extra container because the bd container was not being recognized correctly.
1 Like