jQuery Library SP 2010 cascading dropdown

Hi,

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">
_spBodyOnLoadFunctionNames.push("InitMyCascades");

function InitMyCascades()
{
	jQuery().SPServices({
		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");
				jQuery().SPServices.SPCascadeDropdowns({
					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
				});
			});
		}	
	});
}
</script>

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

HTH
Rainer

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

David

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.

HTH
Rainer

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.


David

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?

HTH
Rainer

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?

Confused...
David

you are  AWESOME ! Thank you so much

Rainer,

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.

David

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.