Cascade Dropdown SharePoint 2013

Sep 12, 2013 at 11:17 AM
Hi,

Im having a problem where I cannot get the cascading drop downs to work. When I select a value in my parent dropdown it fires an event but then does not populate anything in the child dropdown. I have spent a while on this now and I dont seem to be getting anywhere. Do you have any thoughts?

<script src="../../SiteAssets/jquery-1.7.2.js"></script>
<script src="../../SiteAssets/jquery.SPServices-2013.01.js"></script>
<script> $(document).ready(function() { $().SPServices.SPCascadeDropdowns({ relationshipList: "{GUID}", relationshipListParentColumn: "Business Area", relationshipListChildColumn: "Title", parentColumn: "Business Area", childColumn: "Business Unit", debug: true }); });</script> When looking at the console in chrome I get this error whenever I choose any value from the parent drop down,

OPTIONS http://_vti_bin/Lists.asmx
send
jQuery.extend.ajax
$.fn.SPServices
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
DOMContentLoaded

Thanks for any help,

Jamlow
Sep 12, 2013 at 1:08 PM
Problem solved

I changed to the old spservices and jquery and the debugger started to work from there.
At that point I realised I wasn't entering in the static values for my fields.

<script type="text/javascript" src="../../SiteAssets/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../SiteAssets/jquery.SPServices-0.7.2.js"></script>

Jamlow
Coordinator
Sep 12, 2013 at 2:43 PM
So is 2013.01 not working with SharePoint 2013 for you?

M.
Sep 12, 2013 at 8:49 PM
Hello,

I am trying to implement cascading drop downs in SharePoint 2013 hosted on Office 365. I am not sure how to include the script to call SPServices on the New/Edit forms. It appears that edits are disabled in SP Designer. I have tried to include them using Script Editor WebPart. This results in a blank form. Any help would be greatly appreciated.

Thanks!
Coordinator
Sep 13, 2013 at 3:43 AM
You can edit the forms (always edit a copy, not the OOB ones) in SharePoint Designer, or you can add ?toolpaneview=2 to the query string, or you can use the Form Web Parts button on the ribbon.

M.
Sep 13, 2013 at 9:52 AM
@sympmarc I think it was but it was giving me a strange error in the console on chrome as stated above. I wasnt being shown the debug window until I changed to an older version. Once I had access to the debug window it was easy to solve my problem.

Does that help?

Jamlow
Coordinator
Sep 13, 2013 at 12:07 PM
It sounds like you got it working, so I guess it did help.

M.
Coordinator
Sep 13, 2013 at 12:09 PM
Sorry, jamlow, we have a line jumper in Jay2013. I though you were s/he.

If 2010.13 doesn't work in SharePoint 2013, I was hoping you could give me some details in case I have a bug.

M.
Sep 13, 2013 at 1:47 PM
@sympmarc basically I was using jquery.SPServices-2013.01.js and I was receiving a strange error in the browser console. I tried googling for a while but I didn't have any success. (The error is above).

The real issue with spservices seemed to be that using jquery.SPServices-2013.01.js with SharePoint foundation 2013 didn't seem to show the debug window even though I had debug set to true. When I rolled back to a previous version of SPServices the debug window appeared which helped me to fix my initial problem.

Is that enough information? Let me know if you need anything else.

Thanks,

Jamlow
Coordinator
Sep 13, 2013 at 1:58 PM
Jamlow:

So once you understood the issue, did you switch back to 2013.01? If so, does SPCascadeDropdowns work properly?

It sounds like it was just an issue with the debug: true option?

M.
Sep 19, 2013 at 6:54 AM
Hi Marc, I believe I may be able to add something to this.

I was using the following code (on a NewForm.aspx page in SharePoint 2013):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2013.01/jquery.SPServices-2013.01.min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
  $(document).ready(function() 
  {
    $().SPServices.SPCascadeDropdowns({
      relationshipList: "MegaMenuHeading",
      relationshipListParentColumn: "Section",
      relationshipListChildColumn: "Title",
      relationshipListSortColumn: "Order0",
      parentColumn: "Section",
      childColumn: "Heading",
      debug: true
    });
  });
</script>
However, it wasn't working, and the IE's developer toolbar showed the following error (which I also found in firebug in Firefox):
SEC7118: XMLHttpRequest for http://_vti_bin/Lists.asmx required Cross Origin Resource Sharing (CORS). 
NewForm.aspx

SEC7119: XMLHttpRequest for http://_vti_bin/Lists.asmx required CORS preflight. 
NewForm.aspx

SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied. 
NewForm.aspx
After spending time trying to enable CORS on my server I gave up and came across this thread. I changed 2013.01 to 0.7.2, and it's now working correctly. Note that in 2013.01 it didn't work with or without debug mode set.

Like the creator of this thread no messages were appearing in the debug window (which is very nifty btw), but I wonder if that's because it was failing before it even got to that point? What stands out for me is that the URL "http://_vti_bin/Lists.asmx" doesn't contain the domain name. Is it possible there's a bug in 2013.01 where relative paths haven't been used? Just guessing, no idea what magic you work underneath!

Also, Googling the last line brought up this page, in which you'd said it was unrelated to SPServices. It could be a similar issue, perhaps?
https://spservices.codeplex.com/workitem/10161

Hope that helps, and thanks for a great library!
Sep 19, 2013 at 7:20 AM
You should include:
relationshipWebURL:"/",
then it fixes the URL error.
Sep 19, 2013 at 7:25 AM
Edited Sep 19, 2013 at 7:26 AM
Thanks, but no, I originally had that line and it may have fixed the CORS issue, but not the access denied issue. The only solution for me was to downgrade SPServices. And I don't have that line present now yet it's working with 0.7.2.
Sep 19, 2013 at 7:35 AM
well, I don't know but that line fixed my error. I use jquery-1.10.2.js and jquery.SPServices-2013.01.js.
and yes, you are true that downgrade SPServices without that line still works.

Cheers
Sep 19, 2013 at 7:40 AM
Interesting, I wonder what the difference could be between our setups?

For completeness' sake I just tested again with and without that line with both 0.7.2 and 2013.01. Either works with the old version, neither with the new version. And the CORS errors remain either way.

Thanks for checking it out.
Coordinator
Sep 19, 2013 at 3:41 PM
All:

There's a bug in 2013.01 when you are making calls in the root site. Mea culpa.
https://spservices.codeplex.com/workitem/10165

The write up in the issue includes a fix, which is basically what I will have in 2013.02. So if you fix your own copies, you should be good to go.

M.
Sep 20, 2013 at 1:52 AM
Thanks, Marc!
Oct 2, 2013 at 12:23 PM
Marc,

Sorry for the late reply.

My issues was similar to heycoach. There seemed to be an error with the most recent version and it wasnt showing the debug window. When I went back to an older version the debug window worked. This allowed me to fix the original issue.

Thanks
Oct 29, 2013 at 2:19 PM
spcascade.org provides best free solution which support multi level dropdown list with no limits.
It is javascript/jquery based solution with no page refreshes and involves only one look up list for multiple columns.
Saves data in single line text instead of Ids that are used by typical look up columns.
Very easy to use syntax too!

Image

http://www.spcascade.org