We Keep Coding

JavaScript Table.Rowd Collection Undefined

I'm trying to insert a row into a table by cloning a row and replace it's values from a model. I'm open to doing this some other way. I'm very new to JavaScript and this code is from an example I found.
function createNewRow(model)
{
// Make a copy of the first row
var table = document.getElementById('divData');
var new_row = table.rows[1].cloneNode(true); // <====== Error occurs here. The Table exists, the rows collection does not.
var len = table.rows.length;
new_row.cells[0].innerHTML = len;
// Copy the model's data to the new row
new_row.cells[1].value = model.SiteId;
new_row.cells[2].value = model.InstrumentId;
new_row.cells[3].value = model.TowerLocation;
new_row.cells[4].value = model.BayLocation;
new_row.cells[5].value = model.BaySerialNo;
new_row.cells[6].value = model.BayStatus;
new_row.cells[7].value = model.AccessionId;
new_row.cells[8].value = model.Result;
new_row.cells[9].value = model.AssayName;
new_row.cells[10].value = model.Started;
new_row.cells[11].value = model.Completed;
new_row.cells[12].value = model.TestSummary;
// Add the new row to the table
table.appendChild(new_row);
}
[UPDATE] - Added table code
#using (#Html.BeginForm("Index", "Home"))
{
<div id="divData">
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "divData", canPage: true);
#grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column(columnName: "RowId", header: "Row Id", format: #<text><span data-row-id="#item.RowId">#item.RowId</span></text>),
grid.Column(columnName: "SiteId", header: "Site Id", format: #<text><span class="x-SiteId">#item.SiteId</span></text>),
))
}
</div>
}
The table does exist, and there are rows in the table, yet on the line I indicated above I get "Cannot read property '1' of undefined"
When I do console.log(table.Rows) I get 'undefined'.
Anyone see what's wrong?
Thank you

WP Media Library - Select function not updating row index for ID update

I am working on a wordpress blog with a custom metabox on the edit page of each post.
This metabox consists of table with each row containing image src selected from media library.
Now every new row added has an id :
row 1 : img_metabox_src_0
row 2 : img_metabox_src_1
row 3 : img_metabox_src_2
Table headers goes like :
----Image < img >------ |------- URL (Input textbox)------ | -------- Select Image (Input submit)------ | -----Delete Image (Input submit)--------
Now,
On click on "Select Image" on any row, I retrieve the row index from jquery, and then send : "img_metabox_src_"+index to file_frame.on( 'select', function() for url update.
i.e.
jQuery('tr #select_image').off().on('click', function( event ){
event.preventDefault();
var row_index = jQuery(this).closest('tr').index();
var id = "img_metabox_src_" + row_index;
//******** 1 ***********
console.log('row_index');
console.log(row_index);
console.log(id);
console.log(jQuery('#' + id));
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media({
title: "Select/Upload Image",
button: {
text: "Select",
},
library : { type : 'image'},
multiple: false
});
file_frame.on( 'select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
// "mca_features_tray" is the ID of my text field that will receive the image
// I'm getting the ID rather than the URL:
// but you could get the URL instead by doing something like this:
//******** 2 ***********
console.log(id);
console.log(jQuery('#' + id));
jQuery('#' + id).attr('value',attachment.url);
id = null;
});
Now,
Case 1 : When I FIRST click with row index3, the URL updates on img_metabox_src_3.
Case 2 : But after that whichever row i click, the url updates on img_metabox_src_3.
Also on adding logs, I get
(for Case 2, say I clicked row index 1) :
//******** 1 ***********
row index : 1
id : img_metabox_src_1
//******** 2 ***********
id : img_metabox_src_3
i.e. inside file_frame.on( 'select', function() {,
the ID value changes to first clicked value.
Please help on how to pass updated row index/id to the select function

Thanks, I used global concept :
function set_row_index (ind){
row_index = ind;
}
function get_row_index(){
return row_index;
}
jQuery(document).ready(function(){
jQuery('tr input.select_media_library').off().on('click', function( event ){
event.preventDefault();
var index = jQuery(this).closest('tr').index();
**set_row_index(index);**
.
.
.
file_frame.on( 'select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
**index = get_row_index();**
var id = "img_src_" + index;
jQuery('#' + id).attr('value',attachment.url);
});
file_frame.open();
});

How retrieve details of table element clicked?

I have a table and I want retrieve a item details of a element that i sesect:
var tableArtConNom=sap.ui.core.Core().byId("artSnzNomDetail").byId("tableArtConNom");
tableArtConNom.attachItemPress(this.handleRowPress);
tableArtConNom.setModel(new sap.ui.model.json.JSONModel(p_oDataModel));
tableArtConNom.destroyColumns();
tableArtConNom.removeAllColumns();
console.log(tableArtConNom.getColumns());
for(var i=0; i<tableArtConNom.getModel().getProperty("/cols").length; i++){
tableArtConNom.addColumn(new sap.m.Column("colonna"+i, { header: new sap.m.Label({ text: tableArtConNom.getModel().getProperty("/cols")[i] })}));
}
tableArtConNom.destroyItems();
tableArtConNom.removeAllItems();
tableArtConNom.bindAggregation("items", "/items", new sap.m.ColumnListItem({
cells: tableArtConNom.getModel().getProperty("/cols").map(function (colname) {
return new sap.m.Label({ text: "{" + colname + "}" });
}),
type:"Navigation"
}));
if(this.byId("idCodNomDog").getProperty("text")!=""){
var buttonAccept=this.byId("idButtonAccept");
buttonAccept.setProperty("visible", true);
}else{
var buttonAccept=this.byId("idButtonAccept");
buttonAccept.setProperty("visible", false);
}
tableArtConNom.setModel(new sap.ui.model.json.JSONModel(p_oDataModelFull), "fullDataModel");
},
To do it I capture the press event but I find only a number of item:
//IF CLICK ON ROW
handleRowPress : function(evt){
var selectedRowNum = evt.getSource().indexOfItem(evt.getParameter("listItem"));
console.log(selectedRowNum);
},
How can I print the other detailx (for example the content of a column?)
p.s. I can't parse the model of all my rows because in the table I filter the data and the index that i clicked not match by the position in the total model.

in your event handler, use :
var oItem = evt.getParameter("listItem").getBindingContext().getObject();
//NB: if using standard sap.ui.table.Table, use:
//var oItem = evt.getSource().getBindingContext().getObject();
console.log(oItem); //prints the JSON for your selected table row

Filters in SAPUI5 viz

I am trying to display a result det data on a table and a chart together. For exampIe: A user gives a value as an input and a query has to be made to the server to filter the table based on the user input and give nbacj the result set.
I am implementing a filter on the table and then bind the filtered result set to the table. I write the below code which works fine.
var oModel = new sap.ui.model.odata.ODataModel( "../TEST_ODATA.xsodata",false);
oTable.setModel(oModel);
var oFilter=new sap.ui.model.Filter("SUPPLIERID",sap.ui.model.FilterOperator.EQ,oInput1.getValue());
oTable.getBinding("rows").filter(oFilter);
var NumberOfRows = oTable.getBinding("rows").iLength;
oTable.setTitle("Title1" + "(" + NumberOfRows + ")");
oTable.placeAt("content");
Now I need to bind ofilter to a chart too and I write the following code which does not work.
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{axis : 1, name : 'SUPPLIERID', value : "{SUPPLIERID}"},{axis : 2, name : 'MATERIALNUMBER', value : "{MATERIALNUMBER}"}],
measures : [{name : 'Result', value : '{Result}'}],
data : {
path : "/service_path"
}});
var oStackChart = new sap.viz.ui5.StackedColumn({
width : "80%",
height : "400px",
plotArea : {'colorPalette' : d3.scale.category20().range()},
title : {visible : true,text : 'Title2'},
dataset : oDataset});
oStackChart.setModel(oModel);
var oFilter=new sap.ui.model.Filter("SUPPLIERID",sap.ui.model.FilterOperator.EQ,oInput1.getValue());
oStackChart.getBinding("rows").filter(oFilter);
oStackChart.placeAt("content");
Can anyone suggest the change in my code to do so. Kindly help.
Thanks

You can add the filters to the FlattenedDataset like:
var oDataset = new FlattenedDataset({ // required by "sap/viz/ui5/data/FlattenedDataset"
dimensions: aDimensions,
measures: aMeasures,
data: {
path: sEntity,
filters: [ oFilter ],
parameters: {
select: 'ProductID,UnitPrice,Quantity'
}
}
});
Note I used parameters to reduce the columns returned.

populating select dropdowns dependent on change event

Hi I'm nearly finished with my small task of populating select dropdowns then outputting a relevant number. The select a company etc works.
Here's my JSFiddle: http://jsfiddle.net/3MK3D/1/
I need to now generate the appropriate companies in the select dropdown dependent on which sector is selected. I've created a new javascript array for personal companies.
I've thought of maybe doing something like this and passing the correct variable to the appropriate function but not really sure how to implement it:
var companiesArray;
$('#sector').on('change', function(e){
var optionSelected = $("option:selected", this);
var sectorSelected = this.value;
if( sectorSelected == 'business' ) {
companiesArray = 'insurancecompanies';
} else if( sectorSelected == 'personal' ) {
companiesArray = 'personalcompanies';
} else {
}
});
There is probably a better way?

Use a companies object that has your sector select values as keys to the relevant arrays:
var companies = {
business : [
{
name : 'Advent',
property : '01242 674 674',
fleet : '',
motortrade : ''
},
{
name : 'Allianz',
property : '0844 412 9988',
fleet : '0800 587 5858',
motortrade : ''
},
// other insurance companies
],
personal : [
// personal companies
]
}
Then:
$('#sector').on('change', function(e){
var optionSelected = $("option:selected", this);
var sectorSelected = this.value;
var companyArray = companies[sectorSelected];
// iterate over companyArray and create the relevant option objects for #company
});