Populating a container with one entry per Firebase entry - javascript

I'm using Firebase to store users info and I'm wanting to populate divs with each users info so it can be either accepted or deleted (but not deleted from Firebase).
So I wanted it to be structured something like this:
----------------------
Name
Email
Date
----------------------
Name
Email
Date
----------------------
and so on....
What I'm currently getting back is something like this:
What is the proper way to generate a div dependent upon how much data is in Firebase and format the content as specificed?
HTML:
<div>Some entry here
<h4 id="name"></h4>
<h4 id="date"></h4>
<h6 id="email"></h6>
<button id="0" class="remove">Remove</button>
</div>
<div>Another entry here
<button id="1" class="remove">Remove</button>
</div>
Javascript:
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var datas = child.val();
var email = child.val().Email;
var name = child.val().Name;
var date = child.val().Scheduled_Date;
date = date.replace('.', '/');
$('#name').append(name);
$('#email').append(email);
$('#date').append(date);
});
});

For each child, you are appending the values to the same HTML elements (i.e. all the names are appended to the h4 element with id "name", all the emails to the one with id "email" and so on).
So it is normal they are displayed on a line (one row).
You have to create a new placeholder for each child (and it's set of values). You can do that with e.g. a table, like:
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var datas = child.val();
var email = child.val().Email;
var name = child.val().Name;
var date = child.val().Scheduled_Date;
date = date.replace('.', '/');
// Insert a row in the table at the last row
var newRow = tableRef.insertRow(tableRef.rows.length);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell with name value
var newText = document.createTextNode(name); // <-- name value from the child
newCell.appendChild(newText);
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(email); // <-- email value from the child
newCell.appendChild(newText);
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(date); // <-- date value from the child
newCell.appendChild(newText);
});
});
Inspired by How to insert row in HTML table body in Javascript?. See the fiddle in this SO post.
Or you can do it with divs, here is a possible code:.
HTML
<div id="parentDiv"></div>
JavaScript
var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var datas = child.val();
var email = child.val().Email;
var name = child.val().Name;
var date = child.val().Scheduled_Date;
date = date.replace('.', '/');
element = document.createElement("div");
element.appendChild(document.createTextNode(name));
document.getElementById('parentDiv').appendChild(element);
element = document.createElement("div");
element.appendChild(document.createTextNode(email));
document.getElementById('parentDiv').appendChild(element);
element = document.createElement("div");
element.appendChild(document.createTextNode(date));
document.getElementById('parentDiv').appendChild(element);
//You could add a specific css class to this div to generate the bottom border
});
});
To be complete, note that you could also use some MVVM javascript frameworks like vue.js, knockout.js as well as angular, react... in order to easily reflect in your HTML DOM the results of queries to your backend (and vice-versa).

Related

Can not set the width of cells in table that I created using javascript

I created a table in javascript that uses for loop adding 7 empty rows to the HTML table. But, it seems like these rows (or columns) have default sizes. Tried every possible way to resize them, but no luck. I have div element and inside has two tables for reference. Using also "display: inline- block". Here is my javascript code:
document.addEventListener("DOMContentLoaded", function(){
// Get the current page's URL
const currentUrl = window.location.href;
// Check if the current page's URL is the URL of the exam page
if (currentUrl.includes("exam.html")) {
// Get the table element from the HTML document
const lowBoundAndGradeTable = document.querySelector(".low_boundAndGrade");
// create an empty array to store the exam data
let gradeData = [];
// Check if there is data stored in localStorage
if (localStorage.getItem("gradeData")) {
// Retrieve the data from localStorage and parse it as JSON
gradeData = JSON.parse(localStorage.getItem("gradeData"));
}
// Loop through the examData to insert the rows
gradeData.forEach((data, index) => {
// create a new table row
const row = lowBoundAndGradeTable.insertRow();
// insert the cells into the row
const lowBoundCell = row.insertCell();
lowBoundCell.innerHTML = `<input type="text" name="low bound." value="${data.lowBound}">`;
const gradeCell = row.insertCell();
gradeCell.innerHTML = `<input type="text" name="grade" value="${data.grade}">`;
// add a change event listener to each input field
lowBoundCell.querySelector("input").addEventListener("change", function(){
gradeData[index].lowBound = this.value;
localStorage.setItem("gradeData", JSON.stringify(gradeData));
})
gradeCell.querySelector("input").addEventListener("change", function(){
gradeData[index].grade = this.value;
localStorage.setItem("gradeData", JSON.stringify(gradeData));
});
});
// Loop to insert 7 rows if studentData array is empty
if(gradeData.length == 0){
for (let i = 0; i < 7; i++) {
// create a new table row
const row = lowBoundAndGradeTable.insertRow();
// insert the cells into the row
const lowBoundCell = row.insertCell();
lowBoundCell.innerHTML = `<input type="text" name="low bound${i}">`;
const gradeCell = row.insertCell();
gradeCell.innerHTML = `<input type="text" name="grade${i}">`;
// add the data to the examData array
gradeData.push({ lowBound: "", grade: "" });
}
// set the examData in localStorage
localStorage.setItem("gradeData", JSON.stringify(gradeData));
}
}
});
I want to resize the rows so that I can enter numbers in it. But, these cells are kinda big that does not look like user friendly.

Preview Email Template based on drop down, Send email once your satisfuied

in my Google Sheets app script, I currently have three template.html files and a few scripts; I'd like to create a preview email and send it to the user once he or she is satisfied; however, the event listeners that (openAI) built for me do not work; when I change the Drop Down Menu or click send Button, nothing happens and the preview does not load. When I ask the AI for help, it keeps modifying my code; My code no longer looks like the original; after a week of trying, I've realized that I need assistance with this. Here's my most recent code as of today. The AI also insisted on using Google Drive, which I declined because I have the HTML files in the app scrip sheet itself and used to obtain it with this.
This code is not used anymore, But use to work when I used it in GmailApp to get the template File Name.
var html = HtmlService.createTemplateFromFile('Proposal Template.html');
var html = HtmlService.createTemplateFromFile('Marketing Template.html');
var html = HtmlService.createTemplateFromFile('Trusted Partner Template.html');
Keep in mind that while I am not an expert in Jave or JS, I am familiar with them.
My code
function showEmailPreview() {
// Get values from the active sheet and active row
var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getActiveRange().getRowIndex();
var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue();
var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();
var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();
var title = sheet.getRange(row, getColIndexByName("Title")).getValue();
var company_location = sheet.getRange(row, getColIndexByName("Company Location")).getValue();
var company_phone1 = sheet.getRange(row, getColIndexByName("Company Phone 1")).getValue();
var subjectLine = "Company Proposal - " + userCompanyName;
// Create the select element
const select = `
<select id="template-select">
<option value="Proposal Template.html">Proposal Template</option>
<option value="Marketing Template.html">Marketing Template</option>
<option value="Trusted Partner Template.html">Trusted Partner Template</option>
</select>
`;
// Create the button element
const button = `<button id="send-button">Send Email</button>
<div id="preview"></div>`; //This could be a issue? The ai did not know where to place this or cut down before giving me a proper answer.
// Create an HTML output page that displays the email template, the select element, and a button to send the email
var output = HtmlService.createHtmlOutput(`
<script>
var buttonElement;
function getElementById(id) {
return document.getElementById(id);
}
function init() {
// Add a change event listener to the select element
document.getElementById('template-select').addEventListener('change', function() {
// Get the selected template file name
var templateFile = this.value;
// Read the contents of the selected file
var template = readFile(templateFile);
// Set values in the template
var html = HtmlService.createTemplate(template);
html.userFullName = userFullName;
html.userCompanyName = userCompanyName;
html.title = title;
html.company_location = company_location;
html.company_phone1 = company_phone1;
// Get the filled-in email template as a string
var emailTemplate = html.evaluate().getContent();
// Update the preview window with the selected template
document.getElementById('preview').innerHTML = emailTemplate;
});
// Add a click event listener to the button element
buttonElement = getElementById('send-button');
buttonElement.addEventListener('click', function() {
// Get the selected template file name
var templateFile = document.getElementById('template-select').value;
// Pass the selected template file name as an argument to the sendEmail function
sendEmail(templateFile);
});
}
window.onload = init;
function sendEmail(templateFile) {
// Read the contents of the selected file
var template = readFile(templateFile);
// Set values in the template
var html = HtmlService.createTemplate(template);
html.userFullName = userFullName;
html.userCompanyName = userCompanyName;
html.title = title;
html.company_location = company_location;
html.company_phone1 = company_phone1;
// Get the filled-in email template as a string
var emailTemplate = html.evaluate().getContent();
// Send the email
GmailApp.sendEmail(userEmail, subjectLine, '', {htmlBody: emailTemplate});
}
</script>
<script>
init();
</script>
${select}
${button}
`)
.setWidth(950)
.setHeight(750)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
// Display the output page in a modal dialog box
SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
//output.evaluate();
//window.onload = init;
};
function readFile(templateFile) {
// Get the contents of the selected file
var file = DriveApp.getFilesByName(templateFile);
var contents = file.next().getBlob().getDataAsString();
return contents;
}//window.onload = init;
Results.
Here is a link for testing.
https://docs.google.com/spreadsheets/d/1gXDbtjCYfZw8kOaOMorbJ54dXyl7bh6MFM1LopTrNww/edit?usp=sharing
Its always like this when you struggle for a week and give up, And you finally post something and then you find yourself a solution. So here is the correct way of doing it.
Let's first talk about the menu. I created a file template-select-menu.gs
<form>
<label for="template">Select a template:</label><br>
<select id="template" name="template">
<option value="Proposal Template.html">Proposal Template</option>
<option value="Markting Template">Marketing Template</option>
</select>
<br><br>
<input type="button" value="Preview" onclick="google.script.run.onTemplateSelected(document.forms[0].template.value)">
</form>
then I have my preview_email.gs
function showEmailPreview() {
// Get values from the active sheet and active row
var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getActiveRange().getRowIndex();
var rate = sheet.getLastRow();
var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue();
var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();
var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();
var subjectLine = "Company Proposal - " + userCompanyName ;
var aliases = GmailApp.getAliases()
// Create the email template selection menu
var proposalTemplate = HtmlService.createTemplateFromFile('Proposal Template.html');
var marktingTemplate = HtmlService.createTemplateFromFile('Markting Template.html');
var selectMenu = HtmlService.createTemplateFromFile('template-select-menu.html');
var selectMenuHtml = selectMenu.evaluate().getContent();
// Create an HTML output page that displays the email template selection menu and a button to send the email
var output = HtmlService.createHtmlOutput(selectMenuHtml)
.setWidth(600)
.setHeight(450);
// Display the output page in a modal dialog box
SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
}
/**
* This function is called when the user selects a template from the drop-down menu.
* It creates an email preview using the selected template and displays it in the modal dialog box.
*/
//var html = HtmlService.createTemplateFromFile(templateFileName);
function onTemplateSelected(templateFileName) {
// Get values from the active sheet and active row
var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getActiveRange().getRowIndex();
var rate = sheet.getLastRow();
var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue();
var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();
var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();
var subjectLine = "Company Proposal - " + userCompanyName ;
var aliases = GmailApp.getAliases();
// Create the email template and set values in the template
if (templateFileName == 'Proposal Template.html') {
var proposalTemplate = HtmlService.createTemplateFromFile('Proposal Template.html');
proposalTemplate.userFullName = userFullName;
proposalTemplate.userCompanyName = userCompanyName;
var template = proposalTemplate.evaluate().getContent();
} else if (templateFileName == 'Markting Template') {
var marktingTemplate = HtmlService.createTemplateFromFile('Markting Template.html');
marktingTemplate.userFullName = userFullName;
marktingTemplate.userCompanyName = userCompanyName;
var template = marktingTemplate.evaluate().getContent();
} else {
var template = selectMenuHtml;
}
// Create an HTML output page that displays the email template and a button to send the email
var selectMenu = HtmlService.createTemplateFromFile("template-select-menu.html");
var selectMenuHtml = selectMenu.evaluate().getContent();
var output = HtmlService.createHtmlOutput(template)
.setWidth(600)
.setHeight(450)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setContent(selectMenuHtml + '<br><br>' + template);
// Update the modal dialog box with the new email template
SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
}
Now create the the 2 files "Proposal Template.html" and "Markting Template.html". When you switch and click preview the content will change.
Please note that I still need to update the email buttons. but this is a great start for me.

Add inputs from modal to a new table row using javascript

I have a modal with 2 input fields, and a table with two columns. I'm trying write a function that adds a new row to the table when a button is clicked. However when I test my code nothing happens.
The input fields have the id's "modal_type" and "modal_price", the table has the id "acc_table1"
JS:
{
var new_acc=document.getElementById("modal_type").value;
var new_bal=document.getElementById("modal_price").value;
var table=document.getElementsById("acc_table1");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='acc_row"+table_len+"'><td id='acc_name"+table_len+"'>"+new_acc+"</td><td id='acc_balance"+table_len+"'>"+new_bal+"</td></tr>";
document.getElementById("modal_type").value="";
document.getElementById("modal_price").value="";
}
I'd appreciate any suggestions on what I could change!
Try this:
const newRow = table.insertRow(-1); // appends a new row
newRow.itemId = 'acc_row'; // set item id to the new row
const accCell = newRow.insertCell(0); // add a cell to the new row at index 0
accCell.itemId = 'acc_name'; // set item id to the cell
const accText = document.createTextNode(new_acc); // create a text node for new_acc
accCell.appendChild(accText); // set text node to acc cell
const balCell = newRow.insertCell(1); // add a cell to the new row at index 1
balCell.itemId = 'acc_balance'; // set item id to the cell
const balText = document.createTextNode(new_bal); // create a text node for new_bal
balCell.appendChild(balText); // set text node to bal cell

Dynamically update existing table record with jQuery

I'm building an application in which there is a sign-up form. When I click submit, a new table row is dynamically created and the table is saved in local storage. Edit and Delete buttons are appended with the table row. When I click on Edit, data in td having classes name, mail, mob, add should populate name, email, mobile no. and address fields in the sign up form respectively. Furthermore when I submit, the changes should be updated in the same table row whose edit button I had clicked.
But instead of that, a new record is created. I'm attempting to pass the row id to the add function in my code and this is what I have done so far.
function save(){
var taskList = [];
$("#saveTable tbody").find("tr").each(function(){
var task = {};
var currentRow = $(this).closest("tr");
task.name = currentRow.find('.name').text();
task.mail = currentRow.find(".mail").text();
task.mob = currentRow.find(".mob").text();
task.add = currentRow.find(".add").text();
task.Country = currentRow.find(".country").text();
task.State = currentRow.find(".state").text();
taskList.push(task);
});
saveObject("tasks",taskList);
}
function saveObject(recordKey,jsObject){
var objectAsString = JSON.stringify(jsObject);
localStorage.setItem(recordKey,objectAsString);
}
function load(){
var taskList = loadObject("tasks");
for(var index=0; taskList && index<taskList.length; ++index){
this.add(taskList[index]);
}
}
function loadObject(recordKey){
var objectAsString = localStorage.getItem(recordKey);
return JSON.parse(objectAsString);
}
function add(taskObject,index){
if(index){
console.log(index);
var update = $('#saveTable tbody').find('tr').eq(index);
}
var newTR = $("<tr class='child'></tr>");
var newName = $("<td class='name'></td>");
var newMail = $("<td class='mail'></td>");
var newMob = $("<td class='mob'></td>");
var newAdd = $("<td class='add'></td>");
var newCountry = $("<td class='country'></td>");
var newState = $("<td class='state'></td>");
var edit = $("<input class='button_ed' type='submit' value='Edit'/>");
var del = $("<input class='button_del' type='submit' value='Delete'/>");
$(newTR).append($(newName).text(taskObject.name));
$(newTR).append($(newMail).text(taskObject.mail));
$(newTR).append($(newMob).text(taskObject.mob));
$(newTR).append($(newAdd).text(taskObject.add));
$(newTR).append($(newCountry).text(taskObject.Country));
$(newTR).append($(newState).text(taskObject.State));
$(newTR).append($(edit)).append($(del));
$("#saveTable tbody").append($(newTR));
$(edit).on("click",function myEdit(){
event.preventDefault();
if (this.value=="Edit") {
this.value="Save";
var ed = this.closest("tr");
$('#contact_name').val($(ed).children("td.name").text());
$('#contact_email').val($(ed).children("td.mail").text());
$('#contact_mob').val($(ed).children("td.mob").text());
$('#contact_address').val($(ed).children("td.add").text());
$('#contact_name').addClass("valid");
$('#contact_email').addClass("valid");
$('#contact_mob').addClass("valid");
$('#contact_address').addClass("valid");
//collect table row id in variable and pass it to add function
index = ed.rowIndex;
//console.log(index);
save();
}
});
$(del).on("click",function myDel(){
$(this).closest("tr").remove();
save();
});
}

javascript button works in ie, not firefox or chrome

I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.

Categories

Resources