Search code examples
javascriptjqueryhtmlarraysquickbase

Need assistance in my script in quickbase for Jquery

I primary use quickbase and I am attempting to create a graph without the use of an API call.

this is a working version of my code without any tags between the two tables but between the tables could have many many tags between them IF they even exist this is the result. 

(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);

})();

I have added some fluff to try and make the script run multiple times but even when i did, it only used the first set of data seen in the image. What would be the best way to make this script goto the next table if it has one and get new the new values.

--- This would be the literal input I put into the field in quickbase the aiol and iol is the call to the script

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

  • I think the major problem that you're having here is repeated id values. Each record in the report has a DIV with id='mydivTable'. The id values aren't meant to be repeated in a document and doing so can result in unexpected behavior. In this instance, your $('#mydivTable') call in your script is returning only the first element. Fortunately, it appears to be a relatively easy fix.

    First, change the first line in the formula of your forcedgraph field so that you give the DIV a class name of "mydivTable" instead of an id:

    "<div class='div-table mydivTable' style='width: 355px;' data='"

    Now you can query for all elements that have 'mydivTable' as a class. Change your script file so that you're looking for classes instead of ids:

      $(".mydivTable").each(function() {
      var Rec = $(this).attr('data');

    Changing "#mydivTable" to this ensures that you are assigning the value of the 'data' attribute for the specific element that .each() is iterating through to Rec. Using "#mydivtable" will return nothing now that we've changed your field and using ".mydivTable" will return a collection of elements instead of just one.

    It should start working after those changes. At least it did for me in my own mock up.