I have a query below is my script :
<div style="text-align: left;">
<table id = "customListData" style="margin-top:-70px;" width="100%" align="right" cellspacing="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</style>
<style type="text/css">
<style type="text/css">
.hover_img a{position:relative;float:right;}
.hover_img a span {position:absolute;display:none;}
.hover_img a:hover span {display:block;}
.image
{
background-image:url('/sites/IMI/SiteAssets/b2.jpg');
background-size:100% 100%;
}
</style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ecm-qa/sites/IMI/SiteAssets/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){ExecuteOrDelayUntilScriptLoaded(DataInfo, "sp.js"); });
function DataInfo() {
this.clientContext1 = new SP.ClientContext.get_current();
var oListdata = clientContext1.get_web().get_lists().getByTitle('FAQ');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');
this.collListItemdata = oListdata.getItems(camlQuery);
clientContext1.load(
collListItemdata, 'Include(ID,Attachments,FileDirRef,Title,Description,HasUniqueRoleAssignments)'
);
clientContext1.executeQueryAsync(
Function.createDelegate(this, Succeeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function Succeeded(sender, args) {
document.getElementById('customListData').innerHTML = "" ;
var dataInfo = '';
var title = '';
var description = '';
var txtHTML = '';
var txtdescHTML = '';
TitleArray=new Array();
var TitleCount = 0;
DescriptionArray=new Array();
var DescriptionCount = 0;
var dataInfo = collListItemdata.getEnumerator()
while (dataInfo.moveNext()) {
var i = 0
var currentItem = dataInfo.get_current();
title = currentItem.get_item('Title');
TitleArray[TitleCount++] = title;
var ItemID = currentItem.get_item('ID');
var hasattachments = currentItem.get_item('Attachments');
if(hasattachments){
getAttachmentFiles(currentItem, ItemID);
}
else{
success([]);
}
//var filename = _spPageContextInfo.webAbsoluteUrl + "/Lists/FAQ/Attachments/" + ItemID;
//alert("The Attachment path would be :"+filename);
//attachmentFiles= filename.get_files();
//var testing = _spPageContextInfo.webAbsoluteUrl + "/Lists/FAQ/Attachments/" + ItemID + "/" + filename;
//alert("The filename is :" +attachmentFiles.get_serverRelativeUrl());
description = currentItem.get_item('Description');
DescriptionArray[DescriptionCount++]=description;
}
txtHTML = txtHTML + "<div style='margin-bottom: 50px;' width='100%'>";
txtHTML = txtHTML + "<label id='deptName' style=' font-size: 25px;' >FAQ </label> ";
txtHTML = txtHTML + "</div>";
txtHTML = txtHTML + "<table>";
for(var i = 0 ; i < TitleCount; i++)
{
txtHTML = txtHTML + "<tr>";
txtHTML = txtHTML + "<td ><li style='font-size:200%;margin-left:20px;'>";
var id = TitleArray[i];
id = id.replace(/\s/g,'');
txtHTML = txtHTML + "<div >";
if(title != '')
{
txtHTML = txtHTML + "<a title='"+ DescriptionArray[i] +"' id='"+id+"' style='font-Size:20px; ' href = '#' onclick=show('"+id+"') >" + TitleArray[i] + "</a>";
}
txtHTML = txtHTML + "<div id='desc_"+id+"' style='padding-bottom: 20px; font-size: 18px; border-bottom-width: 1px; border-bottom-style: solid; display: none; border-collapse: separate;' >";
if(description != '')
{
txtHTML = txtHTML + DescriptionArray[i];
txtHTML = txtHTML + "</div>";
}
txtHTML = txtHTML + "</li></td>";
txtHTML = txtHTML + "<div width='90'>";
txtHTML = txtHTML + "</div>";
txtHTML = txtHTML + "</tr>";
}
txtHTML = txtHTML + "</table>";
$('#customListData').append(txtHTML);
}
function getAttachmentFiles(listItem, itemID) {
var ctx = listItem.get_context();
//var attachmentFolderUrl = String.format('{0}/Attachments/{1}',listItem.get_fieldValues()['FileDirRef'],listItem.get_fieldValues()['ID']);
var folder = ctx.get_web().getFolderByServerRelativeUrl(_spPageContextInfo.webAbsoluteUrl + "/Lists/FAQ/Attachments/" + itemID);
var files = folder.get_files();
ctx.load(files);
ctx.executeQueryAsync(
function () {
this.attachmenturl = '';
this.attachmentname = '';
this.attachmenturl = files.get_serverRelativeUrl();
alert(this.attachmenturl);
this.attachmentname = files.get_name();
//success(attachmenturl, attachmentname);
},
Function.createDelegate(this, this.onQueryFailed));
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
function show(id)
{
var display = document.getElementById('desc_' + id).style.display;
if(display == 'none')
{
document.getElementById('desc_' + id).style.display="block";
document.getElementById(id).style.color="Orange";
}
else
{
document.getElementById('desc_' + id).style.display="none";
document.getElementById(id).style.color="#0072c6";
}
}
document.getElementById('DeltaPlaceHolderPageTitleInTitleArea').innerHTML= "<div style='text-align:left;'>Some Name</div>";
</script>
I have a custom list called "FAQ", which has six entries and has two columns : Title and Description
Each List item has exactly one attachment and currently there are 6 such List items
The title and description for each are working fine in HTML, but on trying to retrieve the Attachment URL and name I'm getting an error : Object doesn't support property or method 'get_serverRelativeUrl'
for the line :this.attachmenturl = files.get_serverRelativeUrl();
I would like to add the Attachment URL and Name just below the Description in an tag.
I read online that this is the only way to retrieve an attachment URL and Name using CSOm and unfortunately REST is not an option for me
Please help any inputs would be appreciated, I've spent the whole day today trying to figure out this error
