So I have 2 pages.
On one I have a table that is getting data from a JSON page and I inserted a button on each row that whenever is clicked it should get that item on an array.
And then, that array should give the results on the second page.
I can get the info from the JSON without problems, but cannot store the information on an array. Can someone help me? I'm quite new on JavaScript.
Page 1:
<script>
<!-- Retrieve data from file -->
var products=[];
var cartArray=[];
var product_array=[];
$.getJSON('products.json',function(data){
$.each(data.products, function(i, f){
var img = f.image_url;
var title = f.title;
var price = f.price;
var old_price = f.old_price;
product_array.push([img, title, price]);
var tblCell = "<tr><td class='prod_container'><tr><td class='prod_img_container'><img class='prod_img' src=" + img + "></td></tr>" + "<tr class='title_container'><td class='title'>" + title + "</td></tr>" + "<tr class='price_container'><td class='price'>" + price + "</td>" + "<td class='price_org'>" + old_price + "</td>" + "<td class='add_cart'><img class='add_cart_img' src='img/buynow-green-6.png' onClick='addToCart()'>" + "</td></tr>"
$(tblCell).appendTo("#list_products tbody");
});
});
<!-- Add To Cart -->
function addToCart(){
cartArray.push([product_array.title, product_array.img, product_array.price]);
window.alert(cartArray);
}
<!-- Store and go to checkout -->
function goToCheckout(){
$('#store').on('click', function(){
localStorage.cartArray = cartArray;
});
window.location.href="cart.html";
}
Not sure of your final data structure needs, but if you want a multi-dimensional array:
var cartArray = []
function addToCart(product_array){
cartArray.push([product_array.title, product_array.img, product_array.price];
window.alert(cartArray);
}
Related
I want to update entire column with new_data
I tried to update as bellows
response.json().then(function (new_data){
console.log(new_data)
var body_data = " ";
new_data.forEach((item) => {
var list_data = "";
list_data += "<td>" + item.vc_state + "</td>";
body_data += list_data;
});
$('#vc_state').html(body_data); })
But it update only the cell as bellows
I want to update entire State column with new data
Please help me to solve this
Updated
I updated as follows
response.json().then(function (data){
console.log(data)
var body_data = " ";
data.forEach((item) => {
var list_data = "";
list_data += "<td>" + item.vc_state + "</td>";
$('#vc_state').replaceWith(list_data);
});
It worked. But it changed the HTML only once . I need to update HTML when I call the function without refreshing the page
watch table infor with w3c will help you. table>thead|tbody>tr>td|th.
I have a dynamic array as such:
var PartnerEmailList = [one#email.com, two#email.com, three#email.com];
The following function creates a table that is displayed in a showModalDialog window.
function makeTableHTML() {
var PartnerEmailList = [one#email.com, two#email.com, three#email.com];
var result = "<table border=0>";
result += "<tr><td style=\"text-align:center\"><input type=\"checkbox\" name =" + PartnerEmailList[0] + " value =" + PartnerEmailList[0] + " checked></input></td>";
result += "<td style=\"vertical-align:text-middle\">" + PartnerEmailList[0] + "</td></tr>";
for(var i=1; i<PartnerEmailList.length; i++) {
result += "<tr><td style=\"text-align:center\"><input type=\"checkbox\" unchecked></input></td>";
result += "<td style=\"vertical-align:text-middle\">" + PartnerEmailList[i] + "</td></tr>";
}
result += "</table>";
result += "<input type=\"submit\" value=\"Submit\" class=\"action\" onclick=\"form_data()\">"
result += "<input type=\"button\" value=\"Close\" onclick=\"google.script.host.close()\">"
return result;
}
The user clicks a button within Google Sheets that runs the following script. This script pops up a ModalDialog window where the user can check which emails they want to send this product to.
function SelectEmails(){
var ui = SpreadsheetApp.getUi();
var result = makeTableHTML();
var bccSend = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('main_gen').getRange(2,2).getValue();
if(bccSend === ''){
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutput(result)
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the intended recipients of this briefing.");
}
}
I need to write a function that looks through all the checkboxes (they are all assigned a value within the html code) and stores the values of each one that is checked in an array. I will be calling this array in a different function to actually send out the email.
There may be a much better way to go about this, but this is what I have come up with so far. Any help would be much appreciated! Thanks!
In relation to this question:
Cannot edit/create/delete elements in table using Datatables and free editor
I'm trying to rewrite some of the datatables free editor to suit my needs, however i have encoutered an error that i can't wrap my head around.
As you can see in the bottom of the picture (Outputs:) of the console.logs i can get the value of an array (the selected row) by hardcoding the property like this:
adata.data()[0].ntp_server
But when changing the property of the array to the value from another array:
adata.data()[0].newaData[j].name
I get undefined, even though the value of newaData[j].name is ntp_server
I've searched the web and stack, but cant find an explaination as to why. I've checked the types, tried assigning the newAdata value to a variable and a bunch of other stuff, but none of it works.
The script
I'm getting the columnheaders and row properties and pushing them to an array like this:
var dt = this.s.dt;
var columnDefs = [];
var newaData = [];
for( var i = 0; i < dt.context[0].aoColumns.length; i++ )
{
columnDefs.push({ title: dt.context[0].aoColumns[i].sTitle });
newaData.push({ name: dt.context[0].aoColumns[i].data});
}
I then wanna show the column headers and row values in a modal, which is done here:
var adata = dt.rows({
selected: true
});
var data = "";
data += "<form name='altEditor-form' role='form'>";
for(var j = 0; j < columnDefs.length; j++){
data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'><input type='text' id='" + columnDefs[j].title + "' name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][j] + "'></div><div style='clear:both;'></div></div>";
}
The line where I encounter the problem is:
data += "<div class='f.....
So I have this javascript function that loops through each user account and displays them in a drop-down menu. When the user selects an option from the drop-down menu, it takes the Iban number as its main id which is stored in ddlAccountFrom. Is there a way how I can store two values when the user selects an option, like for instance the Iban and Currency into separate variables?
function getAccountFrom() {
var username = $("#hiddenUsername").val();
var url = "http://localhost:63723/api/BankAccountsApi/GetBankAccounts/?username=" + username + "&id=2";
$.getJSON(url, function (data) {
var table = "<select id=\"ddlAccountFrom\">";
table += "<option value=\"-1\">Select an Account</option>";
$.each(data, function (key, val) {
table += "<option value=\"" + val.Iban + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";
});
table += "</select>";
$('#divAccountFrom').html(table);
});
}
I am using the ddlAccountFrom in this function..
function Transfer() {
var accountFrom = $("#ddlAccountFrom").val();
var accountTo = $("#txtAccountTo").val();
var amount = $("#txtAmount").val();
var url = "http://localhost:63723/api/BankAccountsApi/TransferFunds/?
ibanFrom=" + accountFrom + "&ibanTo=" + accountTo + "&amount=" + amount;
$.getJSON(url, function (data) {
alert(data);
})
.error (function () {
alert("Not enough balance! The amount entered exceed the balance found in this account. Please try again.");
})
}
You can use the data-custom attribute, like this:
table += "<option value=\"" + val.Iban + "\" data-currency=\"" + val.Currency + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";
To access variable see jquery-cant-get-data-attribute-value
So you can read:
var selectedCurrency= $("#ddlAccountFrom :selected").data('currency');
You could :
Concatenate your 2 data in 1 string with a separator (for ex myIban#myCurrency) and then split your value to get back your 2 distinct data
Listen to your dropdown changes, for example adding a onchange=updateData(val.Iban, val.Currency) attribute to your option html, and in your js :
var currentIban, currentCurrency;
function updateData(iban, currency) {
currentIban = iban;
currentCurrency = currency;
}
Add a data-custom attribute, like data-currency or data-iban
I want to add a new row to my JSON when the user clicks a link. Here's my javascript: It's not erroring, but I am not getting updated JSON in my alert.
$(document).ready( function(){
people = {
"COLUMNS":["NAME","AGE"],
"DATA":[
["Jon","16"],
["Jerry","23"]
]
}
members = people.DATA;
var nc = "<table border=1 width=500><tr><td>name</td><td>age</td><td></td></tr>";
for(var i=0;i<members.length;i++)
{
nc+= '<tr><td>' + members[i][0] + '</td>';
nc+= '<td>' + members[i][1] + '</td>';
nc+= '<td>add a new person</td></tr>';
}
nc += "</table>";
$("#result").html(nc);
$(".addlink").click( function(){
// add another row to our JSON
people.DATA['NAME'] = "new";
people.DATA['AGE'] = "99";
alert(people.DATA);
return false;
});
});
That's not JSON, it's a Javascript object.
To add another item in the array, you create an array and add to it, as it is an array of arrays:
people.DATA.push(["new", "99"]);