1

One of the Projects I am working on, I am trying to display Sharepoint site name in a web part using JS Snippet dynamically but I can't get it to work, can someone please help me correct the code. Thanks in advance.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("retrieveWebSite");

function retrieveWebSite() {
   var clientContext = new SP.ClientContext(_spPageContextInfo.siteServerRelativeUrl);
   this.oWebsite = clientContext.get_web();
   clientContext.load(this.oWebsite);
   clientContext.executeQueryAsync(
      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
   alert('Title: ' + this.oWebsite.get_title());
    var title = this.oWebsite.get_title();
document.getElementById('title').innerHTML = title;

}

function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + 
      '\n' + args.get_stackTrace());
} 

</script>
<div id ="title"></div>
2

Looks to me like your script is executing before the default SharePoint JSOM libraries are loaded. I added these script tags just under your jquery script tags and it started working for me.

<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
2

Try using this instead of the _spBodyOnLoad function:

ExecuteOrDelayUntilScriptLoaded(retrieveWebSite, "sp.js");

Your code looks good. I agree with @Robin, I think it i sa synchronicity problem.

  • Hi LazoDev, thanks. I made the change exactly as you mentioned and it satrted working about half an hour ago but the Problem is , it prints the root site name, not the current subsite name that the web part is displayed. For example if the context is: http:// contoso.sharepoint.com/asset(subsite)/Plaza Junction(subsite),. then it displays contoso instead it should display Plaza junction and should be dynamic in nature. Is this doable? – mdevm Jun 12 '18 at 19:43
  • Use get_current instead of what you have. Change new SP.ClientContext(_spPageContextInfo.siteServerRelativeUrl) to new SP.ClientContext.get_current(); – Robin Jun 12 '18 at 19:52
  • Yes I tried that as well but still it returns Contoso and I don't understand why. – mdevm Jun 12 '18 at 19:55
  • Hi LazoDev, would you be able to help me how to get the current library name using JSOM, thanks in advance. – mdevm Jun 13 '18 at 16:08
2

After some research I was able to figure out an answer for the code.I had to change siteserverrelativeurl to webabsoluteurl and that read the current subsite. Hope this helps someone.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(retrieveWebSite, "sp.js");
});
function retrieveWebSite() {
   var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
   this.oWebsite = clientContext.get_web();
   clientContext.load(this.oWebsite);
   clientContext.executeQueryAsync(
      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
   //alert('Title: ' + this.oWebsite.get_title());
    var title = this.oWebsite.get_title();
//alert(title);
document.getElementById('title').innerHTML = title;

}

function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + 
      '\n' + args.get_stackTrace());
} 

</script>
</head>
<div id ="title"></div>
<style>
#title{
    font-size:25px;
    text-color:#2b512e;
    text-transform:uppercase;

}
</style>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.