0

I am trying to get a cascading dropdown to work on list. I found some great information on about how to setup a cascading dropdown on a list but not sure what I am doing wrong because itsn't working. The hardest part is that there are no error messages that come up.

Here is what I have done. Maybe if you look at it you can help me find out what I am doing wrong.

  1. Created a parent list: Category (entered list of categories in the default 'title' column) - Not Required
  2. Created a child list: Actions (entered list of actions in the default 'title' column with a lookup column to Category with column title 'Category') - Not required
  3. Created custom list 'Main List' and added Category List and Action List as separate lookup columns
  4. Created a document library and added: jquery-1.8.1.min.js and jquery.SPServices-0.7.1a.min.js
  5. Added script editor web part to the NewForm.aspx and added the code below:

    <script language="javascript" src="/.../.../Scripts/jquery-1.8.1.min.js" type="text/javascript"></script><script language="javascript" src="/.../.../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
    

    $(document).ready(function () {
    
     $().SPServices.SPCascadeDropdowns({
    
            relationshipList: "Actions",   
            relationshipParentList: "Category"
            relationshipListParentColumn: "Category",
            relationshipListChildColumn: "Title",
            parentColumn: "Category",
            childColumn: "Actions",
            debug: true
          });  
     });</script>
    

More things done

  1. Removed required fields from all lists
  2. Removed multi selection from all fields

More questions

  1. Do I put the jQuery files in a document library, asset library, or style library?
  2. Do I put the code in script editor web part or content editor web part?
  3. Cannot I have to touch the master page and get away just adding the code to the NewForm.aspx?

Can anyone tell what I have done wrong? Thank you for your help.

2

Have you tried viewing your page with the F12 debugger on in IE? Does that show any errors on the console tab?

Have you looked at your list using a utility like SPCAMLQueryHelper to see if your field names are what you think they are? SPServices uses internal field names, and if you create a field with one name, then rename it, the "display" name of the field changes, but the internal field name remains the same as it was previously.

I have found SPCascadeDropdowns takes a lot of trial an error... the parameter names are ambiguous/non-intuitive.

To answer your other questions:

1.Do I put the jQuery files in a document library, asset library, or style library?

You can put them in any of those - they are all the same. Personally - I load jQuery itself from a CDN, but I have libraries like SPServices in a Script Library in my root site collection.

2.Do I put the code in script editor web part or content editor web part?

You can do either. However, I have found that the CEWP can get mangled if the publishing feature is enabled.

The SEWP works best if you are putting a small amount of JavaScript or CSS on the page because it just gets coded into the web part.

If you are putting any significant amount of code on the page, I like to put all of that code in a .js (or .css) file and put it in a library in the site. I create a library called Script Library, but it doesn't matter. If I am reusing across sites, I put it in the Script Library in the root site collection.

Then I create a .htm file in the Script Library that has <script> tags that load jQuery, other utility libraries like SPServices, and finally the .js file being used on that page.

Then in the CEWP, you reference the .htm file in the Content Link field, which causes the page to load all of your scripts. That way, you don't need to edit the page if you need to change your JavaScript code, and you can enable versioning on the Script Library if you want, to track version changes.

3.Cannot I have to touch the master page and get away just adding the code to the NewForm.aspx?

You do not need to change the master page at all. In your list, click "new" to create a new list item, then just use Site Actions -> Edit Page and add the CEWP or SEWP on the page and add your code or add a reference to the .htm file that loads your code (as described above).

You may need to do the same thing on the EditForm.aspx and DispForm.aspx if you want to customize those also. I try to put all of the code in one JavaScript file, and where necessary, check the url for "NewForm", "EditForm", and "DispForm" if code is different for each. (Yes, it is possible to use SharePoint Designer to change the names of these forms, but we don't do that.)

  • Your comment was extremely helpful. Thank you. I finally received an error after more trials. The error is "jquery undefined" Also I forgot that I changed the name to a column. – SharePoint Lady May 16 '17 at 16:36
  • If jquery is not defined, then try loading jquery from a CDN like code.jquery.com/jquery-1.12.4.min.js or ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js – mannaggia May 16 '17 at 17:23
  • I could have the wrong order for the jQuery being loaded. Now this error message appears "Unable to get property "SPCasacadeDropdowns" of undefined or null reference". – SharePoint Lady May 17 '17 at 12:23
  • There are no more errors. But when I go to the Main form and select "Category" and then "Action" the whole list of actions appear rather then the ones connected to only that category. You are right! Cascading dropdowns are very tricky. – SharePoint Lady May 17 '17 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.