Using SPServices for SharePoint Online

Nov 21, 2013 at 2:08 AM
Hi all,

Could you point me to any documentation about using spservices in SharePoint Online?

My specific question (apologies if this is already posted elsewhere) is the proper way to use the library in this environment. So far, I have done the following:
  1. Added jquery-1.10.2.min.js and jquery.SPServices-2013.01.min.js to a document library.
  2. Using a Script Editor web part I am performing a simple test.
<div style="background-color:#a80000;color:#fff;" id="currentUserDIV">Your name is: </div>

<script>
function goGetCurrentUserForTasks() {
    userName = $().SPServices.SPGetCurrentUser({
        fieldName: "Title"
    });
    // Add Username to tasks
    $("#currentUserDIV").append(userName);
}
goGetCurrentUserForTasks() ;
</script>
  1. It works just fine, while in edit mode. However, when I save/publish the page the spservices call (the username in this case) disappears.
Many thanks for the advice. Spservices is a great library! I have used it quite a bit in the on-premise version of SharePoint. I'm just trying to learn the proper way to use it in the hosted version.
Nov 21, 2013 at 2:09 AM
P.S. I neglected to paste in the two lines where I load the the JS from the document library.
<script src="https://<hostname>.sharepoint.com/teams/multimedia/Home2014Assets/jquery-1.10.2.min.js"></script>
<script src="https://<hostname>.sharepoint.com/teams/multimedia/Home2014Assets/jquery.SPServices-2013.01.min.js"></script>
Coordinator
Nov 21, 2013 at 7:59 PM
mrentropy:

SPServices works exactly the some in SPO as it does on premises. I think your issue is that you aren't wrapping your script in $(document).ready(), so it may be running before the elements are in the DOM.

M.
Nov 21, 2013 at 8:50 PM
Edited Nov 21, 2013 at 8:51 PM
Hi Marc,

Thanks so much for the response. I'm sure I'm overlooking something very simple, but even adding the document.ready doesn't seem to solve the issue. Here is a screen shot of the code example when editing.

Image

Here is the same page after it has been saved/checked in.

Image

Here is my example with the document.ready added.

Are there any permission settings that might be affecting me?
<script src="https://<hostname>.sharepoint.com/teams/multimedia/Home2014Assets/jquery-1.10.2.min.js"></script>
<script src="https://<hostname>.sharepoint.com/teams/multimedia/Home2014Assets/jquery.SPServices-2013.01.min.js"></script>

<div style="background-color:#a80000;color:#fff;" id="currentUserDIV">Your name is: </div>

<script>
function goGetCurrentUserForTasks() {
    userName = $().SPServices.SPGetCurrentUser({
        fieldName: "Title"
    });
    // Add Username to tasks
    $("#currentUserDIV").append(userName);
}

// Check if dom is loaded
$(document).ready(function() {
    goGetCurrentUserForTasks();
}); // End document ready
</script>
Thanks again,
Carl
Nov 22, 2013 at 1:53 AM
I solved the issue and thought I'd post the answer in case anyone else is puzzled by this behavior. SharePoint's "Minimal Download Strategy" was enabled on our site which was causing the script not to execute. See this article for more information.

http://thebitsthatbyte.com/jquery-in-sharepoint-2013-script-editor-web-part-not-executing-when-minimal-download-strategy-mds-enabled/

Thanks again for SPServices!
Marked as answer by mrentropy on 11/21/2013 at 5:53 PM