Jump to content

problem with script when deployed


Recommended Posts


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


 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

// 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;}
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 10 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...