Develop Reference

How to make my Array to be empty again and reusable for my Edit Text Function

Newbie here.. I was making an expense note app(just a noob app). I have this button function on which when I select one table row.. It will be deleted and the table row input text value will return to the input bar text area(name, date, amount, remarks). I was happy when it work.
But it only work once.
Because when I select different table row data. It will be deleted but the same "first input data value" will always return to the input text bar..
It seems the first table data are being saved in the empty array function that can be reuse again. What I am hoping for is when I use the empty array function it will be empty again to be use in another different table row data.
I am using array methods but failed or my If statement is wrong. Hopefully you can answer this :) thanks
document
.getElementById("editSelection")
.addEventListener("click", editSelection);
function editSelection() {
var editName = [];
var editDate = [];
var editAmount = [];
var editRemarks = [];
let selectedRows = document.getElementsByClassName("selected-row ");
while (selectedRows.length > 0) {
editName.push(cell0.innerText);
editDate.push(cell1.innerText);
editAmount.push(cell2.innerText);
editRemarks.push(cell3.innerText);
selectedRows[0].parentNode.removeChild(selectedRows[0]);
var name = document.getElementById("inputName");
name.value = editName.join("\n");
var date = document.getElementById("inputDate");
date.value = editDate.join("\n");
var amount = document.getElementById("inputAmount");
amount.value = editAmount.join("\n");
var remarks = document.getElementById("inputRemarks");
remarks.value = editRemarks.join("\n");
}
if (name || date || amount || remarks) {
editName.splice([0], editName.length);
editDate.splice([0], editDate.length);
editAmount.splice([0], editAmount.length);
editRemarks.splice([0], editRemarks.length);
}
}

If you define an empty array
var editName = [];
and fill it with values you can empty it again with
editName = [];

Create an array from JSON in Javascript

I've researched quite a bit on here and I can't seem to find something that will work for me. What I have is an application that I'm trying to have go out and return the next four bus arrival times for a bus stop. I am reaching out to an API that returns this data in a JSON file. The problem I am having is I can see my request go out via fiddler but I can't seem to get the data into an array. Below is the code that I'm dealing with right now. I'm trying to get the returned data into a table format which you can see I'm failing at.
Eventually I want to get a popup to appear when the user clicks on the Show me the next 4 bus arrival times but this was for testing purposes. I would love to have the users click on my button which calls this function and then something like a like table open with these values. If you can help with that within this code I would appreciate it as well.
JSON Data:
[{"ARRIVAL":"01:23P","ROUTE":"208","DIR":"E"},
{"ARRIVAL":"01:53P","ROUTE":"208","DIR":"E"},
{"ARRIVAL":"02:23P","ROUTE":"208","DIR":"E"},
{"ARRIVAL":"02:53P","ROUTE":"208","DIR":"E"}]
Code:
<script>
function getTimes(stopNumber) {
var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber ";
$.getJSON(busArrivalAPI, function(busArrivals) {
var a = [];
for (var i = 0; i < busArrivals.length; i++) {
a[i] = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR];
document.getElementById("results").createElement("TR");
for (var b = 0; b < 3; b++) {
var x = document.createElement("TH");
var z = a[i][b];
var t = document.createTextNode(z);
x.appendChild(t);
document.getElementById('results').appendChild(x);
};
};
});
</script>
My DIV:
<div style="overflow-x:scroll; overflow-y:scroll;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Bus Arrival Times', selected:true">
<table id = 'results'>
<tr>
<th>Route</th>
<th>Arrival Time</th>
<th>Direction</th>
</tr>
</table>
</div>
UPDATE: Ok, I've use the makeTable idea provide below and it works when I program as seen below hard coding the json data. However, when trying to use the $.getJSON I'm having some cross domain issues now and don't know how I can get my $.getJSON request working. Any input on how to get the data from my getJSON request work be great.
function getTimes(stopNumber) {
// This is the API address I need to hit. Trying to figure out how to incorporate that and remove the function getJSON where I have the data hard coded.
//var busArrivalAPI = "http://-----/rtcTimes/"+ stopNumber + "?jsoncallback=?";
function makeTable(busArrivals) {
// This will remove old values so table will only load current Times
var results = document.getElementById("results");
var rowCount = results.rows.length;
for (var x=rowCount-1; x>0; x--) {
results.deleteRow(x);
}
// This will populate the result table with the correct bus routes/times/direction
busArrivals.forEach(function(busArrival) {
var tr = document.createElement('tr');
var route = document.createElement('td');
route.appendChild(document.createTextNode(busArrival.ROUTE));
var arrival = document.createElement('td');
arrival.appendChild(document.createTextNode(busArrival.ARRIVAL));
var direction = document.createElement('td');
direction.appendChild(document.createTextNode(busArrival.DIR));
tr.appendChild(route);
tr.appendChild(arrival);
tr.appendChild(direction);
document.getElementById('results').appendChild(tr);
});
}
function getJSON(callback) {
var data = [{"ARRIVAL":"05:23P","ROUTE":"201","DIR":"E"},
{"ARRIVAL":"05:54P","ROUTE":"202","DIR":"E"},
{"ARRIVAL":"06:33P","ROUTE":"203","DIR":"E"},
{"ARRIVAL":"07:11P","ROUTE":"204","DIR":"E"}];
callback(data);
}
getJSON(makeTable);
};

I think you could write a separate function to build the table, like this:
function makeTable(busArrivals) {
busArrivals.forEach(function(busArrival) {
var tr = document.createElement('tr');
var route = document.createElement('td');
route.appendChild(document.createTextNode(busArrival.ROUTE));
var arrival = document.createElement('td');
arrival.appendChild(document.createTextNode(busArrival.ARRIVAL));
var direction = document.createElement('td');
direction.appendChild(document.createTextNode(busArrival.DIR));
tr.appendChild(route);
tr.appendChild(arrival);
tr.appendChild(direction);
document.getElementById('results').appendChild(tr);
});
}
var busArrivalAPI = 'http://blahblahblah/rtcTimes/'+ stopNumber;
$.getJSON(busArrivalAPI, makeTable);
In each iteration of the forEach loop, you construct a tr element, insert the tds and finally put the whole thing inside the DOM.

You're creating a TR element, but never appending it to the table. Instead, you're appending the TH elements directly to the table, which is invalid.
function getTimes(stopNumber) {
var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber;
$.getJSON(busArrivalAPI, function(busArrivals) {
var table = document.getElementById('results');
for (var i = 0; i < busArrivals.length; i++) {
var a = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR];
var row = document.createElement("TR");
for (var b = 0; b < 3; b++) {
var x = document.createElement("TH");
var z = a[b];
var t = document.createTextNode(z);
x.appendChild(t);
row.appendChild(x);
};
table.appendChild(row);
};
});
}
I'm not sure why you need the a array. If you just want to change get the object properties into an array so you can iterate over it, you can do that with a 1-dimensional array, you don't need to save all the other rows in a 2-dimensional array. I've changed a to a single array.

Find Index of Column(s) after it has been Moved

We are using DHTMLX Grid. Need some help, please.
I have a table and each columns (has filter/dropdown) are allocated an id eg. fac, date, sel, loc, tag ... etc
We have hard coded the index of columns to set and get the cookie elsewhere.
function doInitGrid(){
mygrid.setColumnIds("fac,date,sel,loc,tag"); //set ids
mygrid.attachEvent("onFilterStart",function(ind,data)
{
setCookie("Tray_fac_filter",mygrid.getFilterElement(0).value,365); //column index 0
setCookie("Tray_loc_filter",mygrid.getFilterElement(3).value,365);//column index 3
setCookie("Tray_tag_filter",mygrid.getFilterElement(4).value,365); //column index 4
mygrid.getFilterElement(0).value = getCookie("Tray_fac_filter")
mygrid.getFilterElement(3).value = getCookie("Tray_dep_filter")
mygrid.getFilterElement(4).value = getCookie("Tray_prg_filter")
});
}
But when the columns are moved, the problem arises as the index of the column changes yet it is set in setCookie /getCoookie
DHTMLX allows to get the index of the id using --
var colInd = grid.getColIndexById(id);
eg: var colInd = grid.getColIndexById(date); // outputs 1.
After moving the date column to the end -- fac, sel, loc, tag, date // it will output 4.
However, we have about 14 columns that can be moved/rearranged and I could use the
var colInd = grid.getColIndexById(id); 15 times
var facInd = grid.getColIndexById("fac");
var dateInd = grid.getColIndexById("date");
var selInd = grid.getColIndexById("sel");
var locInd = grid.getColIndexById("loc";
var tagInd = grid.getColIndexById("tag");
and put those variables in the set/get cookie. I was thinking if there was a better way.
To understand the code better, I have put the minimised version of the code in fiddle.
http://jsfiddle.net/19eggs/s5myW/2/

You've got the best answer I think. Do it in a loop and it's easier:
var cookie_prefix = "Fray_filter_";
var cookie_dur = 365;
var num_cols = dhx_grid.getColumnCount();
// filter vals to cookies
for (var col_idx=0; col_idx<num_cols; col_idx++) {
var filter = mygrid.getFilterElement(col_idx)
if (filter) { // not all columns may have a filter
var col_id = dhx_grid.getColumnId(col_idx);
var cookie_name = cookie_prefix+col_id;
setCookie(cookie_name, filter.value, cookie_dur);
}
}
// cookies to filter vals
for (var col_idx=0; col_idx<num_cols; col_idx++) {
var col_id = dhx_grid.getColumnId(col_idx);
var filter_val = getCookie(cookie_prefix+col_id);
var filter = mygrid.getFilterElement(col_idx)
filter.value = filter_val;
}

You can use dhtmlxgrid native event to assign the correct id everytime a column is moved.
The event is called onAfterCMove, you can check the documentation here. onAfterCMove Event
You would do something like:
mygrid.attachEvent('onAfterCMove',function(cInd,posInd){
//Your processing here to change the cookies; where cInd is the index of the column moved
//and posInd, is the position where it Was moved
}):

Need to call back an array in Google Script

I am attempting to send an array through the callback and having no luck. Let me explain my intent and perhaps an expert out there can send me some ideas for how to solve this dilema.
I have creates a spreadsheet that collects data. I then have a UI script which pulls row data into a flex table for a user to process by clicking a checkbox. I created a separate flex table that contains the checkboxes which the user checks or leaves blank. In my script I need to send an array that contains the checkbox condition. Why? Because I also need the row # or array placement that I can push to the spreadsheet to send the correct updated status for the data.
The script only pulls data that needs action into the UI. Thus I may be acting on Rows 1,3,4,5,and 8 of the spreadsheet but on the UI flextable the row that correspond to the data are rows 1,2,3,4,5 thus the row assignments don't match. BUT if I use an array I can capture that the row pulled was 1,3,4,5,and 8 and then update the spreadsheet accordingly.
However, that is the problem when I try to callback my array labeled offset[inc] I cannot get it to work I get run errors of cannot find method addcallback and cannot get it to work.
Recommendations on how to send an array through the addcallback method or alternate recommendations would be appreciated.
Thanks,
Sean Nutzman
function doGet(e){
var app = UiApp.createApplication();
//Create Caption Panel
var captionPanel = app.createCaptionPanel('Detention Attendance').setWidth('350px').setHeight('75px').setStyleAttribute('fontWeight', 'bold').setStyleAttribute('fontSize', '24px');
//Add a widget to caption panel
captionPanel.add(app.createLabel("Please enter attendance for Detention by clicking the checkbox next to the student's name if they were present. Then click Sumbit."));
//add the caption panel to the application
app.add(captionPanel);
var panel = app.createHorizontalPanel();
var flexTable = app.createFlexTable().setStyleAttribute('border', '2px solid black')
.setStyleAttribute('borderCollapse','collapse')
.setBorderWidth(2)
.setCellSpacing(50)
.setCellPadding(6);
//Get Data from spreadsheet
var spreadsheetId = '0Aup0nXQ4K-pydFREb1FFcTFYX3lOenNQenR1Q01jQ1E'; //Change this to the Spreadsheet ID
var dataArray = getData(spreadsheetId);
var inc = 1;
//Load data into table cells
for (var row = 0; row<dataArray.length; row++) {
var booleanCheck = dataArray[row] [17];
var offset = new Array();
if (booleanCheck == "" || booleanCheck == "Date Served") {
if (row > 0) {
Logger.log("Row value = " + row);
var ticketDate = dataArray[row] [0];
var dateStamp = Utilities.formatDate(new Date(ticketDate), "America/Chicago", "MM/dd/yyyy");
dataArray[row] [0] = dateStamp;
var ticketDate2 = dataArray[row] [16];
var dateStamp2 = Utilities.formatDate(new Date(ticketDate2), "America/Chicago", "MM/dd/yyyy");
dataArray[row] [16] = dateStamp2;
flexTable.setText(row, 1, dataArray[row][2].toString());
flexTable.setText(row, 0, dataArray[row][0].toString());
flexTable.setText(row, 2, dataArray[row][16].toString());
offset[inc] = row; inc++;
Logger.log('Inc variable = ' + inc);
Logger.log('Offset = ' + offset[inc-1]);
} else {
Logger.log("Inside ELSE row is not > 0");
Logger.log("Row value here = " + row);
flexTable.setText(0, 1, "Student's Name").setStyleAttribute(0, 1, 'fontWeight', 'bold');
flexTable.setText(0, 0, "Date Assigned").setStyleAttribute(0, 0, 'fontWeight', 'bold');
flexTable.setText(0, 2, "Date Delinquent").setStyleAttribute(0, 2, 'fontWeight', 'bold');
}
}
}
Logger.log(offset);
panel.add(flexTable);
var check1 = app.createCheckBox().setName('ch1');
var check2 = app.createCheckBox().setName('ch2');
var check3 = app.createCheckBox().setName('ch3');
var check4 = app.createCheckBox().setName('ch4');
var check5 = app.createCheckBox().setName('ch5');
var check6 = app.createCheckBox().setName('ch6');
var check7 = app.createCheckBox().setName('ch7');
var check8 = app.createCheckBox().setName('ch8');
var check9 = app.createCheckBox().setName('ch9');
var submitButton = app.createButton("Submit");
var handler = app.createServerClickHandler('updateStatus');
handler.addCallbackElement(check1)
.addCallbackElement(check2)
.addCallbackElement(check3)
.addCallbackElement(check4)
.addCallbackElement(check5)
.addCallbackElement(check6)
.addCallbackElement(check7)
.addCallbackElement(check8)
.addCallbackElement(check9)
.addCallbackElement(offset);
submitButton.addClickHandler(handler);
handler.addCallbackElement(check1)
.addCallbackElement(check2)
.addCallbackElement(check3)
.addCallbackElement(check4)
.addCallbackElement(check5)
.addCallbackElement(check6)
.addCallbackElement(check7)
.addCallbackElement(check8)
.addCallbackElement(check9)
.addCallbackElement(offset);
var table = app.createGrid(11,1).setStyleAttribute('border', '2px solid black')
.setStyleAttribute('borderCollapse','collapse')
.setBorderWidth(2)
.setWidth('75px')
.setCellSpacing(5)
.setCellPadding(6);
table.setStyleAttributes({textAlign: "center"});
table.setStyleAttribute('fontWeight', 'bold').setText(0, 0, 'Attendance');
table.setWidget(1,0, (check1));
table.setWidget(2,0, (check2));
table.setWidget(3,0, (check3));
table.setWidget(4,0, (check4));
table.setWidget(5,0, (check5));
table.setWidget(6,0, (check6));
table.setWidget(7,0, (check7));
table.setWidget(8,0, (check8));
table.setWidget(9,0, (check9));
table.setWidget(10,0,(submitButton));
panel.add(table);
app.add(panel);
app.close();
return app;
}

What I usually do is to convert the array to a string and write it on the widget's tag.
Then I can retrieve it using e.parameter.widgetName_tag in the handler function. At this point I can split it to get back the array : e.parameter.widgetName_tag.split(',');
You'll have to be careful when choosing the join and split character since your data might contain a comma (which is the default separator in arrays)... I often use a | or any other 'uncommon' character (Ë,Í;∆) in combination with join('∆') and split('∆') so I'm sure I get the array back as it should.
Of course the widget must be included in the callBackElement but this is easily achieved by using the highest level parent UiApp element as callBackElement.
Last comment : try to use widget Ids that will simplify your life ... for example use Ids containing a number that corresponds to the array index ( chk0, chk1, chk2...) so that you can easily retrieve the numeric value to use in your handler function using something like this :
Number(e.parameter.source.replace(/[a-z]/ig,''))
which will give you a number that identifies which checkBox is the origin of the handler call so you can write :
var arrayElement = e.parameter.widgetName_tag.split(',')[Number(e.parameter.source.replace(/[a-z]/ig,''))];

var array = ['foo','poo'];
var arrayString = JSON.stringify(array);
At that point, just attach arrayString to a callback element and voila! Then in the handlerFunction, you access it out with e.parameter.arrayString and then parse it to return it back to an array like so:
var array = JSON.parse(e.parameter.arrayName);
//array = ['foo','poo']

Dynamically creating TableViews on click of button

Let me come out very clear. I have some buttons in my Model Window.
var row = Ti.UI.createTableViewRow({height:50});
var row2 = Ti.UI.createTableViewRow({
height:'auto'
});
row2.add(Button);
row2.add(Image);
var data = [row,row2];
var table = Ti.UI.createTableView({
data:data
});
I want 7 TextField dynamically in the first row. The second row remains static but the first one should grow

Do you mean to make an array to be used to create a TableView? Then do something like
function addRow(txtField) {
var tf = Titanium.UI.createTextField({width:100,height:30,hintText:txtField});
var row = Ti.UI.createTableViewRow({height:50});
row.add(rf);
return row;
}
array[0] = addRow('Textfield 1');
array[1] = addRow('Textfield 2');
array[2] = addRow('Textfield 3');
Ti.UI.createTableView({data:array});