Develop Reference

Bootstrap modal populated by selected row in table data

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(); }

how to get difference of 2 columns in dynamically created rows in javascript

I have a dynamically created table having 3 columns. I need the difference of Col 2 and Col 1 to be populated in Col 3. I have no clue as to how to proceed with dynamically created tables. I'm reading the table values in my save function. Can you please suggest as to how to include the code for the difference?
JS:
function save()
{
var eval_tbl = document.getElementById('bagger_reading_list');
var eval_row_array = [];
for (i=0; i<eval_tbl.rows.length; i++)
{
var tableRow = {
Start_Reading : eval_tbl.rows[i].cells[1].firstElementChild.value,
End_Reading : eval_tbl.rows[i].cells[2].firstElementChild.value,
Total_Reading : eval_tbl.rows[i].cells[3].firstElementChild.value, \\ I need the difference of End-Reading - Start_Reading to be displayed on Total_Reading of eah row created.
}
eval_row_array[eval_row_array.length] = tableRow;
}
}

Convert the values into Float (just to be safe) using parseFloat() and add it up. Do it like:
Total_Reading : parseFloat(eval_tbl.rows[i].cells[2].firstElementChild.value) - parseFloat(eval_tbl.rows[i].cells[1].firstElementChild.value),
So, your save function should look like:
function save()
{
var eval_tbl = document.getElementById('bagger_reading_list');
var eval_row_array = [];
for (i=0; i<eval_tbl.rows.length; i++)
{
var tableRow = {
Start_Reading : eval_tbl.rows[i].cells[1].firstElementChild.value,
End_Reading : eval_tbl.rows[i].cells[2].firstElementChild.value,
Total_Reading : parseFloat(eval_tbl.rows[i].cells[2].firstElementChild.value) - parseFloat(eval_tbl.rows[i].cells[1].firstElementChild.value)
}
eval_row_array[eval_row_array.length] = tableRow;
}
}
Readup: parseFloat() | MDN

Try this:
function save()
{
var eval_tbl = document.getElementById('bagger_reading_list');
var eval_row_array = [];
for (i=0; i<eval_tbl.rows.length; i++)
{
var startReading = eval_tbl.rows[i].cells[1].firstElementChild.value;
var endReading = eval_tbl.rows[i].cells[2].firstElementChild.value;
var totalReading = parseFloat(endReading) - parseFloat(startReading);
var tableRow = {
Start_Reading : startReading,
End_Reading : endReading,
Total_Reading : totalReading
}
eval_row_array[eval_row_array.length] = tableRow;
}
}

I have written a small code. Check if it fits your need
function saved()
{
var eval_tbl = document.getElementById('Table');
var eval_row_array = [];
for (i=0; i<eval_tbl.rows.length; i++)
{
var tableRow = {
Start_Reading : eval_tbl.rows[i].cells[0].innerHTML,
End_Reading : eval_tbl.rows[i].cells[1].innerHTML,
Total_Reading :parseInt(eval_tbl.rows[i].cells[0].innerHTML) - parseInt(eval_tbl.rows[i].cells[1].innerHTML)
}
eval_tbl.rows[i].cells[2].innerHTML=parseInt(eval_tbl.rows[i].cells[0].innerHTML) - parseInt(eval_tbl.rows[i].cells[1].innerHTML)
eval_row_array[eval_row_array.length] = tableRow;
}
}

How to display one row from a HTML table and change to next?

I have a HTML table with 2 columns, 5 rows.

you can do this:
function findMyRow(el)(){
if(!el.parentNode) return null;
else if(el.parentNode.tagName.toLowerCase()=="tr") return el.parentNode;
else return findMyRow(el.parentNode);
}
for(var i=0;i<tbl.rows.length;i++){
tbl.rows[i].onclick = function(e){
var selectedRow = null;
if(e.target.tagName.toLowerCase()=="tr") selectedRow = e.target;
selectedRow = findMyRow(e.target);
//this is just for preventing false event raising
if(!selectedRow) return false;
var rowIndex = Array.prototype.indexOf.call(tbl.rows, selectedRow);
for(car j=0;j<selectedRow.cells.length;j++){
var cell = selectedRow.cells[j];
//let's say your inputs each has an unique ID based on your columns index
//like <input id="cellData0" ttype="text" />
//or <input id="cellData1" ttype="text" /> and so on
document.getElementById("cellData" + j).value = cell.innerText;
}
}
}
although you can do this more easier than with jQuery.

With Jquery you could do something like:
$(document).ready(function(){
window.rowIndex = 0; // gobal variable
function displayRow(){
var tableRows = $('#mytable tr');
if(tableRows.length <= window.rowIndex) {
window.rowIndex = 0;
}
var rowCells = $(tableRows[window.rowIndex]).find('td');
$('.cellone').val($(rowCells[0]).html());
$('.celltwo').val($(rowCells[1]).html());
window.rowIndex = window.rowIndex + 1;
};
$('.next').click(function(event){ displayRow(); });
displayRow();
});
There is a live demo here Hope it helps!

Selection of multiple values from drop down list

I've a drop down list that contains all the ontacts on mobile. I want to select more than one contact at a time.
When I was working on regular html & JS pages I used this code:
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('txtContactsName');
var selectedArray = new Array();
var selObj = document.getElementById('AllContacts');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++)
{
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
But when I use it on Android, then if statement is skipped & it just stops,this statement:
"selObj.options[i].selected"
seems strange for the mobile!

This worked:
function ChooseContact(data)
{
var txtSelectedValuesObj = document.getElementById('txtContactsName');
var selectedArray = new Array();
var selObj = document.getElementById('contacts');
var i;
var count = 0;
for(i=0;i<selObj.options.length;i++)
{
if(selObj.options[i].selected==true)
{
selectedArray[count] = selObj.options[i].value;
alert(selObj.options[i].value);
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
I just modified this:
if (selObj.options[i].selected)
to this:
if(selObj.options[i].selected==true)

Paging in slickGrid

I was able to utilize paging in slickGrid however I am new to jquery and slickGrid and can't get to move in between pages. can anyone help me with this? Any help is greatly appreciated. Thanks!
$(document).ready(function() {var columns = [
{id:"counter", name:"#",field:"counter"},
{id:"data1", name:"Data 1",field:"data1"},
{id:"data2", name:"Data 2",field:"data2"},
{id:"data3", name:"Data 3",field:"data3"},
{id:"data4", name:"Data 4",field:"data4"}];
var options = { enableCellNavigation: false,
enableColumnReorder: false};
var FB_C_grid;
var FB_C_data;
var selectedRowIds = [];
var dataView;
$(function() {
FB_C_data = [];
FB_C_data[0]={"id":"0",
"data1":"test1",
"data2":"test1",
"data3":"test1",
"data4":"test1,
"counter":"1"
};
for (var i=1; i<50000; i++) {
var d = (FB_C_data[i] = {});enter code here
d["id"] = "id_" + i;
d["data1"] = "data1_" + i;
d["data2"] = "data2_" + i;
d["data3"] = "data3_" + i;
d["data4"] = "data4_" + i;
d["counter"] = i;
}
dataView = new Slick.Data.DataView();
dataView.setItems(FB_C_data);
dataView.setPagingOptions({pageSize:20});
FB_C_grid= new Slick.Grid($("#FB_C_sheet"),dataView.rows, columns,options);
var pager = new Slick.Controls.Pager(dataView, FB_C_grid, $("#pagerTest"));
dataView.onRowsChanged.subscribe(function(rows) {
FB_C_grid.removeRows(rows);
FB_C_grid.render();
if (selectedRowIds.length > 0)
{
// since how the original data maps onto rows has changed,
// the selected rows in the grid need to be updated
var selRows = [];
for (var i = 0; i < selectedRowIds.length; i++)
{
var idx = dataView.getRowById(selectedRowIds[i]);
if (idx != undefined)
selRows.push(idx);
}
FB_C_grid.setSelectedRows(selRows);
}
});
dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
var enableAddRow = isLastPage || pagingInfo.pageSize==0;
var options = FB_C_grid.getOptions();
if (options.enableAddRow != enableAddRow)
FB_C_grid.setOptions({enableAddRow:enableAddRow});
});
dataView.onRowCountChanged.subscribe(function(args) {
FB_C_grid.updateRowCount();
FB_C_grid.render();
});
})
});

I see some of your errors as you are trying to pass a jQuery object into SlickGrid while SlickGrid already uses jQuery in the code behind. When you create your SlickGrid object, you just need to pass the name of your grid and so in your code, you have to replace this $("#pagerTest") without jQuery wrapper becomes this "#pagerTest"
I see you called it the same in 2 different locations, so replace your 2 lines with this:
FB_C_grid= new Slick.Grid("#FB_C_sheet",dataView.rows, columns,options);
var pager = new Slick.Controls.Pager(dataView, FB_C_grid, "#pagerTest");
Hope that helps you make it to work...