We have a Job Opportunities list in SharePoint Online. I then have a JQuery script to rollup the list items on our homepage.
In SharePoint edit mode the code works fine but soon as the page is published it doesn't display. We have referenced the JQuery library in the master page. I run a basic hello world test and that worked when published so I suspect its the code. MDS is switched off on the page but we added
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
to help with this.
Please could someone review the code and let me know why it might not be working? Any help would be most appreciated.
Thanks,
<style>
#divListItems {width: 320px; height: auto; background: #eeeeee; padding: 20px;}
.test {margin: 0px; font-family: arial; padding: 5px;}
</style>
<h1>People Opportunities</h1>
<br>
<div id="divListItems">
<br>
<script type="text/javascript">
$(function (){
SP.SOD.executeFunc('sp.js','SP.ClientContext',retrieveListItems);
});
function retrieveListItems() {
var clientContext = new SP.ClientContext();
var camlQuery = new SP.CamlQuery();
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onQuerySucceeded(sender,args) {
var listItemInfo ='';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItemInfo + =
'<div class="test">' + oListItem.get_item('Title') + '</div>'
listItemInfo +=
'<div class="test"><strong>Location:</strong>'+ oListItem.get_item('Location') + '</div>'
listItemInfo +=
'<div class="test"><strong>Recruiting Manager:</strong>'+ oListItem.get_item('RecruitingManager').get_lookupValue() + '</div>'
listItemInfo +=
'<div class="test"><strong>HR Contact:</strong>'+ oListItem.get_item('HRContact').get_lookupValue() + '</div>'
listItemInfo +=
'<div class="test"><strong>Closing Date:</strong>'+ oListItem.get_item('ClosingDate') + '</div><br>'
'<br />';
}
$("#divListItems").html(listItemInfo);
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
</script>
</div>
