Cascading Dropdown Not Working

Dec 17, 2015 at 10:24 PM
Edited Dec 17, 2015 at 10:32 PM
I am struggling with getting the cascading dropdown list to work. I am working in SP2010.

First attempt:
  • It wasn't clear to me which js file to load, so I loaded jQuery 1.11.x (SPServices 2013.01) to a folder named jsQuery Libraries.
  • I followed the example on the $().SPServices.SPCascadeDropdowns page exactly.
  • Loaded the following javascript file to a document library named Code Library.
<script language="javascript" type="text/javascript" src="../WP/jQuery%20Libraries/jquery.SPServices-2013.01.js"></script>
<script language="javascript" type="text/javascript" src="../WP/jQuery%20Libraries/jquery.SPServices-2013.01.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "Regions",
    relationshipListParentColumn: "Country",
    relationshipListChildColumn: "Title",
    CAMLQuery: "<Eq><FieldRef Name='Country'/><Value Type='Text'>Active</Value></Eq>",   parentColumn: "Country",
    childColumn: "Region",
    debug: true
  });
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "States",
    relationshipListParentColumn: "Region_x0020_Name",
    relationshipListChildColumn: "Title",
    relationshipListSortColumn: "ID",
    parentColumn: "Region",
    childColumn: "State"
  });
});
</script>
  • Created a new list and added new data fields: country (lookup to the parent country list), region (lookup to the region list) and state (lookup to the state list).
  • Added a CEWP to the default new form page on the new list and referenced the script
This didn't work.

Second Attempt:
  • Actually went to your demo site and replicated it on my site.
  • Followed the same procedures above but used the following script.
<script language="javascript" type="text/javascript" src="../WP/jQuery%20Libraries/jquery.SPServices-2013.01.js"></script>
<script language="javascript" type="text/javascript" src="../WP/jQuery%20Libraries/jquery.SPServices-2013.01.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {

    // Change the orientation of the Lead Source options from vertical to horizontal
    $().SPServices.SPArrangeChoices({
        columnName: "Lead Source",
        perRow: 3
    });

    // Change the orientation of the Color options from vertical to horizontal
    $().SPServices.SPArrangeChoices({
        columnName: "Color",
        perRow: 3
    });

    // Set up the cascade from Region to State
    $().SPServices.SPCascadeDropdowns({
        listName: "Sales Opportunities",
        relationshipList: "States",
        relationshipListParentColumn: "Region",
        relationshipListChildColumn: "Title",
        relationshipListSortColumn: "Title",
        parentColumn: "Region",
        childColumn: "State"
    });

    // Set up the cascade from State to City
    $().SPServices.SPCascadeDropdowns({
        listName: "Sales Opportunities",
        relationshipList: "Cities",
        relationshipListParentColumn: "State",
        relationshipListChildColumn: "Title",
        parentColumn: "State",
        childColumn: "City"
    });


});
Sadly, both attempts failed. :-( I am not sure where I am going wrong here, but would appreciate any suggestions that you may have.

Thank you!
Dec 18, 2015 at 12:26 PM
If you're going against a doc library, I'm unable to get it working as well, if you're going against a LIST, I had an issue as well at first, but I had to mess with the columns in the parent and child locations in the code. After a few attempts I was able to get it working. Are you getting any errors (F12)
Dec 21, 2015 at 5:47 PM
Thank you for your response. All of my work was done using lists and not doc libraries. I am not getting any errors. You said you messed with the columns in the parent and child locations in the code. Would you mind sharing what you changed.

Thank you again.
Coordinator
Dec 21, 2015 at 6:15 PM
The function works with list and libraries equally, regardless what sharepointguy12's experience was.

I think mullecr's issue is is that s/he is loading two copies of SPServices, but none of jQuery.

You should have something like this:
<script language="javascript" type="text/javascript" src="../WP/jQuery%20Libraries/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../WP/jQuery%20Libraries/jquery.SPServices-2013.01.min.js"></script>
I would also strongly suggest you use 2014.02, as there are important improvements in it.

M.
Dec 21, 2015 at 7:31 PM
Please pardon my ignorance here. I am fairly new to the whole jquery solution. Per your advice, I am now using 2014.02 SPServices.

Where I am getting confused is on the first line of the script you reference a file jquery.js. I am not sure what file that file is. On your demo site I pulled up the CascadingDropdown.js file, the first to lines of the script aren't there; however, in the example on the Documentation page it does show the first two lines of script. So, I am confused as to what file I should be referencing here.

<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-2014.02.min.js"></script>

Thank you again.
Coordinator
Dec 21, 2015 at 7:35 PM
SPServices has a dependency on the jQuery library. SPServices will just throw errors without it.

If you check the first page of the documentation, you'll see instructions at the bottom.

M.
Dec 21, 2015 at 11:10 PM
So, I went back and read the documentation page again. I missed a few things for sure.

I added the alerts to ensure I was referencing the js script and the SPServices correctly...so this part is working correctly.

So I went back to the original example on the documentation page and started all over.

Created 4 lists as follows:
  1. List Name: Countries
    Title (aka Country)
  2. List Name: Regions
    Title (aka Region), Country
  3. List Name: States
    State (aka Title), State Abbreviation, Region (lookup into Regions list Title Column)
  4. List Name: Test
    Country (lookup into Countries list Title Column), Region (lookup into Regions list Title Column), State (lookup into States list Title Column)
On the Test NewForm.aspx page, I added a CEWP and referenced the js file. Now that I know I am referencing the js script and SPServices correctly, the problem must be in the list and column names that I am calling. I have included my current js script below. I am so close to getting this right and any assistance that would point me in the right direction would be great!
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.11.3.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-2014.02.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

    alert("jQuery");
    alert($().SPServices.SPGetCurrentSite());

  $().SPServices.SPCascadeDropdowns({
    relationshipList: "Test",
    relationshipListParentColumn: "Country",
    relationshipListChildColumn: "Title",
    CAMLQuery: "<Eq><FieldRef Name='Country'/><Value Type='Text'>Active</Value></Eq>",
    parentColumn: "Country",
    childColumn: "Region",
    debug: true
  });
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "Test",
    relationshipListParentColumn: "Region_x0020_Name",
    relationshipListChildColumn: "State",
    relationshipListSortColumn: "ID",
    parentColumn: "Region",
    childColumn: "State"
  });
});
</script>
Coordinator
Dec 22, 2015 at 2:42 PM
The problem now is the relationshipLists. The relationships are maintained in the Regions and States lists, not the Test list. Also, the childColumn in each list is the Title column. Even though you've renamed it, the InternalName is Title. Note that if you don't have an Active column in the Regions list, the CAMLQuery will cause the call to fail.

M.
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "Regions",
    relationshipListParentColumn: "Country",
    relationshipListChildColumn: "Title",
    CAMLQuery: "<Eq><FieldRef Name='Country'/><Value Type='Text'>Active</Value></Eq>",
    parentColumn: "Country",
    childColumn: "Region",
    debug: true
  });
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "States",
    relationshipListParentColumn: "Region_x0020_Name",
    relationshipListChildColumn: "Title",
    relationshipListSortColumn: "ID",
    parentColumn: "Region",
    childColumn: "State"
  });
Dec 22, 2015 at 5:19 PM
Marc,

Thank you so much for working with me on this. It finally worked! I now understand what the script is doing and how items are being called/referenced. This solution is so awesome and will provide me with so many more development options!

Thank you again,
Carolyn
Coordinator
Dec 22, 2015 at 6:13 PM
Excellent, Carolyn! Glad you got it working.

M.