How to correctly load SP JS resources in a code snippet

Question

I have inserted the following javascript into a masterpage, however I am getting this error:

Uncaught TypeError: undefined is not a function

I believe that this might be because the SP JS files are not correctly loaded at that time, I still see them on F12 after the page finishes loading.

http://screencast.com/t/Akb7KKpn5p2

My code is as follows:

// A $( document ).ready() block.
$(document).ready(function() {
    console.log( "ready!" );
    var path = document.location.href
    console.log(path);
    var clientContext = new SP.ClientContext('http://myservername/centrodeprocesos/procesos');
    var oList = clientContext.get_web().get_lists().getByTitle('ImagenesDeFondo');     
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    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 += '\nID: ' + oListItem.get_id() + 
            '\nTitle: ' + oListItem.get_item('Title') + 
            '\nBody: ' + oListItem.get_item('Body');
    }
    alert(listItemInfo.toString());
}

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

check this one if resolve the issue: blog.qumsieh.ca/2013/10/30/… — Waqas Sarwar MVP
– Waqas Sarwar MVP ♦, Commented Feb 17, 2015 at 22:48
Try comment 'console.log( "ready!" );' - it is unsupported in some IE — Gennady G
– Gennady G, Commented Feb 17, 2015 at 22:57

George Andrews · Accepted Answer · 2015-02-18 08:10:46Z

1

You need to wrap your $(document).ready call with a function with some name (let it be Func1) and then call it this way:

ExecuteOrDelayUntilScriptLoaded(Func1, 'sp.js');

answered Feb 18, 2015 at 8:10

George Andrews

117 bronze badges

Add a comment |

Community · Accepted Answer · 2017-04-13 12:41:26Z

Try to look at this answer: Answer to - SP.ClientContext is always “undefined” in JSLink functions

Relatively to Your "How to correctly load SP JS resources" question - saw answer here, but cannot google it right now.

The answer was that - the most correctly way to load JS snippet on masterpage is to use user control, technique is described here: Adding jQuery to Every Page in SharePoint with Delegate Controls

SharePoint Mastergpages have "AdditionalPageHead" section. Using User Control from WSP we can deploy additional code and load it on every masterpage. It is better becouse You don't modify original masterpage directly(it is not recommended), and have abiblity to turn on or off feature on web/site/farm scopes. It is described by the link

Ronak Patel · Accepted Answer · 2015-02-18 09:07:15Z

Try to load 'sp.js' file on back-end code like this:

    protected override void Render(System.Web.UI.HtmlTextWriter writer)
            {
                writer.Write(BindScript("~site/Style Library/script/sp.js", true));
                writer.Write(BindScript("~site/Style Library/script/sp.core.js", true));
                writer.Write(BindScript("~site/Style Library/script/SP.Runtime.js", true));

                base.Render(writer);
            }

    private string BindScript(string scriptUrl, bool PickFromSiteCollection)
        {
            if (PickFromSiteCollection)
                scriptUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, scriptUrl);
            else
                scriptUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, scriptUrl);

            return string.Format(@"<script type=""text/javascript"" src=""{0}""></script>", scriptUrl);
        }

Stack Exchange Network

How to correctly load SP JS resources in a code snippet

3 Answers 3

Your Answer

Linked

Hot Network Questions

How to correctly load SP JS resources in a code snippet

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions