Use SP.SOD.executeFunc in SharePoint Online Add-In

Question

I want to use something like the following in a SharePoint Online add-in to delay the firing of resetPage():

$(document).ready(function () {
  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
      resetPage();
  });
}); //  document ready

but get the error "Uncaught ReferenceError: SP is not defined(…)"

What reference do I need or should I use another approach?

Answer 1

Uncaught ReferenceError: SP is not defined means the SP.JS is not loaded properly, to load it Try to format the code as the following :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script>

   $(document).ready(function(){
        var scriptbase = "https://<sharepoint online site url>" + "/_layouts/15/";
    //Do not change the order, scripts should load by order.  
     $.getScript(scriptbase + "init.js",
            function () {
                $.getScript(scriptbase + "SP.Runtime.js",
                   function () {
                $.getScript(scriptbase + "SP.js", execOperation);
              });
          });
           });



function execOperation() {
  // **add your code**
 context.executeQueryAsync(onSuccess, onFail);
}

function onSuccess() {

}

function onFail(sender, args) {
    alert('Error:' + args.get_message());
}
</script>

Answer 2

I used include all the requires jS as per the below sequence and there by I was able to include the SP.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/_layouts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/_layouts/sp.core.js" type="text/javascript"></script>
    <script src="/_layouts/sp.runtime.js" type="text/javascript"></script>
    <script src="/_layouts/sp.js" type="text/javascript"></script>