Need assistance in my script in quickbase for Jquery

Question

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]

Please [edit] your question title to something meaningful. It's clear from the tag you added that the topic is Quickbase, and it's clear from the fact you're posting here that you need assistance. Removing both of those from the title leaves basically nothing. Your title should describe the actual problem you're trying to solve or question you're asking in a way that will be relevant to future users here who see it in a search result. Making it meaningful helps get it to the attention of people who may be able to help more quickly as well. Thanks. — Ken White, Jun 30 '16 at 02:27

score 0 · Accepted Answer · answered Jul 02 '16 at 03:33

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.

Thank you. I need to work on my jquery stuff better – Robert Pratt Jul 09 '16 at 01:41 — Robert Pratt, Jul 09 '16 at 01:41

Need assistance in my script in quickbase for Jquery

1 Answers1