Uncaught TypeError: Cannot read property 'SPCascadeDropdowns' of undefined

Question

I am trying to implement cascading so I have loaded two files.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js"></script>

But I am getting the error as

Uncaught TypeError: Cannot read property 'SPCascadeDropdowns' of undefined

in below code

$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "Teams%20List",
    relationshipListParentColumn: "Team_x0020_Name",
    relationshipListChildColumn: "Team_x0020_Member_x0020_Name",
     parentColumn: "Team",
    childColumn: "Subsystem_x0020_Owner",
    debug: true
  });  
});

Answer 1

Eric Alexander is right on both of his points, but I don't think that's why you're getting the error that SPServices is undefined.

Is jQuery getting loaded somewhere else on the page?

I have seen this happen when there's another link to load jQuery somewhere lower on the page than the link to SPServices. Then jQuery re-loads itself and loses the SPServices extension, and then $().SPServices becomes undefined.

---

Ok, so as Eric pointed out in the comments, if you can't move the other reference to jQuery to be above your reference to SPServices (and remove your reference to jQuery), you can alias your jQuery and use SPServices on your alias. I just tested this and it works:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js"></script>

<script type="text/javascript">

var myJQ = jQuery.noConflict(true);

myJQ(document).ready(function(){
    alert( myJQ.fn.jquery );
    alert( myJQ().SPServices.Version() );

    // you would put your cascading dropdowns in here, like:
    myJQ().SPServices.SPCascadeDropdowns({
        // options
    });
});

</script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 2

Two things I see:

1. You don't have to URL encode your list name, "Team List" is fine.
2. parentColumn and childColumn should be the name of your column on the form, not the internal/static name.