We Keep Coding

Angular ng-href javascript function

I need to set href to Javascript function. When I click it, nothing happens, but when I hover over link it displays:
unsafe:javascript:ShowManagementdDiv('65','a60f2a16-267e-418d-bb14-d88de3a33b5f','0');
The table data is built dynamically in my angular controller:
contractorService.getemrtabulation()
.success(function (data) {
$scope.emrcolumns = data.EMRTabulationColumns;
repeatRow = '<td align="center" valign="middle" style="background-color:Transparent;border-color:Black;border-width:1px;border-style:Solid;padding:5px;white-space:nowrap;"><a class="IncidentColumn" ng-href={{e.hyper}}>Click Here to Review EMR Document</a></td>';
firstRow = '<td>EMR Document</td>';
for (i = 0; i < $scope.emrcolumns.length; i++) {
repeatRow = repeatRow + '<td>{{e.' + $scope.emrcolumns[i].vchAssociatedDetailColumn + '}}</td>';
firstRow = firstRow + '<td>' + $scope.emrcolumns[i].vchColumnHeaderText + '</td>'
}
firstRow = '<tr>' + firstRow + '</tr>';
$scope.emrdetail = data.EMRTabulationDetail;
angular.forEach($scope.emrdetail, function (value, key) {
value.dteExpirationDate = convertDate(value.dteExpirationDate);
value.dteDateCompleted = convertDate(value.dteDateCompleted);
value.dteEffectiveDate = convertDate(value.dteEffectiveDate);
});
angular.forEach($scope.emrdetail, function (value, key) {
contractorService.getimage(value.EMRDetailID, value.dteEffectiveDate)
.success(function (data) {
$scope.emrdetail[key].hyper = data;
});
});
$scope.emrTable = '<table>' + firstRow + '<tr style="text-align:center" ng-repeat="e in emrdetail">' + repeatRow + '</tr></table>';
firstRow = '';
repeatRow = '';
});
I use this to call it in the html:
<div class="row row-relative">
<div class="col-md-12">
<div>{{emrQuestion.EMRTabulationID}}{{emrQuestion.vchTabulationSequenceLetter}}. {{emrQuestion.vchClassPropertyName}}</div><br />
<div dynamic="emrTable"></div><br /><br />
</div>
</div>
The function is in a <script> tag on the page:
function ShowManagementdDiv(imageTypeID, Guid, selectedYear) {
var TargetWidth = 950;
var TargetHeight = 670;
bModalPopupActivated = true; window.clearTimeout(t);
DisplayModalDivExitWithClickSave('box', TargetWidth, TargetHeight, 'http://localhost/PECIMS/DocumentManagement.aspx?eid=' + imageTypeID + '&Edx=' + Guid + '&y=' + selectedYear, 'Close', 'Click to close window. ');
}
Here is the C# code that creates the link:
public async Task<ActionResult> GetImage(int emrDetailID, string docDate)
{
var columns = await CommonClient.GetEMRTabulationColumnsForClusterID(876);
var getcolumn = columns.FirstOrDefault(c => c.EMRTabulationColumnID == 1);
int? imageTypeId = getcolumn.EdataFileImageTypeID;
UserInfo.intDocumentManagementMode = 13;
UserInfo.intPerspectiveCompanyID = UserInfo.intMajorID;
UserInfo.intPerspectiveCompanyTypeID = UserInfo.intMajorCompanyType;
UserInfo.SegmentID = emrDetailID;
UserInfo.dteDocumentDate = DateTime.Parse(docDate);
var token = await CompanyClient.SaveRecallData(UserInfo);
string strPathAndQuery = Request.Url.PathAndQuery;
string strUrl = Request.Url.AbsoluteUri.Replace(strPathAndQuery, "/");
string LinkToImagesApp = "";
LinkToImagesApp = AppendProtocolAndHostHeadersPathToWebConfigPath("LinkToImagesApplication");
string javaLink = strUrl + LinkToImagesApp + "/DocumentManagement.aspx?eid=";
string docLink;
string address = "javascript:ShowManagementdDiv('" + imageTypeId + "','" + token + "','0');";
return Json(address, JsonRequestBehavior.AllowGet);
}
I am assuming that the issue is that Angular deems the Javascript as "unsafe". Any assistance is greatly appreciated.

In order to use the Javascript function in my href I had to add the following to my app.js file:
app.config([
'$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|javascript):/);
}
]);

javascript loop does not write to number input

I have made a loop to several fields in a dynamic table row to write and retrieve data from localstorage.
It first saves data on localstore, resets the table to 0 rows and for retrieval of data, the table rows will be recreated it and load data there. The problem is that when the textbox is of type "number", the field appears blank. It loads data on the respective fields as I tried it on the number field's placeholder values just to see data coming.
This only happens on the looped fields in the dynamic rows of the table. Number inputs from the fixed rows can load properly.
The ID's I used on the loop where correct and prints
document.getElementById('4-4-1').value = 2"
Where
4-4-1 = x-y-z
x = tableNumber
y = FieldNumber
z = RowNumber
But when I pasted document.getElementById('4-4-1').value again on the console, it returns nothing. (Though a placeholder of '2' appears on the field).
I also tried changing the value with the same line in the console and it works properly.
Why is it that it is not working on number fields during the loop?
Tried it on Chrome, Firefox. Aiming for Android 4.2 web view.
The Store Loop
function saveRecordNow() {
var rec = {};
rec[0] = document.getElementById('data0').value
rec[1] = document.getElementById('data1').value
rec[2] = document.getElementById('otherdata').value
rec[3] = document.getElementById('foo').value
...
...
var tblSpaceQtr = document.getElementById('tblSpaceQtr');
rowCnt = tblSpaceQtr.getElementsByTagName("tr").length - 11;
//there are 11 fixed rows on the table, and is not included on the count
//var page4Data = '';
for(x=1; x <= rowCnt; x++) {
page4Data += document.getElementById("4-1-"+x).value + ', '+
document.getElementById("4-2-"+x).value + ', '+
document.getElementById("4-3-"+x).value + ', '+
document.getElementById("4-4-"+x).value + ', '+
document.getElementById("4-5-"+x).value + ', '+
document.getElementById("4-6-"+x).value + ', '+
document.getElementById("4-7-"+x).value + ', '+
document.getElementById("4-8-"+x).value + ', '+
document.getElementById("4-9-"+x).value + ', '+
document.getElementById("4-10-"+x).value + ', '+
document.getElementById("4-11-"+x).value + ', '+
document.getElementById("4-12-"+x).value + ', '+
document.getElementById("4-13-"+x).value + ', '+
document.getElementById("4-14-"+x).value + ', '+
document.getElementById("4-15-"+x).value + ', '+
document.getElementById("4-16-"+x).value + ', '+
document.getElementById("4-17-"+x).value + ', '+
document.getElementById("4-18-"+x).value + ', '+
document.getElementById("4-19-"+x).value + ', '+
document.getElementById("4-20-"+x).value + ', '+
document.getElementById("4-21-"+x).value + ', '+
document.getElementById("4-22-"+x).value + ', '+
document.getElementById("4-23-"+x).value + '||| ';
//console.log("data from 4-1-"+x);
}
page4Data.substring(0, page4Data.length - 2); //remove end comma
//alert()
rec[681] = page4Data;
...
}
The retrieval loop
function loadRecord(n) {
var getVar = JSON.parse(localStorage.getItem(n));
document.getElementById('id').value = n;
numCells = document.getElementById('nbcells');
document.getElementById('data0').value = getVar[0];
document.getElementById('data1').value = getVar[1];
document.getElementById('otherdata').value = getVar[2];
document.getElementById('foo').value = getVar[3];
document.getElementById('foo2').value = getVar[4];
document.getElementById('foo3').value = getVar[5];
...
initTable(numCells, numCells.value)
var pg4Data = [],
pg4RowData = [],
pg4Data = getVar[681].split('|||');
page4Data = getVar[681]
//getVar[681] from JSON.parse(localStore['source']);
//having a csv separated by '|||' per row
for(x=1; x < pg4Data.length; x++) {
pg4RowData = pg4Data[x-1].split(',');
document.getElementById("4-1-"+x).value = pg4RowData[0];
document.getElementById("4-2-"+x).value = pg4RowData[1];
document.getElementById("4-3-"+x).value = pg4RowData[2];
document.getElementById("4-4-"+x).value = pg4RowData[3];
console.log("document.getElementById('4-4-"+x+"').value =" +pg4RowData[3]);
document.getElementById("4-4-"+x).placeholder = pg4RowData[3];
//document.getElementById("4-4-"+x).setAttribute('value', pg4RowData[3]);
//document.getElementById("4-5-"+x).value = pg4RowData[4];
document.getElementById("4-5-"+x).value = pg4RowData[4];
document.getElementById("4-5-"+x).placeholder = pg4RowData[4];
document.getElementById("4-6-"+x).value = pg4RowData[5];
document.getElementById("4-6-"+x).placeholder = pg4RowData[5];
document.getElementById("4-7-"+x).value = pg4RowData[6];
document.getElementById("4-7-"+x).placeholder = pg4RowData[6];
document.getElementById("4-8-"+x).value = pg4RowData[7];
document.getElementById("4-8-"+x).placeholder = pg4RowData[7];
document.getElementById("4-9-"+x).value = pg4RowData[8];
document.getElementById("4-9-"+x).placeholder = pg4RowData[8];
document.getElementById("4-10-"+x).value = pg4RowData[9];
document.getElementById("4-11-"+x).value = pg4RowData[10];
document.getElementById("4-12-"+x).value = pg4RowData[11];
document.getElementById("4-13-"+x).value = pg4RowData[12];
document.getElementById("4-14-"+x).value = pg4RowData[13];
document.getElementById("4-15-"+x).value = pg4RowData[14];
document.getElementById("4-16-"+x).value = pg4RowData[15];
document.getElementById("4-17-"+x).value = pg4RowData[16];
document.getElementById("4-18-"+x).value = pg4RowData[17];
document.getElementById("4-19-"+x).value = pg4RowData[18];
document.getElementById("4-20-"+x).value = pg4RowData[19];
document.getElementById("4-21-"+x).value = pg4RowData[20];
document.getElementById("4-22-"+x).value = pg4RowData[21];
document.getElementById("4-23-"+x).value = pg4RowData[22];
}
...
}

The element's IDs, class names, and variables in JavaScript cannot start with a number! Please prefix the values with a character and then try it again.
for(x=1; x < pg4Data.length; x++) {
pg4RowData = pg4Data[x-1].split(',');
document.getElementById("s-4-1-"+x).value = pg4RowData[0];
document.getElementById("s-4-2-"+x).value = pg4RowData[1];
document.getElementById("s-4-3-"+x).value = pg4RowData[2];
document.getElementById("s-4-4-"+x).value = pg4RowData[3];

Javascript DOM manipulation

Hello, is there any way when my script outputs an image can i make it output a bootstrap row instead? I need 3 rows and 4 columns in each:
<div class="row">
<div class="col-md-3">
// IMAGE HERE
</div>
<div class="col-md-3">
// IMAGE HERE
</div>
<div class="col-md-3">
// IMAGE HERE
</div>
</div>
I need there to be 4 rows holding 3 images per row which I am struggling to get my head around. Here is my javascript code so far, if anyone could help it would be appreciated.
function displayContent() {
document.getElementById("findCar").onsubmit = function() {
var registration = document.getElementById("regPlate").value,
reference = document.getElementById("stockRef").value;
var regArray = registration.split(''),
refArray = reference.split(''),
referenceNinth = refArray[10];
var reverseReg = regArray.reverse();
var obfuscated = [];
var obf_index = 0;
for(i=0; i<=6; i++) {
obfuscated[obf_index] = refArray[i];
obf_index++;
obfuscated[obf_index] = reverseReg[i];
obf_index++;
}
obfuscated.push(referenceNinth);
var obfuscatedString = obfuscated.join("");
var camera = [];
var cameraSize = "350";
var cam_index = 0;
for(i=0; i<=1; i++) {
if(i>0) cameraSize = "800";
camera[cam_index++] = cameraSize+"/f";
camera[cam_index++] = cameraSize+"/i";
camera[cam_index++] = cameraSize+"/6";
camera[cam_index++] = cameraSize+"/5";
camera[cam_index++] = cameraSize+"/4";
camera[cam_index++] = cameraSize+"/r";
}
for (i = 0; i <= 11; i++) {
var img = new Image();
img.src = "http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i];
document.body.appendChild(img);
}
return false;
};
}

You could build up an html string in your loop and then append using .innerHTML.
e.g. - replace your final for loop with something like:
var newHtml = '<div class="row">';
for (i = 0; i <= 11; i++) {
newHtml = newHtml + '<div class="col-md-3">' +
'<img src = "' +
'http://imagecache.arnoldclark.com/imageserver/' + obfuscatedString + '/' + camera[i] + '"></img>' +
'</div>';
}
newHtml = newHtml + '</div>';
document.getElementById("#IdOfElementToAppendTo").innerHTML = newHtml;

I need Javascript syntax and logic advice

I have a two part question. The first is that I tried to replace all of my document.write with innerHTML and now nothing generates on the page correctly. The second part of my question is that I can't figure out the logic on my toggleCurrent function so that I can hide show the currently displayed view. example - if the thumbnail view is visible I want to hide/show or if the full view is visible I want to hide/show that. http://jsfiddle.net/5M3k7/
//Creating generic Object
function Person(name,age,biog,thumb,char,bg,cider) {
this.fullName = name;
this.age = age;
this.biog = biog;
this.thumb = thumb;
this.char = char;
this.bg = bg;
this.cider = cider;
}
//Creating new Objects
var jay = new Person ("Jay Jones",24,"Story","img","guy","bg","Fleet",true);
var jai = new Person ("Jai Janes",23,"Story","img","gal","bg","Sleet",true);
var dan = new Person ("Dan Dones",19,"Story","img","guy","bg","Leet",true);
var den = new Person ("Den Danes",49,"Story","img","guy","bg","Treat",true);
var dun = new Person ("Dun Dunes",20,"Story","img","guy","bg","Meet",true);
var vim = new Person ("Vim Vanes",22,"Story","img","guy","bg","Meat",true);
//Defining arrays
var characters = [jay, jai, dan, den, dun, vim];
//For loop goes though character array and prints it out.
var thumbs = function() {
var full = document.getElementById('full');
var cLength = characters.length;
for (var i = 0; i < cLength; i++){
full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
}
return;
};
var full = function() {
var thumb = document.getElementById('fullthumb');
var cLength = characters.length;
for (var i = 0; i < cLength; i++){
thumb.innerHTML = '<div class="fullwrap"><div class="bg"><div class="fullcont">Name: '
+ characters[i].fullName + '<br/> Age:' + characters[i].age + '<br/>Cider:' + characters[i].cider + '<div class="char"></div></div></div></div>';
}
return;
};
//Toggle Function
function toggleMenuDiv() {
var full = document.getElementById('full');
var thumb = document.getElementById('fullthumb');
var butt = document.getElementById('button');
if (full.style.display == 'none') {
full.style.display = 'block';
thumb.style.display = 'none';
butt.innerHTML = 'THUMB VIEW<span class="arrow-e"></span>';
}
else {
full.style.display = 'none';
thumb.style.display = 'block';
butt.innerHTML = 'FULL VIEW<span class="arrow-e"></span>';
}
}
//Toggle Function
function toggleCurrent() {
var chng = document.getElementById('change');
var thumb = document.getElementById('fullthumb');
var full = document.getElementById('full');
while (full.style.display == 'none')
{
if(thumb.style.display == 'block') {
chng.innerHTML = 'HIDE<span class="arrow-n"></span>';
}else{
thumb.style.display = 'none';
chng.innerHTML = 'SHOW<span class="arrow-s"></span>';
}
}
}

Because you keep overriding the last thing entered in.
full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
You are need to append to the innerHTML
full.innerHTML = full.innerHTML + '<div class="...

For Loop - passing dynamic variables to a click function

I have a basic for loop to create a gallery of thumbnail images:
//code to query spreadsheet...data returned as 'rows'
for (var i = 0; i<rows.length; i++){
im = rows[i][0];
n = rows[i][1];
d = rows[i][2];
c = rows[i][3];
$('#frame').append('<div class = box><img height = 290 src = ' + im + '>');
}
For each image there is additional information (in other columns of the spread sheet) - this is also returned as 'rows' as per the above.
Next, there is a click function to display a larger image:
$('#frame').on('click', 'img', function() {
var s = this.src.replace(/.jpg/, '');
$('#show').append('<img src = ' + s + 'L.jpg><div id = details><strong>' + n + '</strong><br>' + d + '<br><span class = status>' + c +'</span></div>');
});
The aim of the last bit is to display the additional information from the same row as the clicked image - and obviously it won't work as written. How do I pass the value of [i] for the clicked image to the click function to get the additional data from the same row[i] as the clicked image?
Thanks.

This code may work try this
for(var i = 0; i<rows.length; i++){
im = rows[i][0];
$('#frame').append('<div class = "box"> <img height =290 src = "'+ im +
'" onclick="clickImg('+i+')" >');
}
function clickImg(i){
im = rows[i][0];
n = rows[i][1];
d = rows[i][2];
c = rows[i][3];
var s = im.replace(/.jpg/, '');
$('#show').append('<img src = "' + s + 'L.jpg" /> <div id = details><strong>' + n
+ '</strong> <br>'+ d +'<br> <span class = "status"> ' + c +' </span> </div>');
}

Try this:
var im;
for (var i = 0; i<rows.length; i++){
im = rows[i][0];
$('#frame').append('<div class = box><img id = ' + i + ' height = 290 src = ' + im + '>');
}
$('#frame').on('click', 'img', function() {
var i = this.id;
n = rows[i][1];
d = rows[i][2];
c = rows[i][3];
var s = im.replace(/.jpg/, '');
$('#show').append('<img src = "' + s + 'L.jpg" /> <div id = details><strong>' + n + '</strong> <br>'+ d +'<br> <span class = "status"> ' + c +' </span> </div>');