Unable to get Cascade Dropdowns working

Nov 16, 2009 at 10:47 PM

Hi,

I am looking for help.  I have uploaded the 2 scripts to the Documents library at our site's top level.

I created 4 lists:

1. Countries List (Title w/ values of example (Canada, France, etc.))

2. Regions List (Title w/ values of example (Northeast, Southeast, etc.), Country = lookup to Title of Countries List)

3. States List (State w/ values of example (Alabama, Alberta, etc.), State Abbreviation w/ values of example (AL, AB, etc.), Region Name = lookup to Title of Regions List)

4. Test List (Title, Country (w/ lookup to Title of Countries List), Region (w/ lookup to Regions List), State (w/ lookup to States List)

The New Item Form of the Test List (#4 above) is the page that I added the following code to.  I added this code between the <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> and <table cellpadding=0 cellspacing=0 id="onetIDListForm"> lines.

<script language="javascript" type="text/javascript" src="http://rf07/sites/krystal/documents/jquery.SPServices-0.4.5.js"></script>
<script language="javascript" type="text/javascript" src="http://rf07/sites/krystal/documents/jquery.SPServices-0.4.5.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Regions List",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "Region",
   debug: false
  });
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "States List",
   relationshipListParentColumn: "Region",
   relationshipListChildColumn: "State",
   relationshipListSortColumn: "ID",
   parentColumn: "Region",
   childColumn: "State"
  });
 });
</script>

When adding a new item to the list #4 that has this code, all items appear in all drop downs.  What am I doing wrong?

I am using IE Version 8.0.6001.18702

An additional question - we would like to use this cascade dropdown functionality for uploading new documents or folders to a document library.  Can this be accomplished using this code or a modification of this code?

Thanks in advance for any help.

Coordinator
Nov 17, 2009 at 4:41 AM

It looks like you are referencing both the minified and the regular version of my script files, but you aren't referencing the code jQuery library.  To use jQuery and any plugins, you need to also got to jQuery.com and download jquery-1.3.2.min.js.  Put that file where you have my library, and then your references will look something like this:

<script language="javascript" type="text/javascript" src="sites/krystal/documents/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="sites/krystal/documents/jquery.SPServices-0.4.5.min.js"></script>
You can use the library on customized versions of any list's NewForm.aspx or EditForm.aspx.
Let me know if I can help with any other questions.
M.
Nov 17, 2009 at 2:39 PM

Thank you for your prompt response on my error.  I had another error in my Regions code that I corrected, but still have a problem in my states code that I cannot figure out.

When going to my New Item From, I see the following:

Country = drop down of countries appears.  I can choose a country, and the correct Regions appear.

Region = drop down of regions corresponding to Country appear.  I can select a Region.

State = no states appear in drop-down (only choose state... option).

<script language="javascript" type="text/javascript" src="http://rf07/sites/krystal/documents/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http://rf07/sites/krystal/documents/jquery.SPServices-0.4.5.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Regions",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "Region",
   debug: false
  });
  $().SPServices.SPCascadeDropdowns({
      relationshipList: "States",
      relationshipListParentColumn: "Region Name",
      relationshipListChildColumn: "Title",
      relationshipListSortColumn: "ID",
      parentColumn: "Region",
      childColumn: "State"
  });
 });
</script>

 

Coordinator
Nov 17, 2009 at 3:14 PM

These two columns need to be specified using the StaticName for the column, not the DisplayName.  (The StaticName stays constant no matter how many times you rename a column in the UI.) In StaticNames, spaces are encoded as _x0020_, so:

relationshipListParentColumn: "Region_x0020_Name",
relationshipListChildColumn: "Title",

When you are having problems like this, turn on debug mode by specifying debug: true.  Then you should see popup messages if column names are not correct, etc.

M.

Nov 17, 2009 at 3:58 PM

Thank you so much for your help - everything is working as expected now.

K

Nov 17, 2009 at 4:02 PM

Will this work in WSS as it did in MOSS?

Thanks

K

Coordinator
Nov 17, 2009 at 4:10 PM

Glad you got it working!  Yes, the functions should work identically in WSS 3.0 and MOSS.

M.

Jan 20, 2010 at 5:58 PM

Hi Marc-

I have checked out various discussion threads here, and I'm trying to get this to work, but to no avail.  This discussion seems to be the closest to what I've encountered so far:

I created the same 4 lists:

1. Countries (Title w/ values of example (Canada, France, United States))

2. Regions (Title w/ values of example (Northeast, Southeast, Northwest, Southwest, Midwest, Mountain), Country = lookup to Title of Countries List)

3. States (State w/ values of example (Alabama, Arizona, etc.), Region Name = lookup to Title of Regions List)

4. test (Title, Country (w/ lookup to Title of Countries List), Region (w/ lookup to Regions List), State (w/ lookup to States List)

I added the javascript in between the <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> and <table cellpadding=0 cellspacing=0 id="onetIDListForm"> lines on the "test" list as follows:

<script language="javascript" type="text/javascript" src="http://rf07/sites/krystal/documents/jquery.SPServices-0.4.5.js"></script>
<script language="javascript" type="text/javascript" src="http://rf07/sites/krystal/documents/jquery.SPServices-0.4.5.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Regions",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "Region",
   debug: true
  });
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "States",
   relationshipListParentColumn: "Region",
   relationshipListChildColumn: "Title",
   parentColumn: "Region",
   childColumn: "State",
   debug: true
  });

</script>

When I add an item to the "test" list, all the options appear.  I select "United States" from the Country Drop down, but I still see all of the Region and State options without filtering on each of their respective drop downs.  I don't see any warning error icons in the browser (using IE8), and I don't get any debug errors to come up.  Can you think of anything I'm doing wrong?

Thanks for making this, and any insight you can give me, Marc!

 

Jan 20, 2010 at 6:01 PM

Whoops, I copied and pasted the wrong links for the two javascript files in my question above.  They are:

<script language="javascript" type="text/javascript" src="../../jQuery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery/jquery.SPServices-0.4.8.min.js"></script>

I clicked on each in SPD to ensure they're pointing to the correct file, and each one of them opens with a Ctrl + click.

Coordinator
Jan 20, 2010 at 6:06 PM

Before you added that second post, I was thinking that the answer was easy!

First thing to try:

$(document).ready(function() {
  alert("Hello ennius!");
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Regions",

Add the alert and make sure it pops up.  This will tell you that the jQuery library itself is loaded correctly and that script can run.

M.

Jan 20, 2010 at 6:47 PM
Edited Jan 21, 2010 at 2:20 PM

I found that I wasn't closing the function call correctly.  I inserted the closing parenthesis, and it was good to go! 

Here's a different scenario-

What if I wanted to select a Region from a drop down list, and have it filter the available countries?  Would that still work?  That's a much closer setup to what I'm actually trying to accomplish.

Coordinator
Jan 20, 2010 at 8:05 PM

Great. That alert test is pretty basic, but it tells you if things are healthy.  Alerts are your friend.

Sure, what's in the lists makes no difference as long as the constructs are right.

M.

Mar 31, 2010 at 3:17 PM

Dear Marc,

I did as you suggested and added an alert.  When the alert is inside "$(document).ready(function() {" it doesn't fire, but when I move it before that snippet of code it does work.

I'm an ultra novice and I can't for the life of me figure out what the problem is, what should I be looking for?

Thanks,

Ken

Coordinator
Mar 31, 2010 at 8:51 PM

Ken:

If the alert is not firing, then your references to the jQuery library and SPServices are not valid. Make sure that the two src links point to the .js files correctly.

M.

Apr 14, 2010 at 2:40 PM

Dear Marc,

 

I have taken another whack at this and instead of using a CEWP, I have put the calls to the scripts directly into my pages with no luck. 

When I ctrl+click on the links to the JQuery libraries in the pages in SharePoint Designer they come up just fine, but the cascading is still not working.  Just to ensure that the javascripts were loading in the page, I created a tiny script with an alert in it and called it from the page with no problems.  In the script itself, "$" is a hyperlink and when I ctrl+click that I get the message "code hyperlink not found."  I tried changing the "$" to "JQuery" and had the exact same problem.

Can you please tell me what does the "$" link to and why is not there?

 

Coordinator
Apr 14, 2010 at 6:57 PM
Can you post your code? It's hard to tell what's going on. The $ is part of jQuery. It shouldn't be a link; it just precedes the jQuery calls. M.
Apr 14, 2010 at 7:06 PM
sympmarc wrote:
Can you post your code? It's hard to tell what's going on. The $ is part of jQuery. It shouldn't be a link; it just precedes the jQuery calls. M.

Here's what I'm using:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" language="javascript" SRC="../../jQuery_Library/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" SRC="../../jQuery_Library/jquery.SPServices-0.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "Regions",
            relationshipListParentColumn: "Country",
            relationshipListChildColumn: "Title",
            parentColumn: "Country",
            childColumn: "Region",
        });
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "States",
            relationshipListParentColumn: "Region",
            relationshipListChildColumn: "State",
            relationshipListSortColumn: "ID",
            parentColumn: "Region",
            childColumn: "State"
        });
    });
 
</script>

 

Coordinator
Apr 14, 2010 at 7:15 PM

I just answered your post at Stump the Panel, too!  Let's wrap this up obver here.

Add an alert right below $(document).ready(function() {
alert("jQuery is installed!");

If you see that alert, then the jQuery library is referenced correctly.

Do you have the underlying lists in place? Are the right columns on the form page?  You can check this by adding the debug: true option to the two SPCascadeDropdown calls.  Until you get things working, I'd remove the second one and just focus on the first.

M.

Apr 14, 2010 at 7:29 PM
sympmarc wrote:

I just answered your post at Stump the Panel, too!  Let's wrap this up obver here.

Add an alert right below $(document).ready(function() {
alert("jQuery is installed!");

If you see that alert, then the jQuery library is referenced correctly.

Do you have the underlying lists in place? Are the right columns on the form page?  You can check this by adding the debug: true option to the two SPCascadeDropdown calls.  Until you get things working, I'd remove the second one and just focus on the first.

M.

OK, I'm not seeing the alert but as far as I can tell the links to the jQuery libraries are good. The .js files pop up when I ctrl+click on them in SP Designer.

 

Coordinator
Apr 14, 2010 at 7:46 PM

If you don't see the alert, then something isn't right with the references.  Since the alert is wrapped in the $(document).ready (which is a jQuery function), if jQuery is properly referenced then it should fire.

M.

Apr 15, 2010 at 1:48 PM
sympmarc wrote:

If you don't see the alert, then something isn't right with the references.  Since the alert is wrapped in the $(document).ready (which is a jQuery function), if jQuery is properly referenced then it should fire.

M.

The references to the jquery libraries I assume? 

I created a .js file that just contained an alert, put it in the same directory as the jQuery libraries, stripped out all the rest of my code, referenced that file in my page, and the alert fired just fine. 

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" language="javascript" SRC="../../jQuery_Library/untitled_1.js"></script>

Is there any possible reason that one .js file would load properly and not another from the same location? 

One other thing I noticed was that even if I put an alert before the $(document).ready in the complete script (see below) it still won't fire.

<script type="text/javascript" language="javascript" SRC=" ../../jQuery_Library/jquery-1.4.2.min.js"></script>

<script type="text/javascript" language="javascript" SRC=" ../../jQuery_Library/jquery.SPServices-0.5.1.min.js"></script>

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

 

alert("hi Ken");

$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({

relationshipList: "Regions",

relationshipListParentColumn: "Country",

relationshipListChildColumn: "Title",

parentColumn: "Country",

childColumn: "Region",

});

$().SPServices.SPCascadeDropdowns({

relationshipList: "States",

relationshipListParentColumn: "Region",

relationshipListChildColumn: "State",

relationshipListSortColumn: "ID",

parentColumn: "Region",

childColumn: "State"

});

});

 

</script>

 

 

Coordinator
Apr 15, 2010 at 1:50 PM

Do you need to check in your changes?

M.

Apr 15, 2010 at 2:15 PM
sympmarc wrote:

Do you need to check in your changes?

M.

Nope, I'm editing the files without checking them out.

 

Coordinator
Apr 15, 2010 at 2:19 PM

If you look at the page source, can you see that the scripts are in place?  That "hi Ken" alert should fire.

M.

Apr 15, 2010 at 3:00 PM
sympmarc wrote:

If you look at the page source, can you see that the scripts are in place?  That "hi Ken" alert should fire.

M.

Yes, I can see the scripts are in place where ever I view the page's source.  I've also found that if I segregate the alert into it's own script it works just fine.

 

Coordinator
Apr 15, 2010 at 3:04 PM

I'm running out of ideas...

M.

Apr 15, 2010 at 3:17 PM
sympmarc wrote:

I'm running out of ideas...

M.

Me too. Thanks for your assistance.  I'm going to try and re-build this from scratch and see what happens.

 

Apr 16, 2010 at 4:57 PM
gken69 wrote:
sympmarc wrote:

I'm running out of ideas...

M.

Me too. Thanks for your assistance.  I'm going to try and re-build this from scratch and see what happens.

 

Mark,

Using the helpful hint I found here (http://tinyurl.com/y836t7p) I was able to determine that the jQuery library is loading, but the SharePoint services don't seem to be loading.  Obviously both of the minified files are in the same location and are referenced in the same way.  Got any ideas?

 

Thanks,

 

Ken

Coordinator
Apr 16, 2010 at 5:13 PM
Edited Apr 16, 2010 at 5:13 PM

Are you certain that 

<script type="text/javascript" language="javascript" SRC=" ../../jQuery_Library/jquery.SPServices-0.5.1.min.js"></script>

 

is pointing to the right file?

 

BTW, the current version is v0.5.4.

 

M.

Apr 16, 2010 at 6:10 PM
sympmarc wrote:

Are you certain that 

<script type="text/javascript" language="javascript" SRC=" ../../jQuery_Library/jquery.SPServices-0.5.1.min.js"></script>

 

is pointing to the right file?

 

BTW, the current version is v0.5.4.

 

M.

Yes, I'm certain that I'm pointing to the right file. 

The thing that's really puzzling is that it seems to be just the contents of this one file that won't load.  I created an alert script and gave it the name "jquery.SPServices-0.5.1.min.js" and it loaded just fine and I tried changing the name of the original SPServices file and it still wouldn't load.

 

Coordinator
Apr 16, 2010 at 6:26 PM

Yeah, there's something not right there. Have you tried downloading it again? 

M.

Apr 16, 2010 at 7:15 PM
sympmarc wrote:

Yeah, there's something not right there. Have you tried downloading it again? 

M.

I haven't, but I'll give it a shot over the weekend. Thanks again! -Ken

 

Coordinator
Apr 22, 2010 at 8:28 PM

Any luck, Ken?

M.

Apr 23, 2010 at 5:21 AM

Marc, I also struggle with 0.5.4 to register the jQuery().SPServices object. Currently trying to debug it using IE's F12 Developer Tools. Not much luck though.

Apr 23, 2010 at 5:34 AM
Edited Apr 23, 2010 at 5:38 AM

I use the /jQuery library to store the scripts and Muhimbi.Infuser to incorporate them in the pages with the following code. 

<script type='text/javascript' language='javascript'
    src='/jQuery/jQuery-1.4.2.js'></script>
<script type='text/javascript' language='javascript'
    src='/jQuery/jQuery.SPServices-0.5.2.js'></script>
<script type='text/javascript' language='javascript'
    src='/jQuery/jQuery.SPServices-0.5.4.js'></script>
<script type='text/javascript' language='javascript'
    src='/jQuery/SharePoint.ListViews.InstantListFilter.js'></script>

I can see through Chrome developer tools that both 0.5.2 and 0.5.4 are loaded about 3ms later than my script that references jquery().SPServices in a document.ready function call. No longer the highlighted, now 0.5.2 loads before, still nothing changed.

Uncaught TypeError: Cannot call method 'SPGetCurrentSite' of undefined

$(function() {
    var web = $().SPServices.SPGetCurrentSite();

});

 

 

 

 

 

Apr 23, 2010 at 6:07 AM
Edited Apr 23, 2010 at 6:26 AM

Actually, if I set a breakpoint at 

var SLASH = '/';

It never hits in either 0.5.2 or 0.5.4 :-(

 

Update: No! I'm wrong. It hits, but at some point later SPServices becomes undefined again.

Apr 23, 2010 at 6:38 AM

Looks like I had another CEWP in place that called jPoint.min.js and displayed Jan Tielens's quick search-as-you-type. Not sure why, but somehow it reset the SPServices to undefined. Removing the CEWP solved the problem though the failure mechanism is yet unclear.

Apr 23, 2010 at 7:05 AM

I think the problem is that the CEWP referenced jQuery-1.4.2 once again which caused the object to be redefined and the SPServices extensions lost. Problem solved for me.

Coordinator
Apr 23, 2010 at 11:00 AM

ACrush:

Interesting little thread.  So you're all set? ;+)

M.

Apr 23, 2010 at 11:04 AM

I have SPServices back online. Not sure if gken69 has their problem solved. But who knows, they might have a similar issue.

May 6, 2010 at 4:47 PM

Yes, I finally figured out the problem was IE6.  I removed a comma after <childColumn: "Region",> and it worked fine.

Thanks again for all your help.

 

Best,

Ken

Coordinator
May 7, 2010 at 1:15 AM

Ken:

Sometimes no matter how long you stare at code, you miss the simplest thing! That comma is right there in front of me in your posts above and it's totally obvious today.  Sorry to have led you on a wild goose chase, and I'm glad you solved it.  It shouldn't have had anything to do with IE6, by the way, and everything to do with that extra comma.

I'm going to check the examples in the documentation and make sure that comma isn't there somewhere where you might have copied it.

M.