asked on February 24, 2016
Hello everyone,
I noticed that my JS is taking over 15 seconds (at it's fastest) to load on my form. I am fairly new to JS and was wondering if someone could take a quick look and see if I am making some obvious mistakes that are causing this to take so long.
Thank you in advance to anyone who takes a look or makes an attempt!
/////////////////Auto Generate Tables for each section////////////////////////
// eiTables.js version 2.0.6
function eiTables() {
this.self = this;
self.workers = [];
var rows = [];
var fieldReplace = function(source, field, row) {
var temp = $(field).html();
if (temp !== undefined) {
if (source['Fields'] !== undefined) {
source['Fields'].forEach(function(item, idx) {
if (item !== null) {
if ((row) && (row.constructor === Array) &&
(row[idx] !== undefined)) {
if (row[idx] !== "") {
temp = temp.replace("%" + item +
"%", row[idx]);
}
}
}
});
$(field).html(temp);
}
}
}
var resizeTable = function(selector, newSize) {
var oldSize = $(selector + " tbody tr").length;
if (newSize > oldSize) {
for (i = 0; i < newSize - oldSize; i++) {
$(selector + " a.cf-table-add-row").click();
}
} else if (newSize < oldSize) {
for (i = 0; i < oldSize - newSize; i++) {
$(selector + " span.form-del-field").last().click();
}
}
}
var resizeCollection = function(selector, newSize) {
var oldSize = $(selector + " .rpx").length;
if (newSize > oldSize) {
for (i = 0; i < newSize - oldSize; i++) {
$(selector + " a.cf-collection-append").click();
}
} else if (newSize < oldSize) {
for (i = 0; i < oldSize - newSize; i++) {
$(selector + " span.cf-collection-delete").last().click();
}
}
}
var popoluteTarget = function(target, source, data) {
if (target['Type'] === "collection") {
resizeCollection(target['Selector'], data.length);
var blocks = $(target['Selector'] + " .rpx");
rows.forEach(function(row, index) {
$(blocks.get(index)).find(
":input[id], .eiField").each(function(
idx, item) {
if ($(item).hasClass("eiField")) {
fieldReplace(source, item, row);
} else {
$(item).val(row[idx]);
}
});
});
} else if (target['Type'] === "table") {
resizeTable(target['Selector'], data.length);
var blocks = $(target['Selector'] + " tbody tr");
rows.forEach(function(row, index) {
$(blocks.get(index)).find(
":input[id], .eiField").each(function(
idx, item) {
if ($(item).hasClass("eiField")) {
fieldReplace(source, item, row);
} else {
$(item).val(row[idx]);
}
});
});
} else if (target['Type'] === "text") {
if (target.master === undefined) {
target.master = $(target['Selector']).html();
} else {
$(target['Selector']).html(target.master);
}
fieldReplace(source, target['Selector'], rows[0]);
}
}
var extractSource = function(source) {
rows = [];
if (source['Type'] === "dropdown") {
$(source['Selector'] + " option").each(function(idx, item) {
if ((item.value === "") && (source[
'IgnoreBlank'] === true)) {} else {
if (source['SplitOn'] === undefined) {
rows.push(item.value);
} else {
row = []
item.value.split(source['SplitOn']).forEach(
function(item) {
row.push(item);
});
rows.push(row);
}
}
});
} else if (source['Type'] === "text") {
$(source['Selector']).val().split("\n").forEach(function(
item) {
if ((item.value === "") && (source[
'IgnoreBlank'] === true)) {} else {
if (source['SplitOn'] === undefined) {
rows.push(item.value);
} else {
row = []
item.value.split(source['SplitOn']).forEach(
function(item) {
row.push(item);
});
rows.push(row);
}
}
});
} else if (source['Type'] === "fields") {
var row = [];
$(source['Selector']).find("input").each(function(idx, item) {
row.push($(item).val());
});
rows.push(row);
}
return rows;
}
var executeWorker = function(worker) {
var rows = extractSource(worker['Source']);
if (worker['Target'].constructor === Array) {
worker['Target'].forEach(function(item) {
popoluteTarget(item, worker['Source'], rows);
});
} else {
popoluteTarget(worker['Target'], worker['Source'], rows);
}
};
var changeTrigger = function() {
self.workers.forEach(function(worker) {
if (worker['Trigger']['Type'] === "change") {
executeWorker(worker);
}
});
};
var ajaxTrigger = function() {
self.workers.forEach(function(worker) {
if (worker['Trigger']['Type'] === "ajax") {
executeWorker(worker);
}
});
};
this.create = function(workerdef) {
self.workers.push(workerdef);
if (workerdef['Trigger']['Type'] === "ajax") {
$(document).bind("ajaxComplete", ajaxTrigger);
} else if (workerdef['Trigger']['Type'] === "change") {
$(workerdef['Trigger']['Selector']).bind("change",
changeTrigger);
}
};
}
eiTables.prototype['create'] = eiTables.prototype.create;
$ei = new eiTables();
$ei2 = new eiTables();
$ei3 = new eiTables();
$ei4 = new eiTables();
$ei5 = new eiTables();
$ei6 = new eiTables();
$ei7 = new eiTables();
$ei8 = new eiTables();
$ei9 = new eiTables();
//////////////// On Change of each Table and Field/////////////////
$(document).ready(function() {
$(document).on('blur change', '#q3 input', autofill);
$('#q10.cf-table-block').on('blur', 'input', avg1);
$('#q43.cf-table-block').on('blur', 'input', avg2);
$('#q51.cf-table-block').on('blur', 'input', avg3);
$('#q59.cf-table-block').on('blur', 'input', avg4);
$('#q67.cf-table-block').on('blur', 'input', avg5);
$('#q75.cf-table-block').on('blur', 'input', avg6);
$('#q83.cf-table-block').on('blur', 'input', avg7);
$('#q92.cf-table-block').on('blur', 'input', avg8);
$('#q101.cf-table-block').on('blur', 'input', avg9);
$('.cf-table-block').on('blur', 'input', subAvg);
$(document).ajaxComplete(function() {
if ($('#q97 option').text() === '') {
$(".janitor2").hide();
} else {
$(".janitor2").show();
}
if ($('#q88 option').text() === '') {
$(".pink2").hide();
} else {
$(".pink2").show();
}
if ($('#q79 option').text() === '') {
$(".van2").hide();
} else {
$(".van2").show();
}
});
////////////////////////Hide Buttons not relevant to a Program/////////////////
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our underAge field changes
$("#q3").change(function() {
toggleFields();
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
if ($(".program option:selected").text() == 'Quille') $("#q114").show();
else $("#q114").hide();
}
function autofill() {
$('.autofill').trigger('click');
}
//////////////////Hide Sections of Form until a Program is selected/////////////////
toggleForm(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our underAge field changes
$("#q3").change(function() {
toggleForm();
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleForm() {
if ($(".program option:selected").text() === '') $(
"#q26, #q113, .living2, .computer2, .laundry2, .bathroom2, .kitchen2, .bedrooms2, .van2, .pink2, .janitor2"
).hide();
else $(
"#q26, #q113, .living2, .computer2, .laundry2, .bathroom2, .kitchen2, .bedrooms2, .van2, .pink2, .janitor2"
).show();
}
//////////////////////// Fill table elements based on Button Clicked/////////////////
$('#q3').change(autofill);
$ei.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q37",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["LR_Comp"]
},
Target: {
//Target cf-block
Selector: "#q10",
Type: "table",
},
});
$ei2.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q39",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["PC_Comp"]
},
Target: {
//Target cf-block
Selector: "#q43",
Type: "table",
},
});
$ei3.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q47",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Laundry_Comp"]
},
Target: {
//Target cf-block
Selector: "#q51",
Type: "table",
},
});
$ei4.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q55",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Bath_Comp"]
},
Target: {
//Target cf-block
Selector: "#q59",
Type: "table",
},
});
$ei5.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q63",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Kitchen_Comp"]
},
Target: {
//Target cf-block
Selector: "#q67",
Type: "table",
},
});
$ei6.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q71",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Bed_Comp"]
},
Target: {
//Target cf-block
Selector: "#q75",
Type: "table",
},
});
$ei7.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q79",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Van_Comp"]
},
Target: {
//Target cf-block
Selector: "#q83",
Type: "table",
},
});
$ei8.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q88",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Pink_Comp"]
},
Target: {
//Target cf-block
Selector: "#q92",
Type: "table",
},
});
$ei9.create({
Trigger: {
Type: "ajax"
},
Source: {
//source field
Selector: "#q97",
SplitOn: "+",
IgnoreBlank: true,
Type: "dropdown",
Fields: ["Janitor_Comp"]
},
Target: {
//Target cf-block
Selector: "#q101",
Type: "table",
},
});
///////////////////Buttons for Each Section and Next Section Buttons///////////////////////////
var section1 = $('.section1 h1:first').text();
var section2 = $('.section2 h1:first').text();
var section3 = $('.section3 h1:first').text();
var section4 = $('.section4 h1:first').text();
var section5 = $('.section5 h1:first').text();
var section6 = $('.section6 h1:first').text();
var section7 = $('.section7 h1:first').text();
var section8 = $('.section8 h1:first').text();
var section9 = $('.section9 h1:first').text();
$('<div class="navbar"><div class="navitem living2">' + section1 +
'</div><div class="navitem computer2">' + section2 +
'</div><div class="navitem laundry2">' + section3 +
'</div><div class="navitem bathroom2">' + section4 +
'</div><div class="navitem kitchen2">' + section5 +
'</div><div class="navitem bedrooms2">' + section6 +
'</div><div class="navitem van2">' + section7 +
'</div><div class="navitem pink2">' + section8 +
'</div><div class="navitem janitor2">' + section9 + '</div></div>').insertBefore(
'#q26');
$('<input class="navitem computer2" value="Next: ' + section2 +
'" type="button">').appendTo('.section1');
$('<input class="navitem laundry2" value="Next: ' + section3 +
'" type="button">').appendTo('.section2');
$('<input class="navitem bathroom2" value="Next: ' + section4 +
'" type="button">').appendTo('.section3');
$('<input class="navitem kitchen2" value="Next: ' + section5 +
'" type="button">').appendTo('.section4');
$('<input class="navitem bedrooms2" value="Next: ' + section6 +
'" type="button">').appendTo('.section5');
$('<input class="navitem van2" value="Next: ' + section7 + '" type="button">').appendTo(
'.section6');
$('<input class="navitem pink2" value="Next: ' + section8 + '" type="button">')
.appendTo('.section7');
$('<input class="navitem janitor2" value="Next: ' + section9 +
'" type="button">').appendTo('.section8');
$('.navitem').on('touchstart click', function() {
$(
'.section1, .section2, .section3, .section4, .section5, .section6, .section7, .section8, .section9'
).hide();
$('.navbar').find('.navitem').removeClass('selected');
if ($(this).hasClass('living2')) {
$('.section1').show();
$('.navbar').find('.living2').addClass('selected');
} else if ($(this).hasClass('computer2')) {
$('.section2').show();
$('.navbar').find('.computer2').addClass('selected');
} else if ($(this).hasClass('laundry2')) {
$('.section3').show();
$('.navbar').find('.laundry2').addClass('selected');
} else if ($(this).hasClass('bathroom2')) {
$(".section4").show();
$('.navbar').find('.bathroom2').addClass('selected');
} else if ($(this).hasClass('kitchen2')) {
$(".section5").show();
$('.navbar').find('.kitchen2').addClass('selected');
} else if ($(this).hasClass('bedrooms2')) {
$(".section6").show();
$('.navbar').find('.bedrooms2').addClass('selected');
} else if ($(this).hasClass('van2')) {
$(".section7").show();
$('.navbar').find('.van2').addClass('selected');
} else if ($(this).hasClass('pink2')) {
$(".section8").show();
$('.navbar').find('.pink2').addClass('selected');
} else if ($(this).hasClass('janitor2')) {
$(".section9").show();
$('.navbar').find('.janitor2').addClass('selected');
}
})
$('.navitem.living2').trigger('click');
});
////////////////////Addition and Average of Tables//////////////////
function avg1() {
var sum = 0;
$('#q10.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.livingscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q10.cf-table-block tr').length - 1);
$('.total1 input').val(sum.toFixed(2));
}
function avg2() {
var sum = 0;
$('#q43.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.pcscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q43.cf-table-block tr').length - 1);
$('.total2 input').val(sum.toFixed(2));
}
function avg3() {
var sum = 0;
$('#q51.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.laundryscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q51.cf-table-block tr').length - 1);
$('.total3 input').val(sum.toFixed(2));
}
function avg4() {
var sum = 0;
$('#q59.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.bathscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q59.cf-table-block tr').length - 1);
$('.total4 input').val(sum.toFixed(2));
}
function avg5() {
var sum = 0;
$('#q67.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.kitchenscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q67.cf-table-block tr').length - 1);
$('.total5 input').val(sum.toFixed(2));
}
function avg6() {
var sum = 0;
$('#q75.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.bedscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q75.cf-table-block tr').length - 1);
$('.total6 input').val(sum.toFixed(2));
}
function avg7() {
var sum = 0;
$('#q83.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.vanscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q83.cf-table-block tr').length - 1);
$('.total7 input').val(sum.toFixed(2));
}
function avg8() {
var sum = 0;
$('#q92.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.pinkscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q92.cf-table-block tr').length - 1);
$('.total8 input').val(sum.toFixed(2));
}
function avg9() {
var sum = 0;
$('#q101.cf-table-block tbody tr').each(function() {
var s = 0;
var q = 0;
var r = 0;
$(this).find('.janitorscore input').each(function() {
s += parseNumber($(this).val());
$(this).val(s);
});
//$(this).find('.subtotal input').val((s).toFixed(2));
sum += s;
//$('.priority option').text('Urgent');
});
sum = sum / ($('#q101.cf-table-block tr').length - 1);
$('.total9 input').val(sum.toFixed(2));
}
function subAvg() {
var sum = 0,
n = 0;
var aTotal = [$('.total1 input').val(), $('.total2 input').val(), $(
'.total3 input').val(),
$('.total4 input').val(), $('.total5 input').val(), $(
'.total6 input').val(), $('.total7 input').val(), $(
'.total8 input').val(), $('.total9 input').val()
];
for (i = 0; i < aTotal.length; i++) {
if (aTotal[i] !== '') {
sum += parseFloat(aTotal[i]);
n += 1;
console.log(aTotal[i]);
}
}
console.log(sum);
console.log(n);
console.log(sum / n);
$('.total input').val(sum / n).toFixed(2);
}
/////////////////////////// Parse Number Code/////////////////////
function parseNumber(n) {
var f = parseFloat(n); //Convert to float number.
return isNaN(f) ? 0 : f; //treat invalid input as 0;
}
0
0