I have a JavaScript page querying a SharePoint list. It's displaying the results on a HTML page. Now I need to display an image for each item. I've uploaded an image to a Library called Device Images and the copied the URL into a column called DeviceImage in the queried SharePoint list. So now I'm trying to get the image to display by building a string, but I'm pretty new to this so don't know the syntax.
The relevant lines are:
var imgDevicePicture = "";
var DeviceImage = item.Picture;
imgDevicePicture = "<p"> + DeviceImage + "</p>";
and where I think I need help:
$('#deviceimage').append(imgDeviceImage);
Full Javascript and HTML below
function getDeviceDetails() {
var txtTitle = "";
var txtOverview = "";
var txtAccessories = "";
var txtDevicetype = "";
var txtTypicalDeviceUsage ="";
var txtKnownSystemIssues ="";
var txtLifeCycles = "";
var txtTrafficlight = "";
var imgDevicePicture = "";
var tempLCS2 = "";
var query = "http://xxx/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices?$expand=LifeCycleStatus&Priority&$filter=Id eq " + window.DeviceId + "";
var call = $.ajax({
url: query,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$.each(data.d.results, function(index, item) {
var tempID = item.Id;
var tempTitle = item.Title;
var LifeCycleStart = item.DeviceAvailableFrom;
var LifeCycleStatus = item.LifeCycleStatusValue;
var DeviceOverView = item.Description;
var AccessDetails = item.Accessories;
var DeviceKind = item.Devicetype;
var Usage = item.TypicalUsage;
var DevicePriority = item.PriorityValue;
var DeviceImage = item.Picture;
txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
txtOverview = "<p>" + DeviceOverView + "</p>";
txtAccessories = "<p>" + AccessDetails + "</p>";
txtDevicetype = "<p>" + DeviceKind + "</p>";
txtTypicalDeviceUsage = "<p>" + Usage + "</p>";
txtTrafficlight = "<p>" + DevicePriority + "</p>";
imgDevicePicture = "<p"> + DeviceImage + "</p>";
});
$('#devicedetails').append($(txtTitle));
$('#deviceoverview').append($(txtOverview));
$('#devicekind').append(txtDevicetype);
$('#deviceacc').append(txtAccessories);
$('#deviceuse').append(txtTypicalDeviceUsage);
$('#devicestatus').append(txtTrafficlight);
$('#imageContainer').append("<img src='/sites/IT/SiteAssets/"+txtTrafficlight.replace(/<[^>]*>/g, '')+".png' />");
$('#deviceimage').append(imgDeviceImage);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving data: " + jqXHR.responseText);
});
}
HTML
<html xmlns:mso="urn:schemas-microsoft-com:office:office"
xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head>
<script src="/jquery-1.10.1.min.js"></script>
<script src="/it/SystemInventory/SiteAssets/scripts/moment.min.js"></script>
<script src="/sites/it/SystemInventory/SiteAssets/getDevices.js"></script>
<script
src="/sites/it/SystemInventory/SiteAssets/getDeviceDetails.js"></script>
<script
src="/sites/it/SystemInventory/SiteAssets/getDeviceKnownIssues.js"></script>
<script type="text/javascript">
function parseQueryString(queryString)
{
var params = {}, queries, temp, i, l;
queries = queryString.split("&");
for ( i = 0, l = queries.length; i < l; i++ ) {
temp = queries[i].split('=');
params[temp[0]] = temp[1];
}
return params;
}
$(document).ready(function(){
function getDeviceID() {
if(typeof parseQueryString === "function") {
if(window.location.href.indexOf("?") >= 0) {
var qs = parseQueryString(window.location.href.split("?")[1])
window.DeviceId = qs.did;
getDeviceDetails();
getDeviceKnownIssues();
}
}
}
getDeviceID();
getDevices();
});
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">ITDOCUMENTS-135-47</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">1d6007ea-9e58-4298-b2d6-
9196e2678ea3</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">http://collaboration-
dev.norgine.com/sites/it/SystemInventory/_layouts/DocIdRedir.aspx?
ID=ITDOCUMENTS-135-47, ITDOCUMENTS-135-47</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:16px;padding:10px
5px;border-style:solid;border-width:1px;overflow:hidden;word-
break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table>
<table class="tg">
<tr>
<td rowspan="3" class="tg-yw4l"><h2>Devices</h2>
<div id="devices"></div>
</td>
<td class="tg-yw4l"><h2>Devise Details</h2>
<div id="deviceimage">
<div id="devicedetails">
</div></td>
<td class="tg-yw4l"><h2>Specification</h2>
<div id="deviceoverview">
<div id="devicekind">
<div id="deviceimage">
</div></td>
</tr>
<tr>
<td class="tg-yw4l"><h2>Known Issues</h2>
<div id="knowntitle">
</div>
<input type=button
onClick="location.href=XXXX/it/SystemInventory/Lists/Knownissues/NewForm.aspx?Source=http%3A%2F%2Fcollaboration%2Ddev%2Enorgine%2Ecom%2Fsites%2Fit%2FSystemInventory%2FLists%2FKnownissues%2FAllItems%2Easpx&RootFolder='" value='Submit a known issue '>
</td>
<td class="tg-yw4l"><h2>Accessories </h2>
<div id="deviceacc"></div></td>
</tr>
<tr>
<td colspan="2" td class="tg-yw4l"><h2>Typical Usage</h2>
<div id="deviceuse"><//img id="light" class="red" src="red.gif">
</div></td>
<tr>
<td colspan="3" td class="tg-yw4l" width="100"><h2>Current Status</h2>
<div id="devicestatus">
<div id="imageContainer">
</div></td>
</table>
