Bootstrap modal populated by selected row in table data - javascript

The code below works fine on my computer, however when I am trying it on different workstations it does not work unless you do a hard refresh SHIFT + F5 then it will work but, when the page is reloaded it will go back to not working. Any help if you can tell me where this script is wrong would be greatly appreciated.
function run() {
var table = document.getElementById('call-logs-table');
var rows = table.rows;
for (var i=0; i<rows.length; i++) {
rows[i].onclick = function (event) {
var cells = this.cells;
var person_contacted = cells[0].innerHTML;
var date = cells[1].innerHTML;
var c_purpose = cells[2].innerHTML;
var c_notes = cells[3].innerHTML;
var sales_rep = cells[4].innerHTML;
var timestamp = cells[5].innerHTML;
var potential = cells[6].innerHTML;
var catalog_num = cells[7].innerHTML;
var dateplanner_num = cells[8].innerHTML;
var calendar_num = cells[9].innerHTML;
document.getElementById('call-log-title').innerHTML = 'Call Log Entered at ' + timestamp + ' by ' + sales_rep;
document.getElementById('lbl_contact').innerHTML = person_contacted;
document.getElementById('lbl_date').innerHTML = date;
document.getElementById('lbl_catalogs').innerHTML = catalog_num;
document.getElementById('lbl_calendars').innerHTML = calendar_num;
document.getElementById('lbl_planners').innerHTML = dateplanner_num;
document.getElementById('lbl_purpose').innerHTML = c_purpose;
document.getElementById('lbl_notes').innerHTML = c_notes;
document.getElementById('lbl_potential').innerHTML = potential;
};
}
}
window.onload = function() { run(); }

Related

Execute a second function when the first complete

I have a GS code with three different functions that are activated with a form submission.
The first function:
function processForm(formObject){
if(formObject.RecId && checkID(formObject.RecId)){
updateData(getFormValues(formObject),globalVariables().spreadsheetId,getRangeByID(formObject.RecId));
}else{
appendData(getFormValues(formObject),globalVariables().spreadsheetId,globalVariables().insertRange);
var form = FormApp.create(formObject.nombre)
.setAllowResponseEdits(false)
.setCollectEmail(false)
.setDescription(formObject.fechaprev)
.setRequireLogin(false)
.setShowLinkToRespondAgain(false);
var newname = formObject.nombre;
form.setDestination(FormApp.DestinationType.SPREADSHEET, globalVariables().spreadsheetId);
}
When this first function completes I need to run this other two functions:
function ordenarData(formUrl){
var ss = SpreadsheetApp.openById(globalVariables().spreadsheetId);
var sheetNameArray = [];
var sheets = ss.getSheets();
for (var i = 0; i < sheets.length; i++) {
sheetNameArray.push(sheets[i].getName());
}
var ordenado = sheetNameArray.sort();
for( var j = 0; j < sheets.length; j++ ) {
ss.setActiveSheet(ss.getSheetByName(sheetNameArray[j]));
ss.moveActiveSheet(j + 1);
var last_element = sheetNameArray[sheetNameArray.length - 1];
Logger.log(last_element);
}
completarData(formUrl,last_element);
}
function completarData(formUrl,last_element){
var ss = SpreadsheetApp.openById(globalVariables().spreadsheetId);
var hojaData = ss.getSheetByName("Data")
var celdaNEv = "=COUNT(\'"+ last_element + "\'\!\A\:\A\)";
var celdaSatisf = "=IFERROR((AVERAGE(\'"+ last_element +"\'\!\C\:\C)/10);0)";
var celdaPEv = '=IFERROR(O'+ hojaData.getLastRow() +'/N' + hojaData.getLastRow() +';0)';
var celdaPAs = '=IFERROR(N'+hojaData.getLastRow()+'/M'+hojaData.getLastRow()+';0)';
var celdaForm = "<a href=" + formUrl + " target='_blank' class='btn btn-primary btn-xs'><i class='fas fa-file-alt'></i></a>";
var celdaTh = '=IFERROR(ROUND(L'+hojaData.getLastRow()+'*N'+hojaData.getLastRow()+'; 0);0)';
var celdaMhr = '=IFERROR(ROUND(T'+hojaData.getLastRow()+'/M'+hojaData.getLastRow()+'; 2);0)';
var formulas = [
[celdaNEv, celdaSatisf, celdaPEv, celdaPAs, celdaForm, celdaTh, celdaMhr]
];
var formatos = [
["###", "0.00%", "0.00%", "0.00%", "", "####", "0.00"]
];
var cell = hojaData.getRange("O"+hojaData.getLastRow()+":U"+hojaData.getLastRow()+"").setNumberFormats(formatos);
cell.setValues(formulas);
}
As you can see, the first function generates a GForm and set the destination to an existing ssheet. Then, with ordenarData() I want to order the sheets and get the name of the last tab. My problem is that if a link processForm() to the second function, they run at the same time and theres no time to generate the new tab, so the function does not work fine.
How can I set that the function ordenarData() runs only when processForm() has finished?
If you know any other way to get the name of the Tab which is generate with FormApp.create().setDestination it will be also okay for me.
Solve!
SpreadsheetApp.flush() works fine for me: getSheets() Google Apps Script multiple calls issue

Cant call Jquery function in if loop

my first ever question pretty sure I'm being a bit daft here, but am a beginner and would appreciate your help.
Im working on a webpage where there is a html table listing several columns of data.
When the page loads it runs a jquery script which counts the different types of "incidents" and plots them in another table which then another jquery script populates a graph.
I have a third script (javascript) which after a button is clicked, runs an if loop, which looks at the data in the first column and if it does not match the criteria then the row is deleted.
So far so good, the issue is that I want the script which populates the table for the graph to run again, but Im not sure how to call it from my if loop.
Ive put the two scripts below, basically I want to call the 1st script in the second script.
$(function () {
var NumFireAlarms = $("#incidents tr:contains('Fire Alarm')");
$("#result").html(NumFireAlarms.length + " Fire Alarm");
var firealarms = NumFireAlarms.length;
document.getElementById("no_of_incident_type").rows[1].cells[1].innerHTML = firealarms
var NumLockout = $("#incidents tr:contains('Lockout Out of Office Hours')");
$("#result").html(NumLockout.length + " Lockout Out of Office Hours");
var lockouts = NumLockout.length;
document.getElementById("no_of_incident_type").rows[2].cells[1].innerHTML = lockouts
var NumLockoutDayTime = $("#incidents tr:contains('Lockout Day Time')");
$("#result").html(NumLockout.length + " Lockout Day Time");
var lockoutsDayTime = NumLockoutDayTime.length;
document.getElementById("no_of_incident_type").rows[3].cells[1].innerHTML = lockoutsDayTime
var NumSensitiveIncident = $("#incidents tr:contains('Sensitive Incident')");
$("#result").html(NumSensitiveIncident.length + " Sensitive Incident");
var SensitiveIncident = NumSensitiveIncident.length;
document.getElementById("no_of_incident_type").rows[4].cells[1].innerHTML = SensitiveIncident
});
function filterForGraph() {
var incident_category = document.getElementById("Incident_Category").value;
var start_date = document.getElementById("start_date").value;
var end_date = document.getElementById("end_date").value;
var staff_type = document.getElementById("Job_Title").value;
var i;
var count = 0;
var table_length = document.getElementById("incidents").rows;
var TL = table_length.length;
for (i = TL - 1; i >= 1; i--)
{
var category_column = document.getElementById("incidents").rows[i].cells.item(0).innerHTML;
var date_column = document.getElementById("incidents").rows[i].cells.item(1).innerHTML;
var staff_colunm = document.getElementById("incidents").rows[i].cells.item(8).innerHTML;
if (category_column === incident_category)
{
alert("yay")
count++
}
else if (category_column !== incident_category)
{
alert("boo")
document.getElementById("incidents").deleteRow(i);
//CALL FIRST SCRIPT HERE??
}
}
}
I removed a few bits of code that did not seem to do anything, but I'm sure you can put them back. I think you might want something like this:
function updateTable(){
var elResult = document.getElementById("result");
var elNumIncidentType = document.getElementById("no_of_incident_type");
var firealarms: document.querySelectorAll("#incidents tr:contains('Fire Alarm')").length;
var lockouts: document.querySelectorAll("#incidents tr:contains('Lockout Out of Office Hours')").length;
var lockoutsDayTime: document.querySelectorAll("#incidents tr:contains('Lockout Day Time')").length;
var sensitiveIncident: document.querySelectorAll("#incidents tr:contains('Sensitive Incident')").length;
elResult.innerHTML = "";
elResult.innerHTML += "<div>" + firealarms + " Fire Alarm</div>";
elResult.innerHTML += "<div>" + lockouts + " Lockout Out of Office Hours</div>";
elResult.innerHTML += "<div>" + lockoutsDayTime + " Lockout Day Time</div>";
elResult.innerHTML += "<div>" + sensitiveIncident + " Sensitive Incident</div>";
elNumIncidentType.rows[1].cells[1].innerHTML = firealarms;
elNumIncidentType.rows[2].cells[1].innerHTML = lockouts;
elNumIncidentType.rows[3].cells[1].innerHTML = lockoutsDayTime;
elNumIncidentType.rows[4].cells[1].innerHTML = sensitiveIncident;
}
function filterForGraph() {
var elIncidents = document.getElementById("incidents");
var incident_category = document.getElementById("Incident_Category").value;
var table_length = document.getElementById("incidents").rows.length;
for (var i = table_length - 1; i >= 1; i--) {
var currentIncident = elIncidents.rows[i].cells;
var category_column = currentIncident.item(0).innerHTML;
if (category_column != incident_category) { elIncidents.deleteRow(i); }
}
updateTable();
}
$(function(){ updateTable(); });
Hi JonSG tried your code and it didnt work not sure why, but it gave me some ideas to work with and I think Ive cracked it
function Populate_Incident_No_Table() {
//previously function called updateTable
$(function () {
var NumFireAlarms = $("#incidents tr:contains('Fire Alarm')").length;
document.getElementById("no_of_incident_type").rows[1].cells[1].innerHTML = NumFireAlarms
var NumLockout = $("#incidents tr:contains('Lockout Out of Office Hours')").length;
document.getElementById("no_of_incident_type").rows[2].cells[1].innerHTML = NumLockout
var NumLockoutDayTime = $("#incidents tr:contains('Lockout Day Time')").length;
document.getElementById("no_of_incident_type").rows[3].cells[1].innerHTML = NumLockoutDayTime
var NumSensitiveIncident = $("#incidents tr:contains('Sensitive Incident')").length;
document.getElementById("no_of_incident_type").rows[4].cells[1].innerHTML = NumSensitiveIncident
});
}
function filterForGraph() {
var incident_category = document.getElementById("Incident_Category").value;
var i;
var TL = document.getElementById("incidents").rows.length;
for (i = TL - 1; i >= 1; i--)
{
var category_column = document.getElementById("incidents").rows[i].cells.item(0).innerHTML;
if (category_column !== incident_category)
{
document.getElementById("incidents").deleteRow(i);
}
}
Populate_Incident_No_Table();
drawGraph();
}
I think the issue was how I was trying to call the functions. So what I've done to achieve what I wanted (please excuse any bad terminology / phrasing).
First I tried to name the function $(function updateTable(){ this did not work when I then tried to call the function like this updateTable();
Second thing I tried was putting the updateTable() function "inside" a function and call that function. This has worked for me I dont know why.
Thanks for your help without it I would not have thought to try what I did

Iterate over gmail threads and add a label with addlabel

I wish to run this standalone code twice a day, but cannot solve the exception on the addLabel, which is "impossible to find the method", any suggestion? I tried to change the for cycle as well as to assign a var to the threads[i] but nothing changed.
function salvaNote(){
var d = new Date();
d.setMonth(d.getMonth()-6);
var n = d.getFullYear() + "/" + addZero(d.getMonth()+1) + "/" + addZero(d.getDate());
var folderName = 'tavoloTecnico';
labelName = GmailApp.createLabel('tavoloTecnico');
var query = 'in:anywhere from:mariano.casillo#mit.gov.it OR from:donato.castigliego#mit.gov.it has:attachment subject:previsioni filename:xls '+ 'after:'+n;
var threads = GmailApp.search(query);
var quanteMail = threads.length;
for ( var i = 0 ; i < quanteMail; i++) {
threads[i].addLabel(labelName);
var mesgs = threads[i].getMessages();
for(var j in mesgs){
var attachments = mesgs[j].getAttachments();
for(var k in attachments){
var attachment = attachments[k];
var attachmentBlob = attachment.copyBlob();
var file = DriveApp.createFile(attachmentBlob);
DriveApp.getFoldersByName(folderName).next().addFile(file);
}
}
}
}

JQuery Swap input values in rows

I am working on a table that I need to be able to move rows up and down.
The problem is that I cannot re-insert the row before the previous or next row, because my application relies on the names of the input fields to stay in the same order.
My solution is to swap the values of the input fields, which works, but my code is very ugly and repetitive.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
var rowdata1 = row.find('.rowdata1').val();
var rowdata2 = row.find('.rowdata2').val();
var rowdata3 = row.find('.rowdata3').val();
var rowdata4 = row.find('.rowdata4').val();
var rowdata5 = row.find('.rowdata5').val();
if ($(this).is(".up")) {
var tmp1 = row.prev().find('.rowdata1').val();
var tmp2 = row.prev().find('.rowdata2').val();
var tmp3 = row.prev().find('.rowdata3').val();
var tmp4 = row.prev().find('.rowdata4').val();
var tmp5 = row.prev().find('.rowdata5').val();
row.prev().find('.rowdata1').val(rowdata1);
row.prev().find('.rowdata2').val(rowdata2);
row.prev().find('.rowdata3').val(rowdata3);
row.prev().find('.rowdata4').val(rowdata4);
row.prev().find('.rowdata5').val(rowdata5);
row.find('.rowdata1').val(tmp1);
row.find('.rowdata2').val(tmp2);
row.find('.rowdata3').val(tmp3);
row.find('.rowdata4').val(tmp4);
row.find('.rowdata5').val(tmp5);
//row.insertBefore(row.prev());
} else {
var tmp1 = row.next().find('.rowdata1').val();
var tmp2 = row.next().find('.rowdata2').val();
var tmp3 = row.next().find('.rowdata3').val();
var tmp4 = row.next().find('.rowdata4').val();
var tmp5 = row.next().find('.rowdata5').val();
row.next().find('.rowdata1').val(rowdata1);
row.next().find('.rowdata2').val(rowdata2);
row.next().find('.rowdata3').val(rowdata3);
row.next().find('.rowdata4').val(rowdata4);
row.next().find('.rowdata5').val(rowdata5);
row.find('.rowdata1').val(tmp1);
row.find('.rowdata2').val(tmp2);
row.find('.rowdata3').val(tmp3);
row.find('.rowdata4').val(tmp4);
row.find('.rowdata5').val(tmp5);
//row.insertAfter(row.next());
}
});
});
I created a fiddle: http://jsfiddle.net/29T7V/
I would really appreciate any suggestions on how to simplify my code.
Any ideas on how to update my code to handle x amount of inputs in the rows would be absolutly awesome! TIA!
Something like this maybe
$(document).ready(function () {
$(".up, .down").on('click', function () {
var row = $(this).closest('tr').first(),
way = $(this).hasClass('up') ? 'prev' : 'next';
for (var i=1; i<6; i++) {
var sel = '.rowdata'+i,
tmp1 = row.find(sel).val(),
tmp2 = row[way]().find(sel).val();
row.find(sel).val(tmp2);
row[way]().find(sel).val(tmp1);
}
});
});
FIDDLE
Something wich would work with any number of columns:
$(document).ready(function () {
$(".up, .down").click(function () {
var $row = $(this).closest("tr"),
$swap = $row[$(this).is('.up') ? 'prev' : 'next']();
if (!$swap) return;
$row.find('td').each(function() {
var $input = $(this).find('input, select'),
$swapInput, $swapVal;
if ($input.length) {
$swapInput = $swap.children('td:eq(' + this.cellIndex + ')').find('input, select');
$swapVal = $swapInput.val();
$swapInput.val($input.val());
$input.val($swapVal);
}
});
});
});
Demo: http://jsfiddle.net/29T7V/

Javascript function performance

I am studying javascript and json but every line of code I write is another problem. I've done a script that works with json but I'm a beginner and the performances of what I wrote aren't that good. The code works only if I do a debug step by step with firebug or other tools and that makes me think that the execution of the code (or a part of it ... the one that creates the table as you'll see) requires too much time so the browser stops it.
My code is:
var arrayCarte = [];
var arrayEntita = [];
var arraycardbyuser = [];
function displayArrayCards() {
var richiestaEntity = new XMLHttpRequest();
richiestaEntity.onreadystatechange = function() {
if(richiestaEntity.readyState == 4) {
var objectentityjson = {};
objectentityjson = JSON.parse(richiestaEntity.responseText);
arrayEntita = objectentityjson.cards;
}
}
richiestaEntity.open("GET", "danielericerca.json", true);
richiestaEntity.send(null);
for(i = 0; i < arrayEntita.length; i++) {
var vanityurla = arrayEntita[i].vanity_urls[0] + ".json";
var urlrichiesta = "http://m.airpim.com/public/vurl/";
var richiestaCards = new XMLHttpRequest();
richiestaCards.onreadystatechange = function() {
if(richiestaCards.readyState == 4) {
var objectcardjson = {};
objectcardjson = JSON.parse(richiestaCards.responseText);
for(j = 0; j < objectcardjson.cards.length; j++)
arrayCarte[j] = objectcardjson.cards[j].__guid__; //vettore che contiene i guid delle card
arraycardbyuser[i] = arrayCarte;
arrayCarte = [];
}
}
richiestaCards.open("GET", vanityurla, true);
richiestaCards.send(null);
}
var wrapper = document.getElementById('contenitoro');
wrapper.innerHTML = "";
var userTable = document.createElement('table');
for(u = 0; u < arrayEntita.length; u++) {
var userTr = document.createElement('tr');
var userTdcard = document.createElement('td');
var userTdinfo = document.createElement('td');
var br = document.createElement('br');
for(c = 0; c < arraycardbyuser[u].length; c++) {
var cardImg = document.createElement('img');
cardImg.src = "http://www.airpim.com/png/public/card/" + arraycardbyuser[u][c] + "?width=292";
cardImg.id = "immaginecard";
userTdcard.appendChild(br);
userTdcard.appendChild(cardImg);
}
var userdivNome = document.createElement('div');
userdivNome.id = "diverso";
userTdinfo.appendChild(userdivNome);
var userdivVanity = document.createElement('div');
userdivVanity.id = "diverso";
userTdinfo.appendChild(userdivVanity);
var nome = "Nome: ";
var vanityurl = "Vanity Url: ";
userdivNome.innerHTML = nome + arrayEntita[u].__title__;
userdivVanity.innerHTML = vanityurl + arrayEntita[u].vanity_urls[0];
userTr.appendChild(userTdcard);
userTr.appendChild(userTdinfo);
userTable.appendChild(userTr);
}
wrapper.appendChild(userTable);
}
How can I solve this problem?
You've created a race condition (of sorts) - you're not waiting until the AJAX has been parsed and for your data to have been written into the right variables before proceeding with the rest of your page logic.
When you run it in the debugger you end up giving your code enough time to complete the AJAX request before trying to use the variables that you populate in your onstatechange handler.
This code would be much easier with jQuery and deferred objects:
var arrayCarte, arrayEntita, arraycardbyuser;
// do first seeding request
var req1 = $.ajax(...);
var req2 = [];
req1.done(function(objectentityjson) {
arrayEntita = objectentityjson.cards;
// initiate the inner AJAX requests
for (var i = 0; i < arrayEntita.length; ++i) {
var tmp = $.ajax(...);
tmp.done(function(objectcardjson) {
// process the sub data here
...
});
req2.push(tmp); // keep the object around for later sync-up
}
});
// this'll only fire when all of the inner AJAX requests have completed
$.when.apply($, req2).done(function() {
// do the rest of your page setup here
...
});

Categories

Resources