4

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
  });  
});

enter image description here

7

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>
  • I think u r right, jquery is loaded somewhere...what to do then? – KumarV Nov 17 '15 at 19:10
  • If it is already referenced elsewhere, then don't include it in yours, just reference spservices. – Eric Alexander Nov 17 '15 at 19:15
  • Can you move the other reference? In my case, the other link to jQuery was at the bottom of a custom master page, which I could edit, so I moved it to the top of the master page and took out my link to jQuery that was next to the link to SPServices. If you are not in a position where you can move the other reference, maybe you can use something like ExecuteOrDelayUntilScriptLoaded to wait for the other jQuery to load before you load SPServices? – Dylan Cristy Nov 17 '15 at 19:15
  • @EricAlexander, I think part of the problem is that the other jQuery reference is after the place where he is trying to load SPServices. If he just removes his ref to jQuery, there will be no jQuery loaded for SPServices to extend from when he tries to load SPServices. – Dylan Cristy Nov 17 '15 at 19:20
  • Ya that's true. – Eric Alexander Nov 17 '15 at 19:22
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.