problem with script when deployed

[jsinger]

Hi, I've copied this script from the showcase section.  It works fine when I view the datapage in caspio bridge.  However it does not function at all when I view it from the web page I have deployed it to.  I cant understand why, if anyone could help me out with this I would appreciate it.

 

 

Header Code:

function calcColumn (calcType,calcCol) {

  

  /* function calcColumn selects a column of data to run calculations against

   * by Brian Chong  

   * @param {string} calcType == [total | (avg | average) | count | percent]

   * @param {numeric} calcCol :: the number of the column to be calculated, counting from left-to-right, starting with 1

   */



   // ---- Set Variables and Functions ---- // 

   

   // Select Results Table

   var table = document.getElementsByClassName("cbResultSetTable")[0];



   // Calculate the number of rows

   var rows = table.getElementsByTagName("tr");

   var rowsLength = rows.length; 



   // Calculate the number of columns based on the first row

   var colsLength = rows[0].getElementsByTagName("td").length;   



   // Calculation Variables

   var counter, cell, cellValue, n, title;

   var arrayValue= new Array;

   // ---- End Variables and Functions ---- // 



   //  ---- Validate calculate column number ---- //

   if ((calcCol > colsLength) || (!calcCol)) {



      document.write ("

ERROR: Invalid Column number in calcColumn(\"" + calcType + "\"," + calcCol + ")

The Column number must be less than " + colsLength + "."); 

      return "ERROR"; 

       

   } else if (calcCol != 0) {

      // Offset calcCol by -1

      // Since computers count starting with 0

      calcCol --;

   }

   //  ---- End Validate calculate column number ---- //

   

   // ---- Parse Column of Data ---- //  

    cell = document.getElementsByClassName("cbResultSetTableCell cbResultSetData");  

    n = calcCol;

    for (counter=0; counter < cell.length; counter++) {

      if (counter == n) { 

        arrayValue.push (cell[counter].innerHTML);

        n = n+colsLength;

      }

    }

    title = rows[0].getElementsByTagName("td")[calcCol].innerText;

   // ---- End Parse Column of Data ---- // 

   

   // ---- Cacluate Data  ---- // 

   if (calcType == "count") {

    

    insertCalcRow(arrayValue.length);

    

   } else if (calcType == "total") {

      

      insertCalcRow(arrayTotal(arrayValue)); 

   

   } else if (calcType == "average" || calcType =="avg")  {



    if (calcType == "avg") {

        calcType = "average";

    }      



      insertCalcRow(arrayAvg(arrayValue));



   } else if (calcType == "percent") { 

    insertBreakDown(arrayValue, title);

   } else { 

    document.write("

ERROR: Not a valid Calculation Type in calcColumn(\"" + calcType + "\"," + (calcCol+1) + ")

The possible Calculation Types are \"total\",\"average\",\"count\", or \"percent\"."); 

    return "ERROR";

   }

   

   // ---- End Cacluate Data ---- // 



  function insertCalcRow (answer) {

    /* Inserts a calculated Results Row

     * @param {string} answer :: result data

     * @param {array} table (Global) :: parsed table data

     * @param {array} rows (Global) :: parsed row data

     * @param {numeric} rowsLength (Global) :: length of rows variable

     * @param {numeric} colsLength (Global) :: number of columns in table

     * @param {string} calcType (Global) :: name of calculation performed

     * @param {numeric} calcCol (Global) :: column number

     */

     

    table.insertRow(rowsLength); 

    var calcRow = table.rows[rowsLength]; 



    // Set TR CSS class

    if (isEven(rowsLength)==true) {

      calcRow.className="cbResultSetEvenRow";

    } else { 

      calcRow.className="cbResultSetOddRow";

    }



    // Insert cells for the new row

    for (counter=0; counter < colsLength; counter++) {

      

      var calcCell = calcRow.insertCell(counter);

      calcCell.className = "cbResultSetTableCell cbResultSetLabel"; 

      

      if (counter == calcCol - 1) {

        calcCell.innerHTML = "

" + calcType.toUpperCase() + ": "; 

      } else if (counter == calcCol) {

          calcCell.innerHTML = answer; 

      } else {

          calcCell.innerHTML = " ";

      }

    }

   } // ---- End function insertCalcRow ---- // 

   

   function insertBreakDown (arr, title) { 

    /* Inserts a Percentage Breakdown Table for a Column of Data

     * @param {array} arr :: The Column set of data to be analyzed

     * @param {string} title :: Table Header (Optional)

     */

    

    var arrGH = new Array;

    arrGH = arrayPercent(arr); 

    

    if (!title) {

    // If title var is empty, make it blank

      title = " " ; 

    }

    

    document.write ("");

    document.write ("[b]

" + title + "

Percetage Breakdown[/b]"); 

    for (var n in arrGH) {

      document.write("" + n + "");

      document.write("" + arrGH[n] + "");

    }

    document.write ("");

    

   } // ---- End function insertBreakDown ---- // 



} // ---- End function calcColumn ---- // 



function isEven(num) {

  return !(num % 2);

}



var isNumeric = function(x) {

   // returns true if x is numeric and false if it is not.

   var RegExp = /^(-)?(\d*)(\.?)(\d*)$/; 

   return String(x).match(RegExp);

}



function arrayTotal (arr) {

   arr=arr.filter(isNumeric);

   var total = 0; 

   for (var i in arr) {

      total += parseFloat ( arr[i] ) ; 

   }

   

   // Error Message

   if (isNaN(total)) {total = "Not a Number";}

   

   return total;

}



function arrayAvg (arr) {

   arr=arr.filter(isNumeric);

   var total = arrayTotal (arr); 

   var avg = 0; 

   avg = total / arr.length;

   avg = avg.toFixed(2);

   

   // Error Message

   if (isNaN(avg)) {avg = "Not a Number";}

   

   return avg; 

}



function arrayPercent (arr) {

/* function arrayPercent calculates the percentage of reoccurance within an array

  * @param {array} arr

  * @returns {array} arrGH :: a named array with each unique value as an index and that unique value's percentage over the total number of values in the arr array

  */



  var arrGH = new Array;



  for (var n in arr) {

    

    var test = in_NamedArrayIndex (arr[n],arrGH); 

    

    if (test == false) { 

      arrGH[arr[n]] = 1; 

    } else if (test == true) { 

      arrGH[arr[n]] = arrGH[arr[n]] + 1; 

    }

    

  }

  

  for (var n in arrGH) {    

    arrGH[n] = (arrGH[n] / arr.length)*100; 

    arrGH[n] = arrGH[n].toFixed(2);

    arrGH[n] = arrGH[n] + "%";

  }



  return arrGH; 

}



function in_array (needle,haystack) { 

/* function in_array searches array values

  * @param {string} needle :: search term

  * @param {array} haystack 

  * @returns {numeric} key :: haystack index number found

  * @returns {boolean} false :: needle not found

  */

  

  for (key in haystack) { 

    if (haystack[key] == needle) {

      return key;

    } else { 

      return false; 

    }

  }

}



function in_NamedArrayIndex (needle, haystack) { 

/* function in_NamedArrayIndex searches a named array index 

  * @param {string} needle :: search term

  * @param {array} haystack :: named array 

  */

  

  if (!haystack[needle]) { 

    return false;

  } else {

    return true; 

  }

} 

 

 

Footer Code:

 

calcColumn ("total",5) ;

calcColumn ("avg",5) ; 

calcColumn ("count",4);

calcColumn ("percent",3);

 

[bahar_vm]

There is one line in the script which selects the results table as:

// Select Results Table

var table = document.getElementsByClassName("cbResultSetTable")[0];

This way can be used when you use the direct URL of the DataPage, however when you embed the DataPage in your site, the styles change into inline styles on your web page and as a result the class "cbResultSetTable" will no longer exist.

I recommend encapsulating your results page with div elements and assign it a unique ID then call it by the ID. How to do it? Here you go:

1. Add Header/Footer to your results page and put the code in as:

Header:

Footer:

2. In your script call the table as:

var wrapper= document.getElementById("cb_results");

var table = wrapper.document.getElementsByTagName("table")[0];

Try this out and it should work.

Best,

Bahar M.

[jsinger]

Just tried that out, encapsulating it doesn't seem to have changed anything except now the script doesn't run in caspio bridge or embedded.

[bahar_vm]

Oops! I made a mistake, here is the correction on the second line:

var table = wrapper.getElementsByTagName("table")[0];

Best,

Bahar M.

[jsinger]

Thanks tons, works now. Now if I can only figure out how to get it to stop making new rows for each column.

Thanks tons for your help

Joshua Singer

IT Director

USA Energy

EDIT: Of course, as one problem is resolved another pops up. It will run the script in the browser and in caspio bridge. However, it doesn't add anything up in the browser, claims that each column is not a number.

[jsinger]

I put up the page in a test mode, here is the link to it for you to view.

http://www.usaenergyonline.biz/pages/TEST.html

[bahar_vm]

Hi Joshua,

I do not see any error on the page except that I see you are calling the function passing index number 5:

calcColumn ("total",5) ;

3calcColumn ("avg",5) ;

4calcColumn ("count",5);

Column indexes start from 0 therefore column number 5 is the sixth column "Promotions Expense". As I see on the test page this column includes blank values.

Best,

Bahar M.

[jsinger]

That's odd, when I load it up I'm calling commissions expense.

[luzagodom]

// Select Results Tablevar table = document.getElementsByClassName("cbResultSetTable")[0];// Calculate the number of rowsvar rows = table.getElementsByTagName("tr");var rowsLength = rows.length; // Calculate the number of columns based on the first rowvar colsLength = rows[0].getElementsByTagName("td").length; // Calculation Variablesvar counter, cell, cellValue, n, title;var arrayValue= new Array;// ---- End Variables and Functions ---- // // ---- Validate calculate column number ---- //if ((calcCol > colsLength) || (!calcCol)) {document.write ("

ERROR: Invalid Column number in calcColumn(\"" + calcType + "\"," + calcCol + ")The Column number must be less than " + colsLength + ".

"); return "ERROR"; } else if (calcCol != 0) {// Offset calcCol by -1// Since computers count starting with 0calcCol --;}// ---- End Validate calculate column number ---- //// ---- Parse Column of Data ---- // cell = document.getElementsByClassName("cbResultSetTableCell cbResultSetData"); n = calcCol;for (counter=0; counter < cell.length; counter++) {if (counter == n) { arrayValue.push (cell[counter].innerHTML);n = n+colsLength;}

[jsinger]

I don't understand... It looks like you just copied the code and pasted it as a reply.

I've determined that the Parse function is obviously the code at fault. I just can't seem to get it to find the cells once they've been embedded. Should I just have them also look for CB_Results?

I changed

// ---- Parse Column of Data ---- //

cell = document.getElementsByClassName("cbResultSetTableCell cbResultSetData");

to

// ---- Parse Column of Data ---- //

cell = document.getElementById("cxkg");

It didn't fix it however. How should I direct the script to read the table?

I guess I'm slow on the uptake, but I just went and looked at the source under the styles, do those disappear when it is embedded as well?

[bahar_vm]

Calling the class is not recommended when you are using the embed deployment because when you embed the DataPage in your site, the styles convert into inline styles on your web page and as a result the class will no longer exist.

I am not sure where you got this code from however there is a sample code which is placed on the Java Script board at

viewtopic.php?f=14&t=12180, this one has been tested and recommended if you have the DataPage embedded in your site.

Best,

Bahar M.

[jsinger]

I'm clearly doing something wrong. I am having trouble getting your code to work. I even made my test datapage exactly to the specifications required to use the script "as is", and it still won't function. The code is identical to the example script, and here is a link to the test page again.

http://www.usaenergyonline.biz/pages/test.html

EDIT: Google Chrome developer's tools gives me this error when I inspect the script,

for line 38

Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined

[bahar_vm]

Please change index of the table from 1 to 0, in your case because Caspio branding is removed from your DataPages you need to call your table using table[0] as it is the first and the only table in the page.

Best,

Bahar M.

[jsinger]

Need some countermeasures to spammers it seems.

So I've got that script working, it's almost exactly what I was looking for. I was looking for something more complicated than it needed to be.

Now if anyone wants to provide a little more help, My next step is to get it to display column totals for all the columns. I already modified it enough to place the total sign to the left. I tried just using the same script and naming the function f_calTotal1(), f_calTotal2() etc, but the problem is it makes a new row for each total. As evidenced here, http://www.usaenergyonline.biz/pages/test.html

[bahar_vm]

The reason you see the second row for the total is that you are calling a second function to sum the total. You need to add the extra lines of codes in the same function.

Best,

Bahar M.

[jsinger]

I greatly appreciate all your help. I have been able to modify the script to my needs and it is now working perfectly. I simply replicated all the variables and most of the functions for each column I needed to calculate. Set the total column to 0 and all is right.

[bahar_vm]

Great! I am glad to hear that:)

[rbecket]

As one problem is resolved another pops up. It will run the script in the browser and in caspio bridge. However, it doesn't add anything up in the browser, claims that each column is not a number.

I love photography, I own a Photobooth Rental Camarillo, ca. I render service Chocolate Fountain Rental Simi Valley for any occasions.