In Sharepoint 2013 online , within $(document).ready(function(){}), sp.js does not get loaded since I do not get clientcontext object

Question

I am trying to display list items on a popup triggered by a button...

   <script type="text/javascript">
   $(document).ready(function()
           {  
                $( "#divList" ).dialog({ autoOpen: false });     
    $( "#btnGetList" ).click(function() 
     { alert("inside btngetList"); 
   var context = SP.ClientContext.get_current();// new SP.ClientContext;
       var list = context.get_web().get_lists().getByTitle("listname");
       var query = SP.CamlQuery.createAllItemsQuery();
       var allList = list.getItems(query);
       context.load(allList );
   context.executeQueryAsync(Function.createDelegate (this,getDocsAllItemsSuccess),
                                            Function.createDelegate(this, getDocsAllItemsFailure));

     Function getDocsAllItemsSuccess(sender, args) {
                                                                                        var listEnumerator = allList.getEnumerator();
                                                                                                                             while (listEnumerator.moveNext()) {
                                                                                        $('#divGetList').append(listEnumerator.get_current().get_item("FileLeafRef") + '<br />');
                                                                                                                                    }
                                                                                                                            $("#divGetList").dialog( "open" );
                                                                                            }

                                            function getDocsAllItemsFailure(sender, args)
     {   alert('Failed to get items.'+args.get_message);  
                                            }

    references used are:

   <script type="text/javascript"    src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
  <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
 <script type="text/javascript" src="/_layouts/15/sp.js"></script>
 <script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>

since these do not work, I use

<script type="text/javascript" src="{URL}/Style% 
  20Library/Scripts/jquery-1.8.3.min.js">

When I use this I can manipulate controls using jquery. Only getting listitems is a problem, which is why I think sp.js file is not loaded Aside, I am able to get site URL by putting the code without $(document).ready(function(){}) . Please help.....

Answer 1

Instead of $(document).ready() use

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
    // Your code goes here
});

$(document).ready() does not ensure that ClientContext is loaded.

Answer 2

I would rather just use CDN for the Sp.Js, because I had the same issue as you trying to get it to load.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script> //Call Jquery SPServices