jQuery Library SP 2010 cascading dropdown

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.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:

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 :-)

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

Rainer JeschorCommented:
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.

10 Tips to Protect Your Business from Ransomware

Did you know that ransomware is the most widespread, destructive malware in the world today? It accounts for 39% of all security breaches, with ransomware gangsters projected to make $11.5B in profits from online extortion by 2019.

lucasd1973Author Commented:
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.

Rainer JeschorCommented:
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?

lucasd1973Author Commented:
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?

Rainer JeschorCommented:
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!


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lucasd1973Author Commented:
you are  AWESOME ! Thank you so much
lucasd1973Author Commented:

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.

lucasd1973Author Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.