Cannot Get Cascading Drop-Downs to Filter

Dec 10, 2013 at 11:13 PM
Hi there,

I feel a bit silly asking what I am about to ask as others seem to be able to get it to work but I simply cannot. For my second attempt, I created a brand new site collection to test in. I have created three lists as follows:

I am using SP 2010 Foundation.

List 1 - "Continents" - one single line column called "Continent"
List 2 - "Countries" - one lookup column (to Continents list) called "Continent" and one single line column called "Country"
List 3 - "Location" - lookup column (to Continents list) called "Continent" and lookup column (to Countries list) called "Countries"

So, my understanding is that List 2 is my "Relationship List" and List 3 is where the filtering should take place. So, in List 3, in SPD, I create a New Item Form. Opened that in IE and then Edit Page and added a CEWP below the New Form. I have created a .txt file with my code, saved in Shared Documents library and then pasted the path into the Content Link in the CEWP. Along with trying other versions, I am referencing the latest .js files that I downloaded from this site and saved to Share Documents library.

Below is my code:
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jquery.SPServices-2013.01.js"></script>
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jquery.SPServices-2013.01.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
        relationshipList: "Countries",
        relationshipListParentColumn: "Country",
        relationshipListChildColumn: "Continent",
        parentColumn: "Country",
        childColumn: "Continent"
    });
});
</script>
I know I am missing something obvious but I can't see it. Any help would be most appreciated :-)

Kelly
Dec 11, 2013 at 12:59 AM
Sorry, I pasted the wrong script in - although the below does not work either...
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jquery.SPServices-2013.01.js"></script>
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jquery.SPServices-2013.01.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
        relationshipList: "Countries",
        relationshipListParentColumn: "Continent",
        relationshipListChildColumn: "Country",
        parentColumn: "Continent",
        childColumn: "Country"
    });
});
</script>
Coordinator
Dec 11, 2013 at 2:28 AM
Edited Dec 11, 2013 at 4:05 AM
Based on what you've described, I think the call should look like this:
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
        relationshipList: "Countries",
        relationshipListParentColumn: "Continent",
        relationshipListChildColumn: "Title",
        parentColumn: "Continent",
        childColumn: "Country"
  });
});
If your Countries list has only two columns, then the column which holds the Country values is the Title column. The function requires the InternalName for the columns in the relationshipList.

Let me know if this works. We'll get it running...

M.
Dec 11, 2013 at 2:42 AM
Hi Marc,

Thanks for replying :-) Sorry, I should have mentioned, I have left the Title column and it is not being used. I created new columns for each of the ones listed above.

I had originally tried this solution - https://spcd.codeplex.com/ - but I could not get multiple filters to work. But, because I did get this to work, I know I'm setting up the CEWP properly so I don't think that is the issue.
Coordinator
Dec 11, 2013 at 2:50 AM
Hmm. I didn't know spcd, or at least I haven't seen it in a long time.

So what error(s) are you getting? Have you tried setting debug: true?

M.
Dec 11, 2013 at 3:18 AM
Okay, so I added debug: true underneath the childColumn entry. I added a new item but didn't see any errors. Where should the error come up?
Coordinator
Dec 11, 2013 at 4:07 AM
Edited Dec 11, 2013 at 4:08 AM
I just realized that you're not referencing jQuery. You should only use one reference to SPServices, either the minified or non-minified file; you're referencing both and not jQuery:
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jQuery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jquery.SPServices-2013.01.min.js"></script>
Take a look at the instructions at the bottom of the main documentation page:
https://spservices.codeplex.com/documentation

M.
Dec 11, 2013 at 4:43 AM
Good spotting... I had read over those instructions but not well enough. So I went here - http://code.jquery.com/jquery-1.10.2.js - and saved the uncompressed version to my Shared Documents folder - is that right? Then changed my script to:-
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jQuery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/Shared%20Documents/jquery.SPServices-2013.01.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
        relationshipList: "Countries",
        relationshipListParentColumn: "Continent",
        relationshipListChildColumn: "Country",
        parentColumn: "Continent",
        childColumn: "Country"
        debug: true
    });
});
</script>
Still won't work :-(
Coordinator
Dec 11, 2013 at 1:23 PM
It seems as though you have all the right bits in place. Did you try the steps in this post?
http://sympmarc.com/2011/07/08/adding-jqueryspservices-to-a-sharepoint-page-step-one-always/

M.
Dec 11, 2013 at 10:22 PM
Okay so I added the alert lines to the code but nothing happens. I'm assuming I should be getting these alerts pop up when I open a new item?

So for some reason, the page is not detecting the CEWP or the link within it? I tried removing the Link in the Web part and just adding the code to the HTML option in the ribbon but nothing again.... I downloaded your SPServices scripts again just in case something went wrong the first time.
<script language="javascript" type="text/javascript" src="/depts/testing/Shared%20Documents/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/depts/testing/Shared%20Documents/jquery.SPServices-2013.01.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
alert ("testing alert");
alert($().SPServices.SPGetCurrentSite()); 
$().SPServices.SPCascadeDropdowns({
        relationshipList: "Countries",
        relationshipListParentColumn: "Continent",
        relationshipListChildColumn: "Country",
        parentColumn: "Continent",
        childColumn: "Country"
        debug: true
    });
});
</script>
Dec 12, 2013 at 12:07 AM
Sorry Marc, I had turned debug to true but I didn't know how view the errors.... (I know nothing about jquery) So, worked out how to view it in the browser and I was getting an error missing } after property list. Doh, if you look above, I have omitted a comma after childColumn.

And now it works :-) Thanks for you persistence in helping me - really appreciate it.
Coordinator
Dec 12, 2013 at 3:41 PM
Whew. Glad you got there!

M.