Javascript missing

App Building
, , , ,
1

Hello all

I'm trying to build a dynamic HTML report using the HTML component but I'm finding that the Javascript is not loading. BUT if i use the custom component it does appear. I "inspected" page once loaded and can see its not loaded from the HTML component.

I would use the custom component ongoing HOWEVER the Iframe doesn't allow for the HTML to be returned as a variable. I'm creating the HTML, CSS and Javascript in a SQL db and loading it from a table.

FYI I am a SQL developer, this is my first time coding HTML, CSS and Javascript so any bad practices etc, please forgive.

Thanks for any insight

Here is what i see from the custom component
image

Here is what i see from the HTML component
image

Here is the code

<style>
  h1 {
    width: 900px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    margin: 40px auto;
  }

  #container {
    width: 900px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    text-align: center;
    margin: auto;
  }

  #container a {
    display: block;
    color: #000;
    text-decoration: none;
    background-color: #f6f6ff;
  }

  #container a:hover {
    color: #900;
    width: 250px;
    height: 75px;
    border: 5px solid;
    padding: 50px 0;
    font-size: 15px;
    text-decoration: underline;
    background-color: #f6f6ff;
  }

  #no1 {
    width: 250px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #000;
    margin: 20px auto;
  }

  #no1 a {
    height: 60px;
  }

  #col1 {
    display: inline;
    border: 1px solid #000;
    margin: 20px auto;
    margin-left: 35px;
    float: left;
  }

  #col1 a {
    width: 150px;
    height: 75px;
    padding-top: 8px;
  }

  #col1_2 {
    display: inline;
    border: 1px solid #000;
    margin: 20px auto;
    margin-left: 35px;
    clear: both;
    float: left;
  }

  #col1_2 a {
    width: 150px;
    height: 75px;
    padding-top: 8px;
  }

  #col2 {
    display: inline;
    border: 1px solid #000;
    margin: 20px auto;
    margin-left: 35px;
    float: left;
  }

  #col2 a {
    width: 150px;
    height: 75px;
    padding-top: 8px;
  }
</style>
<h1>TEST</h1>
<div id="container">
  <div id="col1">
    <a href="" target="_blank" rel="noopener noreferrer">47 - Test1 <div>_ Stage Order No:1 _</div>
      <div> Next Stage(s) </div>
      <div> 62 </div>
    </a>
  </div>
  <canvas id="myCanvas3" width="900" height="50" style="border:0px solid #d3d3d3;"></canvas>
  <script>
    function runQuery(i) {
      var c = document.getElementById("myCanvas3");
      var ctx = c.getContext("2d");
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(120, 0);
      ctx.lineTo(120, 50);
      ctx.stroke();
      console.log(ctx)
    }
    runQuery(0);
  </script>
  <div></div>
  <div id="col1_2">
    <a href="" target="_blank" rel="noopener noreferrer">62 - Test 2 <div>_ Stage Order No:2 _</div>
      <div> Next Stage(s) </div>
      <div> N/A </div>
    </a>
  </div>
</div>
2

Hey @dprior! Happy to help here :slight_smile: Would you mind clarifying this part?

I would use the custom component ongoing HOWEVER the Iframe doesn't allow for the HTML to be returned as a variable. I'm creating the HTML, CSS and Javascript in a SQL db and loading it from a table.

Are you trying to return the HTML from the custom component to be used somewhere else?\

3

Hello Victoria,

No, the HTML is completely created in SQL then retool selects it from a table to be used to create a report that is shown on retool. (which is used in the HTML component BUT its not showing the lines as the javascript is removed for some reason by the HTML component)

the example above is just a simple example

Here is another example which is a bit more complex.

image
image902×679 8.01 KB

Thanks

Danny

4

Hey Danny! Sorry for the delay here, just getting to this thread in my queue (busy week! :sweat_smile:). Would it be alright if I stepped into your app to take a look? The name of your app would be helpful, if so!