Cascading Dropdown

Jan 6, 2015 at 12:07 PM
Hi, I have downloaded the SPServices and successfully got the cascading droddown menu to work just fine.

However, I noticed it does not activate on 'hover' .. only by moving over to the droparrow on the menu and clicking.

This behaviour is no native to normal sharepoint dropdowns and is causing confusion, it appears that the dropdown doesn;t work to users.

Is there any way round this? I have googled for hours and seem to be coming up with the answer that this is a 'jquery' thing?

Help would be much appreciated, Julie
Coordinator
Jan 6, 2015 at 1:12 PM
Julie:

You probably mean what I call a "complex" dropdown. SharePoint renders this in 2007 and 2010 if there are 20+ values in the list. If that's the case, then it is normal SharePoint behavior. You can see that is the case by removing the call to SPCascadeDropdowns. You call $().SPServices.SPComplexToSimpleDropdown if you'd like to convert a dropdown to a simple one, or use simpleChild: true in the call to SPCascadeDropdowns.

If that' not it, can you explain a bit more?

M.
Jan 6, 2015 at 1:51 PM
Edited Jan 6, 2015 at 1:53 PM
Hi Marc,

Thanks for the prompt reply. I probably haven't explained it very well now I've read back ;-)

I was refering to the position of the cursor that trigers the dropdown to appear. Here is two screen shots showing native SP behavoir and then the Jquery behavoir from a users pespective:

![Image]http://www.dwlgas.co.uk/example1.jpg

![image]http://www.dwlgas.co.uk/example2.jpg

Is there any way of getting the jquery dropdown to trigger if the cursor is in the body of the dropdown selector box, rather than the arrow icon? This would give the user a more fluid experience?

Thanks again, Julie
Jan 6, 2015 at 2:29 PM
HI Marc,

My apologies, you seem to have deciphered my original post bang on! I have just read the article on complex dropdowns and tried reducing the dropdown values and it does indeed resolve the issue and the cascade still works.

I just now have to decipher your solution in getting the values back in whilst retaining the simple dropdown behavoir ;-) ... I may well be back later!

Thanks again, Julie
Coordinator
Jan 6, 2015 at 4:22 PM
Julie:

You can leave the values in the list and just convert from complex to simple using the functions. It should work fine.

M.
Jan 7, 2015 at 10:01 AM
Edited Jan 7, 2015 at 10:01 AM
Hi Marc,

I am not having much luck in getting this to work :-( I have tried 3 combinatins of syntax as follows, can you see where I am going wrong? The two JS files I am referencing in the following scripts are: jquery-1.4.2.min.js and jquery.SPServices-0.5.7.min.js

Many thanks, Julie


EXAMPLE 1 (just using the Simplechild command)
`The cascade still works but has no effect on the column in converting it
<script type="text/javascript"> $(document).ready(function() { $().SPServices.SPCascadeDropdowns({ relationshipList: "CallSign", relationshipListParentColumn: "Station", relationshipListChildColumn: "Title", relationshipListSortColumn: "ID", parentColumn: "Station", childColumn: "CallSign", promptText: "Select CallSign...", simpleChild: true, // Added in v0.6.2 debug: true }); }); </script>
Jan 7, 2015 at 10:02 AM
I am going to have to use 3 seperate posts to show the examples as this forum software wont allow me to use line breaks (it's very buggy isn;t it!) Apologies for spamming the thread!
Jan 7, 2015 at 10:03 AM
EXAMPLE 2 (using the SPServices.SPComplexToSimpleDropdown syntax)
In this example the cascade stops working and it also has no effect on the column)
<script type="text/javascript"> $(document).ready(function() { $().SPServices.SPComplexToSimpleDropdown({ columnName: "Station", relationshipList: "CallSign", relationshipListParentColumn: "Station", relationshipListChildColumn: "Title", relationshipListSortColumn: "ID", parentColumn: "Station", childColumn: "CallSign", promptText: "Select CallSign...", }); }); </script>
Jan 7, 2015 at 10:03 AM
EXAMPLE 3 (Using Dans code to include all dropdowns)
Neither the cascade works nor are the columns converted
<script type="text/javascript"> $(document).ready(function() { $('.ms-lookuptypeintextbox').each(function() { $().SPServices.SPComplexToSimpleDropdown({ columnName: $(this).attr('title') relationshipList: "CallSign", relationshipListParentColumn: "Station", relationshipListChildColumn: "Title", relationshipListSortColumn: "ID", parentColumn: "Station", childColumn: "CallSign", promptText: "Select CallSign...", }); }); }); </script>
Coordinator
Jan 7, 2015 at 1:28 PM
Julie:

You're using such an old version of SPServices (and jQuery), I'm almost positive that the simpleChild stuff isn't even in it. I'd suggest you upgrade to the latest version and go from there.

M.
Jan 7, 2015 at 1:39 PM
Thanks Marc,

I downloaded SPServices 2014.01 from your downloads page on Monday but just noticed their is a 2014.02, not sure how I missed that! I'll download and have another go, fingers crossed :-)
Coordinator
Jan 7, 2015 at 1:44 PM
You showed jquery-1.4.2.min.js and jquery.SPServices-0.5.7.min.js above. I'd suggest jquery-1.11.2.min.js and jquery.SPServices-2014.02.min.js.

M.
Jan 8, 2015 at 10:41 AM
Cheers Marc, I am getting closer and not giving up yet ;-)

I have referenced the files as suggested and it does now convert to simple very nicely, however the cascading functionality stops working.!

In my case both of my columns exceed 20 items so I have used the code you attributed to Dan on your documentation page:

Can you see where I am still going wrong? Have you got a full example of the syntax that works for multiple columns?

Many thanks :-)

<script language="javascript" src="http://team/sites/station/Style%20Library/LFRSJavascript/SPServices/jquery-1.11.2.min.js" type="text/javascript"></script>

<script language="javascript" src="http://team/sites/station/Style%20Library/LFRSJavascript/SPServices/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function (){ $('.ms-lookuptypeintextbox').each(function() { $().SPServices.SPComplexToSimpleDropdown({ columnName: $(this).attr('title'), relationshipWebURL: "", relationshipList: "CallSign", relationshipListParentColumn: "Station", relationshipListChildColumn: "Title", relationshipListSortColumn: "ID", parentColumn: "Station", childColumn: "CallSign", promptText: "Select CallSign...", }); }); }); </script>
Coordinator
Jan 8, 2015 at 12:53 PM
Edited Jan 8, 2015 at 12:54 PM
Julie:

You've sort of merged the two functions together in your code such that neither will work properly.

I think you want something like this:
$(document).ready(function() {

    $().SPServices.SPCascadeDropdown({
        relationshipList: "CallSign",
        relationshipListParentColumn: "Station",
        relationshipListChildColumn: "Title",
        relationshipListSortColumn: "ID",
        parentColumn: "Station",
        childColumn: "CallSign",
        simpleChild: true,
        promptText: "Select CallSign...",
    });

});
M.
Jan 8, 2015 at 2:34 PM
I thought I was starting to lose the plot here because the above initially didn't work either!

Then I had a eureka moment... I don't paste the code into a CEWP itself because it messes up the code, instead I create a text file and reference that from the CEWP. However, the text file was in a different folder than the actual JS files. Even though I had pathed them correctly in the text file it appears that SP doesn't like this?!& Once I moved the text file into the same document library folder as the JS files it worked as expected

THANK YOU for your patience!

One tiny thing however (just to give you a change of subject)...... The 'select prompt' doesn;t seem to work in the child or parent field. It's fine on the parent as this initially appears blank so forces a user to use the dropdown, but on the child column it defaults to the first item in the dropdown which of course could be mistakingly selected in error, any ideas? (not a deal breaker, but thought I may aswell go the whole hog now lol).

Julie
Coordinator
Jan 8, 2015 at 2:52 PM
Progress!

On the promptText, you'll notice in the documentation that it's "deprecated". It still does what you want, but if you don't make a selection, you get an ugly error. In other words, it's not really that useful and I discourage using it.

M.