SPCascadeDropdowns on SharePoint Online

Feb 19, 2014 at 7:26 PM
Edited Feb 19, 2014 at 7:27 PM
Hi All,

Can anyone confirm if jQuery and SPServices works on SharePoint Online (SPS 2013 tenant)?
If yes my problem is as follows. Could somebody help me?

I'v created four lists:
  1. Regions: Title field with regions
  2. States: Title filed (renamed to State after a few tutorial)
    Region: lookup filed to Regions list Title field.
  3. Cities: Title field (not modified)
    State: lookup field to States list State field
  4. Form: Title field (not modified)
    Region: lookup field to Regions list Title field
    State: lookup field to States list State field
    City: lookup field to Cities list Title field
I also downloaded jquery-1.11.0.min.js and jquery.SPServices-2013.02a.min.js files and uploaded it to my SPS Online site Style Library/JQuery folder.

I opened the Form list clicked on the New document link. In the NewForm page I clicked Settings / Edit Page. Added a SEWP and pasted the following script inside it:
<script type="text/javascript" language="javascript" src="https://mydomain.sharepoint.com/sites/test/Style%20Library/JQuery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript" src="https://mydomain.sharepoint.com/sites/test/Style%20Library/JQuery/jquery.SPServices-2013.02a.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

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

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


});
</script>
Also tried using the documentation recommendation as I should put the code in designer after the line:
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
Of course I created a copy of the form.

Also tried using CEWP.

Either of way did nothing. When I used the debug: true parameter I got no error message at all.

Tried to check if jQuery works at all.
$('select').change(function() {
            alert($(this).val());
            alert($(this).find('option').filter(':selected').text());
      });
On dropdown changed event I got selected item ID and then its name. Also tried to check SPServices.
alert($().SPServices.SPGetCurrentSite());
This works fine (tested in script editor web part only).

Any suggestion what do I wrong?
Thanks a lot!
Coordinator
Feb 19, 2014 at 8:06 PM
See if this applies to you:
Office 365 Update Changes ‘Display Name’ on Required Fields

I released 2014.01 today with fixes.

M.
Marked as answer by Homecsiga on 2/19/2014 at 2:45 PM
Feb 19, 2014 at 8:31 PM
Edited Feb 19, 2014 at 9:45 PM
Thank you for the reply!

Here is the solution based on your instructions:
    $().SPServices.SPCascadeDropdowns({
        listName: $().SPServices.SPListNameFromUrl(), 
        relationshipList: "States",
        relationshipListParentColumn: "Region",
        relationshipListChildColumn: "Title",
        parentColumn: "Region Required Field",
        childColumn: "State Required Field",
    });
Thank you very much!!
Coordinator
Feb 20, 2014 at 2:48 AM
No, you shouldn't change the column names in your code. Upgrade to 2014.01 and SPServices will take care of it for you.

M.
Marked as answer by Homecsiga on 2/20/2014 at 7:22 AM
Feb 20, 2014 at 2:23 PM
Awesome!

Thank you very much!