Here I have the code for Firebase storage.
While doing this I am getting repetition in the table data. Here is my javascript code. I have done something logic mistake in the for loop.
function gotMuch(dude, guy)
{
var ex9 = dude.val();
var sa9 = Object.keys(ex9);
var s9 = sa9.length;
console.log("Hello there" + s9 + "");
var did = ex9.did;
var dmark = ex9.dmark;
var dname = ex9.dname;
console.log(did);
console.log(dmark);
console.log(dname);
var y = document.querySelectorAll(".subtable" + guy + "").length;
console.log("Class length is" + y + "");
var ytabl = document.querySelectorAll(".subtable" + guy + "");
var yd1 = document.createElement("td");
var yd2 = document.createElement("td");
var yd3 = document.createElement("td");
var space = document.createElement("br");
for(var b = 0; b < y; b++)
{
var row = ytabl[b].insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = did;
cell2.innerHTML = dname;
cell3.innerHTML = dmark;
}
}
Related
I am creating a billing web application in laravel
I created a form and a button (on click button call addtoinvoice() ) function, then it will add rows in table and created input fields .
so i want to get sum of all product_values[] columns
<script type="text/javascript">
function addtoinvoice()
{
var products = document.getElementById("product");
var productsvalue = products.options[products.selectedIndex].value;
var client = document.getElementById("client");
var clientvalue = client.options[client.selectedIndex].value;
//----verify product or client input is not nulll------------
if(productsvalue == "")
{
alert("Please select an product");
}else if(clientvalue==""){
alert("Please select an client");
}else
{
var index,table = document.getElementById("products");
//-----------Insert Rows 1 ---------------
var row = table.insertRow(1);
//----------------insert Columns-----------------
var product_name = row.insertCell(0);
var product_input_tag = document.createElement("input");
product_input_tag.type = "text";
product_input_tag.name="product_name[]";
product_input_tag.readOnly=true;
var product_name_value = document.getElementById("product");
product_input_tag.value = product_name_value.options[product_name_value.selectedIndex].text;
product_name.appendChild(product_input_tag);
var product_description = row.insertCell(1);
var product_description_input_tag = document.createElement("input");
product_description_input_tag.type = "text";
product_description_input_tag.name="product_desciption[]";
product_description_input_tag.readOnly=true;
var product_description_value = document.getElementById("pro_description");
product_description_input_tag.value = product_description_value.value;
product_description.appendChild(product_description_input_tag);
var product_uom = row.insertCell(2);
var product_uom_input_tag = document.createElement("input");
product_uom_input_tag.type = "text";
product_uom_input_tag.name="product_uom[]";
product_uom_input_tag.readOnly=true;
var product_uom_value = document.getElementById("uom");
product_uom_input_tag.value = product_uom_value.value;
product_uom.appendChild(product_uom_input_tag);
var product_qty = row.insertCell(3);
var product_qty_input_tag = document.createElement("input");
product_qty_input_tag.type = "number";
product_qty_input_tag.name="product_qty[]";
product_qty_input_tag.readOnly=true;
var product_qty_value = document.getElementById("qty");
product_qty_input_tag.value = product_qty_value.value;
product_qty.appendChild(product_qty_input_tag);
var product_unitprice = row.insertCell(4);
var product_unitprice_input_tag = document.createElement("input");
product_unitprice_input_tag.type = "number";
product_unitprice_input_tag.name="product_uniprice[]";
product_unitprice_input_tag.readOnly=true;
var product_unitprice_value = document.getElementById("unit_price");
product_unitprice_input_tag.value = product_unitprice_value.value;
product_unitprice.appendChild(product_unitprice_input_tag);
var product_discount = row.insertCell(5);
var product_discount_input_tag = document.createElement("input");
product_discount_input_tag.type = "number";
product_discount_input_tag.name="product_discount[]";
product_discount_input_tag.readOnly=true;
var product_discount_value = document.getElementById("discount");
product_discount_input_tag.value = product_discount_value.value;
var discount = product_discount_value.value;
product_discount.appendChild(product_discount_input_tag);
var product_value = row.insertCell(6);
var product_value_input_tag = document.createElement("input");
product_value_input_tag.type = "number";
product_value_input_tag.name="product_value[]";
product_value_input_tag.readOnly=true;
var original = (product_unitprice_value.value)*(product_qty_value.value);
var newdiscount = (original/100)*discount;
var total_discount = original-newdiscount;
var result = Math.round(total_discount*100)/100;
product_value_input_tag.value = result;
product_value.appendChild(product_value_input_tag);
var product_cgst = row.insertCell(7);
var product_cgst_input_tag = document.createElement("input");
product_cgst_input_tag.type = "number";
product_cgst_input_tag.name="product_cgst[]";
product_cgst_input_tag.readOnly=true;
product_cgst_input_tag.value = 0;
product_cgst.appendChild(product_cgst_input_tag);
var product_sgst = row.insertCell(8);
var product_sgst_input_tag = document.createElement("input");
product_sgst_input_tag.type = "number";
product_sgst_input_tag.name="product_cgst[]";
product_sgst_input_tag.readOnly=true;
product_sgst_input_tag.value = 0;
product_sgst.appendChild(product_sgst_input_tag);
var product_igst = row.insertCell(9);
var product_igst_tag = document.createElement("input");
product_igst_tag.type = "text";
product_igst_tag.name="product_igst[]";
product_igst_tag.readOnly=true;
var product_igst_value = document.getElementById("tax");
var igst = product_igst_value.options[product_igst_value.selectedIndex].value;
var tax = (total_discount/100)*igst;
product_igst_tag.value = Math.round(tax*100)/100;
product_igst.appendChild(product_igst_tag);
var remove_row = row.insertCell(10);
var product_remove = document.createElement("span");
product_remove.className="btn btn-danger";
var button_name = document.createTextNode("Remove");
product_remove.appendChild(button_name);
remove_row.appendChild(product_remove);
//------------Cells Insert End----------------
//--------Remove Rows start----------
for(var i = 1; i<table.rows.length; i++)
{
table.rows[i].cells[10].onclick = function()
{
var c = confirm("do you want to remove this product ?");
if(c == true)
{
index = this.parentElement.rowIndex;
table.deleteRow(index);
}
}
}
//-------Remove Rows End-------------
//----------Calculate All sums subtotal,discount,tax etc..------------
}
}
</script>
I have tried with this approach but getting Uncaught FirebaseError: Function Query.startAfter() requires a valid first argument, but it was undefined. The lastVisible is getting the value on console. Here is the code:
function loadMoreButtonAction() {
fetchRequest(true);
}
function fetchRequest(isFromLoadMore) {
var table = document.getElementById("outputTableID");
var lastVisible;
var tableIndex;
if (isFromLoadMore == false) {
if (table.rows.length > 2) {
resetTable(table);
}
var first = firestore.collection(parentNode).orderBy("serialNo").limit(5);
first.get().then((querySnapshot) => {
// Get the last visible document
lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
console.log("lastVisible", lastVisible);
tableIndex = querySnapshot.size;
document.getElementById("wallpaperCount").innerHTML = 'Total Items: ' + tableIndex + '';
querySnapshot.forEach((doc) => {
var productItem = Object.create(wallpapers);
productItem.nodeId = doc.id;
productItem.serialNo = doc.data().serialNo;
productItem.title = doc.data().title;
productItem.downloadNumber = doc.data().downloadNumber;
productItem.isPremimumItem = doc.data().isPremimumItem;
productItem.wallpaper1125_2436ImgName = doc.data().wallpaper1125_2436ImgName;
productItem.wallpaper1242_2208ImgName = doc.data().wallpaper1242_2208ImgName;
productItem.wallpaper1242_2688ImgName = doc.data().wallpaper1242_2688ImgName;
productItem.wallpaper828_1792ImgName = doc.data().wallpaper828_1792ImgName;
productItem.wallpaper750_1334ImgName = doc.data().wallpaper750_1334ImgName;
productItem.wallpaper640_1136ImgName = doc.data().wallpaper640_1136ImgName;
productItem.wallpaper1125_2436Url = doc.data().wallpaper1125_2436Url;
productItem.wallpaper1242_2208Url = doc.data().wallpaper1242_2208Url;
productItem.wallpaper1242_2688Url = doc.data().wallpaper1242_2688Url;
productItem.wallpaper828_1792Url = doc.data().wallpaper828_1792Url;
productItem.wallpaper750_1334Url = doc.data().wallpaper750_1334Url;
productItem.wallpaper640_1136Url = doc.data().wallpaper640_1136Url;
productItem.wallpaper1125_2436ImgStorageRef = doc.data().wallpaper1125_2436ImgStorageRef;
productItem.wallpaper1242_2208ImgStorageRef = doc.data().wallpaper1242_2208ImgStorageRef;
productItem.wallpaper1242_2688ImgStorageRef = doc.data().wallpaper1242_2688ImgStorageRef;
productItem.wallpaper828_1792ImgStorageRef = doc.data().wallpaper828_1792ImgStorageRef;
productItem.wallpaper750_1334ImgStorageRef = doc.data().wallpaper750_1334ImgStorageRef;
productItem.wallpaper640_1136ImgStorageRef = doc.data().wallpaper640_1136ImgStorageRef;
productItem.wallpaper1125_2436FacebookPhotoID = doc.data().wallpaper1125_2436FacebookPhotoID;
productItem.wallpaper1242_2208FacebookPhotoID = doc.data().wallpaper1242_2208FacebookPhotoID;
productItem.wallpaper1242_2688FacebookPhotoID = doc.data().wallpaper1242_2688FacebookPhotoID;
productItem.wallpaper828_1792FacebookPhotoID = doc.data().wallpaper828_1792FacebookPhotoID;
productItem.wallpaper750_1334FacebookPhotoID = doc.data().wallpaper750_1334FacebookPhotoID;
productItem.wallpaper640_1136FacebookPhotoID = doc.data().wallpaper640_1136FacebookPhotoID;
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);
cell1.innerHTML = productItem.serialNo;
cell2.innerHTML = productItem.title;
cell3.innerHTML = productItem.downloadNumber;
cell4.innerHTML = productItem.isPremimumItem;
appendImageOnCell(cell5, "./utilities/images/tick.png"); //productItem.wallpaper1125_2436Url
appendImageOnCell(cell6, "./utilities/images/tick.png"); //productItem.wallpaper1242_2208Url
appendImageOnCell(cell7, "./utilities/images/tick.png"); //productItem.wallpaper1242_2688Url
appendImageOnCell(cell8, "./utilities/images/tick.png"); //productItem.wallpaper828_1792Url
appendImageOnCell(cell9, "./utilities/images/tick.png"); //productItem.wallpaper750_1334Url
appendImageOnCell(cell10, productItem.wallpaper640_1136Url);
appendButtonOnCell(cell11, productItem);
});
});
} else {
var second = firestore.collection(parentNode).orderBy("serialNo").startAfter(lastVisible).limit(5);
second.get().then((querySnapshot) => {
// Get the last visible document
lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
console.log("lastVisible", lastVisible);
tableIndex = tableIndex + querySnapshot.size;
document.getElementById("wallpaperCount").innerHTML = 'Total Items: ' + tableIndex + '';
querySnapshot.forEach((doc) => {
var productItem = Object.create(wallpapers);
productItem.nodeId = doc.id;
productItem.serialNo = doc.data().serialNo;
productItem.title = doc.data().title;
productItem.downloadNumber = doc.data().downloadNumber;
productItem.isPremimumItem = doc.data().isPremimumItem;
productItem.wallpaper1125_2436ImgName = doc.data().wallpaper1125_2436ImgName;
productItem.wallpaper1242_2208ImgName = doc.data().wallpaper1242_2208ImgName;
productItem.wallpaper1242_2688ImgName = doc.data().wallpaper1242_2688ImgName;
productItem.wallpaper828_1792ImgName = doc.data().wallpaper828_1792ImgName;
productItem.wallpaper750_1334ImgName = doc.data().wallpaper750_1334ImgName;
productItem.wallpaper640_1136ImgName = doc.data().wallpaper640_1136ImgName;
productItem.wallpaper1125_2436Url = doc.data().wallpaper1125_2436Url;
productItem.wallpaper1242_2208Url = doc.data().wallpaper1242_2208Url;
productItem.wallpaper1242_2688Url = doc.data().wallpaper1242_2688Url;
productItem.wallpaper828_1792Url = doc.data().wallpaper828_1792Url;
productItem.wallpaper750_1334Url = doc.data().wallpaper750_1334Url;
productItem.wallpaper640_1136Url = doc.data().wallpaper640_1136Url;
productItem.wallpaper1125_2436ImgStorageRef = doc.data().wallpaper1125_2436ImgStorageRef;
productItem.wallpaper1242_2208ImgStorageRef = doc.data().wallpaper1242_2208ImgStorageRef;
productItem.wallpaper1242_2688ImgStorageRef = doc.data().wallpaper1242_2688ImgStorageRef;
productItem.wallpaper828_1792ImgStorageRef = doc.data().wallpaper828_1792ImgStorageRef;
productItem.wallpaper750_1334ImgStorageRef = doc.data().wallpaper750_1334ImgStorageRef;
productItem.wallpaper640_1136ImgStorageRef = doc.data().wallpaper640_1136ImgStorageRef;
productItem.wallpaper1125_2436FacebookPhotoID = doc.data().wallpaper1125_2436FacebookPhotoID;
productItem.wallpaper1242_2208FacebookPhotoID = doc.data().wallpaper1242_2208FacebookPhotoID;
productItem.wallpaper1242_2688FacebookPhotoID = doc.data().wallpaper1242_2688FacebookPhotoID;
productItem.wallpaper828_1792FacebookPhotoID = doc.data().wallpaper828_1792FacebookPhotoID;
productItem.wallpaper750_1334FacebookPhotoID = doc.data().wallpaper750_1334FacebookPhotoID;
productItem.wallpaper640_1136FacebookPhotoID = doc.data().wallpaper640_1136FacebookPhotoID;
var row = table.insertRow(tableIndex);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);
cell1.innerHTML = productItem.serialNo;
cell2.innerHTML = productItem.title;
cell3.innerHTML = productItem.downloadNumber;
cell4.innerHTML = productItem.isPremimumItem;
appendImageOnCell(cell5, "./utilities/images/tick.png"); //productItem.wallpaper1125_2436Url
appendImageOnCell(cell6, "./utilities/images/tick.png"); //productItem.wallpaper1242_2208Url
appendImageOnCell(cell7, "./utilities/images/tick.png"); //productItem.wallpaper1242_2688Url
appendImageOnCell(cell8, "./utilities/images/tick.png"); //productItem.wallpaper828_1792Url
appendImageOnCell(cell9, "./utilities/images/tick.png"); //productItem.wallpaper750_1334Url
appendImageOnCell(cell10, productItem.wallpaper640_1136Url);
appendButtonOnCell(cell11, productItem);
});
});
}
}
What am I missing here?
Thanks!
My UI:
And this is the error I am getting:
It looks like lastVisible is undefined, which is not allowed. When looking at your code, that makes sense, since you define lastVisible inside the fetchRequest function. So each time you call fetchRequest, you end up with a new lastVisible variable with an initial value of undefined.
You'll want to declare lastVisible outside of the fetchRequest method, so that its value is kept between calls to fetchRequest.
It also seems that you're duplicating a lot of code in fetchRequest. If we simplify this code and pull out the lastVisible variable, we end up with something like:
var lastVisible; // declare outside of fetchRequest so that its value is retained between calls
function fetchRequest(isFromLoadMore) {
var query = firestore.collection(parentNode).orderBy("serialNo").limit(5);
if (isFromLoadMore == false) {
if (table.rows.length > 2) {
resetTable(table);
}
}
else if (lastVisible) {
query = query.startAfter(lastVisible);
}
query.get().then((querySnapshot) => {
// Get the last visible document
lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
console.log("lastVisible", lastVisible);
...
});
}
Firstly instead of doing productItem.title = doc.data().title; and calling doc.data() a thousand times for every single possible field, you could just do:
let productItemLiteral = { nodeId: doc.id, ...doc.data() };
let productItem = Object.create(wallpapers, productItemLiteral);
And with regards to the pagination, you can paginate your fetches with query cursors. The firestore documentation handles this area very well: https://firebase.google.com/docs/firestore/query-data/query-cursors
Basically, your fetch function could look like this:
const fetchRecords = cursor => {
const queryObj = cursor ?
firestore().collection(parentNode).orderBy("serialNo").startAfter(cursor).limit(1
0)
:
firestore().collection(parentNode).orderBy("serialNo").limit(10);
queryObj.get().then((querySnapshot => {
// Save the last document to a global variable so you can use it as reference to fetch the next page
lastDocCursor = querySnapshot.docs[querySnapshot.docs.length - 1];
// Include the rest of your handler
}
}
You should have a global variable: `lastDocCursor` initialized as `null`, so you could just call `fetchRecords(lastDocCursor);`. If a cursor already exists, it will fetch the next 10 documents that follow that document, if not, it will fetch the first 10
I created an html table that automatically adds a new row from an input form. When I test it out, the new row is added but after I refresh the page, it's gone. How can I save the new row in local storage so I can keep the new data.
<script>
var table = document.getElementById("orders");
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.setItem("data", $('#table').html());
</script>
I try this code and it works. note that I add most of code to addRow function and call it when needed. try these changes and tell me if they work.
<script>
var table = document.getElementById("orders");
if(localStorage.tableData==undefined){localStorage.tableData=table.innerHTML};
table.innerHTML = localStorage.tableData;
function addRow(){
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.tableData=table.innerHTML;
};
</script>
My code is this, but attr delete botton, not work
var newList = snapshot.val();
var tableList = document.getElementById('mytable');
var rowIndex = 1;
var row = tableList.insertRow(rowIndex);
var cellName = row.insertCell(0);
var cellBottonDelete = row.insertCell(1);
cellName.appendChild(document.createTextNode(newList.name));
cellBottonDelete.appendChild(document.createElement("input", { type: "button", value:"Delete"}));
rowIndex = rowIndex + 1;
input is created but attr not. Any idea?
It's the solution
var newList = snapshot.val();
var tableList = document.getElementById('mytable');
var rowIndex = 1;
var row = tableList.insertRow(rowIndex);
var cellName = row.insertCell(0);
var cellBottonDelete = row.insertCell(1);
var itd = document.createElement('input');
itd.setAttribute("type","button");
itd.setAttribute("value","Delete");
cellName.appendChild(document.createTextNode(newList.name));
cellBottonDelete.appendChild(itd);
rowIndex = rowIndex + 1;
How do I retrieve a variable value from a table cell using javascript.
var clicks = new Array();
var click1;
var click2;
function addTableRow() {
click1 = parseInt(document.getElementById('caption').value),10;
click2 = parseInt(document.getElementById('caption1').value),10;
var clicks = [click1, click2];
clicks.push({c1:clicks[0], c2:clicks[1]});
var table = document.getElementById('table');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var input = document.createElement('input');
input.setAttribute("type", "text");
input.style.width = "100px";
cell2.appendChild(input);
cell3.innerHTML = "x:" + clicks[0] + ", y:" + clicks[1];
var btnDelete = document.createElement('Button');
var btnDeleteText = document.createTextNode("Delete");
btnDelete.appendChild(btnDeleteText);
btnDelete.style.width = "80px";
cell4.appendChild(btnDelete);
btnDelete.onclick = function() {
var rowToDelete = this.parentNode.parentNode;
var parentReference = rowToDelete.parentNode;
parentReference.removeChild(rowToDelete);
var inputsInTable = document.getElementsByTagName('input');
for(i=0; i<inputsInTable.length; i++)
{
??????????????????????
}
}
}
Basically, when I add a row the clicks get stored in the array. When I delete a row, I need to update the array by rebuilding it.
I hope it's more clear now.
Any help would be very appreciated.
Marco