jQuery Library SP 2010 cascading dropdown

Posted on 2013-10-03
Medium Priority
Last Modified: 2013-12-23
I want to use the code from http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPCascadeDropdowns but instead of static column names I'd like to look at a configuration list in order to make it dynamic. How would I need to change the code to accmplish this?

SP 2010 onfig List Example...

Levels                            Names

Number of levels      (number 1-10)

Level 1                          Country
Level 2                          State
Level 3                          City

So that names could be canged in SP list w/out effecting the code. Also make it expandable to up to 10 levels.
Question by:lucasd1973
  • 6
  • 4
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39547012

you will have to have a configuration list with this columns:
- Title  Single line of text (just to know what it is used for)
- ItemList  Single line of text  (to be able to filter and get just config for one list)
- RelatedList  Single line of text  
- RelatedListParentCol  Single line of text  
- RelatedListChildCol  Single line of text  
- ParentCol  Single line of text  
- ChildCol  Single line of text  
- UseDebug  Single line of text  
- RelatedListSortCol  Single line of text  

Then this script will read all configuration entries and adjust all lookup-dropdowns:
<script language="javascript" type="text/javascript" src="/sites/ee/SPServices/JSAssets/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/ee/SPServices/JSAssets/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript">

function InitMyCascades()
		operation: "GetListItems",
		async: false,
		listName: "EECascadeConfig",
		CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='RelatedList' /><FieldRef Name='RelatedListParentCol' /><FieldRef Name='RelatedListChildCol' /><FieldRef Name='ParentCol' /><FieldRef Name='ChildCol' /><FieldRef Name='UseDebug' /><FieldRef Name='RelatedListSortCol' /></ViewFields>",
		completefunc: function (xData, Status) {
			jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {
				var useDebug = ($(this).attr("ows_UseDebug") == "true");
					relationshipList: $(this).attr("ows_RelatedList"),
					relationshipListParentColumn: $(this).attr("ows_RelatedListParentCol"),
					relationshipListChildColumn: $(this).attr("ows_RelatedListChildCol"),
					parentColumn: $(this).attr("ows_ParentCol"),
					childColumn: $(this).attr("ows_ChildCol"),
					debug: useDebug

Open in new window

Optional enhancements:
- You might add a filter on the inital query of the lookup configurations to just get the config entries for one list (if you use this on multiple lists)
- Add the sorting option (I have just added the field but no logic)

I tested this on a 6-level hierarchy and it worked like a charm :-)


Author Comment

ID: 39547110
Can you explain exactly how I would deploy this into Sharepoint 2010 ? I apologize as I am a new Sharepoint user...

LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39547390
Hi David,
there are multiple options to do this, but lets me explain one of my favorite ways:
1. Create a document library to store your Javascript files
I normally name it "ScriptAssets" and I create it in the site I want to use it
2. Upload the jQuery Library and the SPServices Library (JS files) to this library
3. Now create your Cascading Dropdown configuration list
4. Add the configuration entries so that they fit your custom (targeted) list
5. Open Notepad or your favorite text editor and create a new text file
6. Copy and paste the above code
7. Adjust the paths to the referenced script files (either the relative or the absolute full qualified url - depends on if you have additional Alternate Access Mappings for your SharePoint site
8. Adjust the first SPServices call and set the list name to the one you have chosen (in step 3)
9. Save the text file (you can even chose a file extension of .txt - it must not be .js) and upload it to your script asset library (and copy the complete path)
10. Now go to your targeted list and configure the list to open the pages not as dialog (list settings -> Advanced Settings -> Open as Dialog -> No). You can undo this change after finishing
11. Now open the "New Item" page and click on "Site actions"-> "Edit page"
12. Add a content editor web part, click on "Modify this web part" and paste the copied path to the uploaded file into the "Content link" field and save it
13. Save the page (stop editing) and watch for any errors / test the functionality
14. If there are errors, have a look into the generated HTML code and use the IEDevTools to identify the issue. Then adjust your text file and re-upload the modified version, then test the page again (and so on)
15. If everything works as expected, repeat steps 11-13 for the "Edit item" page
16. Feel happy

Thanks for this very interesting (and challenging) question - I never thought of using SPServices this way - took me just about an hour to create all the referenced lookup lists but as mentioned - works like a charm.

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.


Author Comment

ID: 39552370
On step 12. Add a content editor web part, click on "Modify this web part" and paste the copied path to the uploaded file into the "Content link" field and save it

The ability to save does NOT exist. When I place the path to the .txt in the stop editing button disappears and the tool bar is greyed out for everything except delete. Any ideas how to resolve this? I believe it is why its NOT working.

LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39552427
Hi David,
it seems that there is an error (mostly like a Javascript error) and therefore you cannot save the page.
Quickest way to resolve is normally to open the page in Internet Explorer, then press F12 to open the IEDevTools. There you should see the tab "Script". Click on it and you should get the error message from the console window.
Even if you cannot explicitly save the page / stop editing, the Content Editor web part should be saved and should already add the script to the page.

Which IE version do you use?


Author Comment

ID: 39552783
Ok Rainer,

Here is the error Im gettin the console.

SCRIPT5009: 'childColumnStatic' is undefined
jquery.SPServices-0.7.2.js, line 1357 character 3

Maybe you can help me to understand what is fouled up. Can you give me the list examples you used and the corresponding configuration list?

LVL 44

Accepted Solution

Rainer Jeschor earned 2000 total points
ID: 39553071
Hi David,
no worries - I will explain my complete setup. Just to explain the error - it seems that SPServices cannot find/map the childColumn.

OK, lets start:
First of all I created a couple of lists:
- six lists for building the lookup hierarchy:
My (sample!) hierarchy looks like
Continent -> Country Cluster -> Country -> Region -> State -> City

List A: Continents
Contains just the OOTB (out-of-the-box) title column
List B: Country Cluster
Contains the title and a lookup column named LKPContinent to relate to the continent list
List C: Country
Contains the title and the lookup column to the country cluster list (LKPCountryCluster)
List D: Region
Contains the title and the lookup column to the country list (LKPCountry)
List E: State
Contains the title and the lookup column to the region list (LKPRegion)
List F: City
Contains the title column and the lookup to the state list (LKPStates)

All lookup columns are configured to use/show only the Title column.

An example for Germany could therefore be:
Europe -> North West Europe -> Germany -> South -> Bavaria -> Munich

Then I have create the master list holding the final records:
List G: Sales Opportunities
This list contains a title column, an amount column and 6 lookup columns - one column for each of the above mentioned lists A to F. Each lookup column is just getting the title of that related list:
Title, Continent, CountryCluster,Country,Region,State,City,Amount

Finally I have created the SPServices Cascading Lookups configuration list:
List H: EECascadeConfig
This list contains the following columns:
Just the OOTB column and something you can easily get the idea for what the record is
This column will get the info for which "master" list the configuration is applied. This column can be used to filter on so that you can reuse the configuration list for other lists as well (e.g. we have here the sales opps - perhaps you want to maintain a customer list with multiple cascading lookups as well)
This is the list where the lookup values will come from (the list name)
This is the column inside the lookup list which has the relation to its parent - e.g. in case of the City list the parent lookup column is the column "LKPStates"
This is the column where you get the info from - in my sample it is always the OOTB title column.
This is the column / field name in our master data list which is a source for a cascading dropdown (e.g. the State lookup is the parent of the City lookup)
This is the column / field name in our master data list which is a target for a cascading dropdown (e.g. the City lookup is the Child of the State lookup)
Just a text field to contain the value "true" or "false" - passed to the SPServices function to be able to display more debug info in case of an error.
This can be used to sort the dropdown entries based on another column than the default one.

So in my configuration we have these five configuration entries (from left to right - separated with a |):

After setting up all the lookup lists and the master list, I started with ONE (the first) cascading lookup by hard coding the values - just to verify the cascading script is working.
Then I added the SPServices GetListItem query and added the first configuration entry and replaced the hard coded values with the results from the GetListItem call.

In general I try to avoid spaces in field names / field titles as this can complicate the way what has to be set in CAML to either query the right columns / get the right columns back.

In most cases the issues are related by using either the title where SharePoint expects the fields internal name or vice versa. Please remember that whenever you create a column with a space, the internal name gets adjusted like:
Country Cluster -> Country_x0020_Cluster
(I could be wrong here with the exact replacement - just from my mind)

An easy way to debug would be, to use the IEDev Tools, start Script Debugging and set a breakpoint to the GetListItems call - then you can see the complete response and the field names.

Sorry that it is this complicated - but when it works then its a great solution for your users.

I am here if you have further questions!


Author Closing Comment

ID: 39553161
you are  AWESOME ! Thank you so much

Author Comment

ID: 39692766

Is it possible to lookup to a field that is a lookup column type already using Jquery/SPServices? I need this functionality for a cascading dropdown.


Author Comment

ID: 39736677
Last delimma Rainer, how can the code allow write in when the choices for the dropdown is not the correct choice. The writein then writes to the related lookup list. Also possibly allow a place a reference for GUID key list so that I can access lists outside of the current site.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Watch the video of Kernel Migrator for SharePoint, which demonstrate the process easily of migration from SharePoint to SharePoint, OneDrive for Business & Google Drive servers, Public Folder to SharePoint, File Server to SharePoint. The tool has va…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question