This project has moved and is read-only. For the latest updates, please go here.

CascadingDropdown on SP2013

Dec 4, 2013 at 2:44 PM
I’m trying to replicate cascading dropdown function in SP2013 with just Region & State, but no luck. I checked the (IE9) debugger and I am seeing the the two references to SPServices 2013.01 and jQuery 1.10.2.min. I put this in a CEWP on the edit form of my library just to work out the kinks. No errors, but states do not filter. Heres the code:

$(document).ready(function() {

// Set up the cascade from Region to State
listName: “Locations”,
relationshipList: “States”,
relationshipListParentColumn: “Region”,
relationshipListChildColumn: “Title”,
relationshipListSortColumn: “Title”,
parentColumn: “Region”,
childColumn: “State”

Dec 4, 2013 at 2:49 PM
Are your Region and State columns in the Locations list both lookups?
Region -> lookup to Regions.Title
State -> lookup to States.Title

Dec 4, 2013 at 6:55 PM

That is correct. I can see the content of the lookups inthe form for both Region and State - it just not filtering state based on region.
Dec 4, 2013 at 11:02 PM
Try turning on debug mode. You said no errors, but are you sure about that?

Dec 13, 2013 at 3:39 PM

With debug enabled I get no IE9 window errors. With the Developer window open I do get a couple of warnings in the Script / Console pane, but these don't appear to be relevent:
HTML1113: Document mode restart from Quirks to IE9 Standards
EditForm.aspx?ID=1&Source=http . . . &ContentTypeId=0x01006AABF06344523E4DBEC0AD97DE435D97
SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
EditForm.aspx?ID=1&Source=http . . . &ContentTypeId=0x01006AABF06344523E4DBEC0AD97DE435D97

I also tried a script that we're using sucessfully on our MOSS 2007 SharePoint forms, but it doesn't work in SP2013 either.

Dec 13, 2013 at 3:53 PM
If you're not getting any script errors and you don't see a debug error from SPServices, then there must be something off in your data. What does the States list look like? It should be two columns (or more), where Title contains the name of the State and Region is a lookup column to Regions.Title.

Also, if your page is in the list's context, you don't need listName: “Locations”,

Dec 13, 2013 at 4:43 PM

Here's the details on the lists.



Dec 13, 2013 at 6:57 PM
That all looks OK. What about the data?

Dec 14, 2013 at 6:28 PM
Edited Dec 15, 2013 at 1:55 PM
I was just creating an identical setup in my Office365 instance, and I noticed that you have "curly" quotes around the text values in your code, like this: “Title” as opposed to "Title". That would throw an error, but it also could just be from the paste you did here. Worth a check.

Anyway, I figured out what the problem was. Suffice it to say that I was doing something dumb. Try 2013.02BETA1. It really should work this time, as I debugged it on exactly your situation.

Dec 16, 2013 at 11:05 PM

I checked the doubel-quotes and they are the standard type " " - I'm using Notepad so it filters most formatting quirks.
I also checked the data. Here is the States list that has the lookup to the Regions so you shold be able to tell both are fine:

I also tried the PServices-2013.02BETA2.js as you suggested - no change in the results though. I was rather looking forward to it working. I know we'll get there though.

Thanks and keep at it.
Dec 17, 2013 at 1:56 AM
Honestly, I set up EXACTLY what you have and it works for me. There must be something else we're not thinking of.

Can you make sure that SPServices-2013.02BETA2.js is the one that's loading?

Dec 26, 2013 at 3:19 PM
Edited Dec 26, 2013 at 3:22 PM

Checked the Script tab in the IE Dev tool and both are loading correctly. I changed from a CEWP to a Script Editor web part. I am now getting a syntax error (SCRIPT1002: Syntax error) at the bottom of the inserted script (see </DIV>). Heres the portion of code wrapped in the DIV:
<DIV class="ms-rte-embedcode ms-rte-embedwp"><script language="javascript" type="text/javascript" src="/sites/ecm/Resources/jQuery/jquery-1.10.2.min.js"></script> <script language="javascript" type="text/javascript" src="/sites/ecm/Resources/jQuery/jquery.SPServices-2013.02BETA2.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { alert("jQuery"); alert($().SPServices.SPGetCurrentSite()); // Set up the cascade from Region to State $().SPServices.SPCascadeDropdowns({ // listName: "Locations", relationshipList: "States", relationshipListParentColumn: "Region", relationshipListChildColumn: "Title", relationshipListSortColumn: "Title", parentColumn: "Region", childColumn: "State", debug: True }); }); </DIV> Thoughts?
Dec 26, 2013 at 3:33 PM
I don't see a closing <script> tag in what you're showing. Is that missing?

Dec 26, 2013 at 3:52 PM
marc, right you are. Added that in and now I'm getting a 'True' is undefinded. I suspect that's refering to the debug: True line. I removed the debug statement and now its working.


So I think I'll try this again using the CEWP and see how it behaves - in case that was the source of our troubles earlier.

Dec 27, 2013 at 3:38 PM
True shouldn't be capitalized. It's a reserved word in lowercase, but with the leading capital, it's a variable you haven't defined.

Let's hope this was it!