[iol] script not running multiple times in a report

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered

for clarification $Rec has the [Record ID#] being called in as data each #myDivTable

really I should only have to call the div-table one time and append rows for as many as they have


My script

(function() {

  setTimeout(function() {

$("#mydivTable").each(function() {

var Rec=$('#mydivTable').attr('data');

console.log(Rec);

var valueArray = Array(5).fill(Rec).map(function(n, i) {

    return $('#Row' + n + '-' + i).attr('data');

});

    var content="";

    content += "div.div-table { display: table; width: auto; background-color: #eee;  width: 350px;} \n";

    content += "div.div-table2 { display: table; width: auto; width: 300;} \n";

    content += "div.div-table-row { display: table-row; width: auto; clear: both;} \n";

    content += "div.div-table-lcol { float: left; display: table-column; width: 50px;} \n";

    content += "div.div-table-rcol { float: left; display: table-column; width: 300px;} \n";

    content += "div.div-table-ircol { float: left; display: table-column; width: auto;} \n";

    content += "div.div-table-0lcol { float: left; display: table-column; background-color:#0099CC;}\n";

    var maxW = 300;

    var maxV = Math.max(...valueArray);

    var ratio = (maxW / maxV);

    var wratio = ratio.toFixed(2);

    for (var i = 0; i < valueArray.length; i++) {

    var tratio= valueArray[i] * wratio;

    tratio==tratio.toFixed(0);

    if(tratio<=20){tratio=20;}

      content +=

        "\n #Row" + Rec + "-" + i + "{width:" + tratio + "px; color: #FFF; text-align: center;} ";

}

console.log(content);

    $('head').append('<style type="text/css" ID='+Rec+'>' + content + '</style>');

});

  }, 600);

})();

when ran does not seem to run for each iteration of this chart when viewed as a report http://imgur.com/VSIq5EH
This is my attempt at making a div table and is a major step in my final plans any help in solving this is greatly appreciated.
Photo of Robert

Robert

  • 30 Points

Posted 3 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,894 Points 20k badge 2x thumb
What are you trying to accomplish and what type of page are you on when you are trying to accomplish it?

Where is the id=mydivTable coming from?
Photo of Robert

Robert

  • 30 Points
id=myDivTable is in the field forced graph  I am attempting to make multiple graphs without an API call -see image here http://imgur.com/VSIq5EH

excuse the \n quickbase decided to add it

"\n<div class='div-table' id='mydivTable' style='width: 355px;' data='"&[Record ID#]&"'>"& "\n  <div class='div-table-row'>"& "\n    <div class='div-table-lcol'>Apples</div>"& "\n    <div class='div-table-rcol'>"& "\n      <div class='div-table2'>"& "\n        <div class='div-table-row'>"& "\n          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-0' data='"&[Apples]&"'>"&[Apples]&"</div>"& "\n          <div class='div-table-ircol'>"& "\n          </div>"& "\n        </div>"& "\n      </div>"& "\n    </div>"& "\n  </div>"& "\n  <div class='div-table-row'>"& "\n    <div class='div-table-lcol'>Oranges</div>"& "\n    <div class='div-table-rcol'>"& "\n      <div class='div-table2'>"& "\n        <div class='div-table-row'>"& "\n          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-1' data='"&[Oranges]&"'>"&[Oranges]&"</div>"& "\n          <div class='div-table-ircol'>"& "\n          </div>"& "\n        </div>"& "\n      </div>"& "\n    </div>"& "\n  </div>"& "\n  <div class='div-table-row'>"& "\n    <div class='div-table-lcol'>Peaches</div>"& "\n    <div class='div-table-rcol'>"& "\n      <div class='div-table2'>"& "\n        <div class='div-table-row'>"& "\n          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-2' data='"&[Peaches]&"'>"&[Peaches]&"</div>"& "\n          <div class='div-table-ircol'>"& "\n          </div>"&"</div>"&"</div>"&"</div>"&"</div>"& "\n  <div class='div-table-row'>"& "\n    <div class='div-table-lcol'>Bananas</div>"& "\n    <div class='div-table-rcol'>"& "\n      <div class='div-table2'>"& "\n        <div class='div-table-row'>"& "\n          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-3' data='"&[Bananas]&"'>"&[Bananas]&"</div>"& "\n          <div class='div-table-ircol'>"& "\n          </div>"&"</div>"&"</div>"&"</div>"&"</div>"& "\n  <div class='div-table-row'>"& "\n    <div class='div-table-lcol'>Pears</div>"& "\n    <div class='div-table-rcol'>"& "\n      <div class='div-table2'>"& "\n        <div class='div-table-row'>"& "\n          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-4' data='"&[Pears]&"'>"&[Pears]&"</div>"& "\n          <div class='div-table-ircol'>"& "\n          </div>"&"</div>"&"</div>"&"</div>"&"</div>"&"</div>"&[aiol]&[Record ID#]&[/aiol]&"chart1.js"&[/iol]


aiol was an attempted fix to append the record id# at the end of /i/clear2x2.gif?[record id#] to make it run multiple times. I added alot of fluff to my code and to the divs to try and make this work.


my eventual goals are 1: making my own highcharts better customized to managers requests  2: calling a scan-able bar code from a child record to a report in the parents form
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,894 Points 20k badge 2x thumb
I don't understand what you are trying to do and some aspects of your code don't look good. These aren't necessarily the biggest problems but these questions immediately come to mind:

1) Why are you using setTimeout() - it should never be necessary.

2) The image onload technique is designed to load the script module.js only once. If you want "multiple things" to happen you simply put the relevant code in module.js that will perform a loop or otherwise repeat the action you need.

3) To pass a [Record ID#] to the script you can use a data attribute to the script and read it using the dataset method.

image onload field formula definition:

  [iol] & "module.js" & [/iol]  &
  "<span class='QBU_Class Vibrant Success' " &
  "  data-rid='" & [Record ID#] & "'" &
  "></span>" &

within module.js:



  var rid = this.dataset.rid;
Photo of Robert

Robert

  • 30 Points
I need more in the direction of the Jquery aspect then. I need the script to goto the next div-table get the new values from myDivTable and append to the head like the first one.

i had another script get an error because it called on the data before it populated the fields so the timeout is a failsafe on that i will remove it later

https://jsfiddle.net/rpratt009/qdtuptes/ this is the relevent info