Why can't I figure this one out??

Sep 6, 2009 at 6:04 AM

Okay, this question is probably very stupid, but seeing as how I can not get the cascaded dropdowns to work in the slightest and I have been trying for a number of days, I must ask.

Background: I am working on a hosted sharepoint site residing on a microsoft exchange server. The site I am working on is for the company's internal employee hours tracking and scheduling.


My first question is location of the script and script references: Where do I place the calls? right now I have the script references for jquery here:


 

<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script id="onetidPageTitleAreaFrameScript">
document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
</script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<script language="javascript" type="text/javascript" src="https://behuninassociates1commicrosoftonlinecom-1.sharepoint.microsoftonline.com/TimeExpense/jquery.1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="https://behuninassociates1commicrosoftonlinecom-1.sharepoint.microsoftonline.com/TimeExpense/jquery.SPServices-0.2.8.min.js"></script>
</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script language="javascript" type="text/javascript" src="https://sitename.sharepoint.microsoftonline.com/TimeExpense/jquery.1.3.2.js"></script>

<script language="javascript" type="text/javascript" src="https://sitename.sharepoint.microsoftonline.com/TimeExpense/jquery.SPServices-0.2.8.min.js"></script>

</asp:Content>

Is this the right location within the page?

 

Second: Where do I place the jquery function? Right now I have it located after another JS function I am using to populate default values in a people picker field, should it be in it's own block of script? Also, do I need to "push" the function on load, and if so how?


I'm just not getting this and I'm feeling very, very, lost. Thanks for your help, I've been learning a whole lot!

Sam

 


Coordinator
Sep 6, 2009 at 1:08 PM
Sam:

You seem to be doing things right. What are you seeing? Errors? No expected behavior? etc.?

I would put the function call either in a function called by _spBodyOnLoadFunctionNames or in a $(document).ready()

M.

--Apple-Mail-1--946678328--
Sep 7, 2009 at 1:11 AM

Okay, I placed the function call inside an existing function that is called via: _spBodyOnLoadFunctionNames.push("fillDefaultValues");

The function fillDefaultValues populates a people picker that I'm using to filter views for administration purposes.  I inserted the jQuery code at the end of this function after it .

 

The good news is that now I am getting at least evidence that something is happening.  The bad news is that I'm getting a javascript error: 'SPServices' is null or not an object.  Which makes me think that somehow my reference to the jQuery library is off or misplaced, however I've tested my reference links and they definitely open the correct files.

Thoughts?

 

Thanks again,

 

Sam

Sep 7, 2009 at 5:28 AM

Okay, got rid of the error by placing the function like so:

 

 

$(document).ready(function() {
      ().SPServices.SPCascadeDropdowns({
relationshipWebURL: "https://behuninassociates1commicrosoftonlinecom-1.sharepoint.microsoftonline.com/TimeExpense", // [Optional] The name of the Web (site) which contains the relationships list
relationshipList: "Projects", // The name of the list which contains the parent/child relationships
relationshipListParentColumn: "Customer", // The name of the parent column in the relationship list
relationshipListChildColumn: "Project", // The name of the child column in the relationship list
parentColumn: "Customer", // The name of the parent column in the form
childColumn: "TEProject" // The name of the child column in the form
});
 });

 

$(document).ready(function() {

      ().SPServices.SPCascadeDropdowns({

relationshipWebURL: "https://sitename-1.sharepoint.microsoftonline.com/TimeExpense", // [Optional] The name of the Web (site) which contains the relationships list

relationshipList: "Projects", // The name of the list which contains the parent/child relationships

relationshipListParentColumn: "Customer", // The name of the parent column in the relationship list

relationshipListChildColumn: "Project", // The name of the child column in the relationship list

parentColumn: "Customer", // The name of the parent column in the form

childColumn: "TEProject" // The name of the child column in the form

});

 });

 

 

I've tested with success by using

$("a").click(function(event){

alert("test");

});

 

But still I cannot get the cascading dropdowns to funciton.  I've tried multiple different names (in case of weird internal names) for the relationshiplist child column.   Any suggestions or ideas where I'm going wrong?

 

Thanks,

Sam

Coordinator
Sep 8, 2009 at 2:55 PM

Sam:

Are you still seeing an error or is the cascading just not working?  The easiest way to validate the underlying column names is to go into the List Settings and click on the column name to bring up the column options page.  The URL will look something like this:

http://[servername]/[sitename]/_layouts/FldEdit.aspx?List=%7B46878048%2D9F0F%2D40A9%2DBA8A%2D79ADDCE0B3B9%7D&Field=Choice%5Fx0020%5FAdd

The underlying column name is bolded above.  Note that the underscores are encoded as %5F, so the underlying column is Choice_x0020_Add.

You're also missing the leading dollar sign above, but I assume that's just a pasting issue?  Here's an example call I've been using in testing:

$(document).ready(function() {
   $().SPServices.SPCascadeDropdowns({
    relationshipWebURL: "/Intranet/JQueryLib",
    relationshipList: "Regions",
    relationshipListParentColumn: "Country",
    relationshipListChildColumn: "Title",
    parentColumn: "Country",
    childColumn: "Region"
   });
});

M.

Sep 8, 2009 at 3:11 PM

Hi Marc,

 

So first of all I left out the leading dollar sign, thanks for catching my oversight!   I checked the column names and they are correct, but now the code is returning a javascript error: "SPServices is NULL or not an object."  What do you think?

 

Thanks,

 

Sam

Coordinator
Sep 8, 2009 at 3:26 PM

You can get the "SPServices is NULL or not an object." error for many reasons.  I just got in in my development because I was missing a closing parentheses.  Also, make sure that your reference to the jQuery library is right.  In SharePoint Designer, Ctrl-Click on the src link to make sure that it opens the .js file as you expect.

M

Sep 9, 2009 at 3:51 AM

Okay, got it working, I don't really understand jquery however it turns out that if you use (or I use) 0.2.8.js versus 0.2.8.min.js that it will work.  I should have tried the different release before.

 

To further my education, what is the difference between the two (other then the formatting)?

 

Thanks again!

 

Sam

 

Coordinator
Sep 9, 2009 at 12:50 PM

The 0.2.8.min.js file has been "minified", which basically compresses it so that it is as small as possible for download.  Here's a link which explains it: http://compressorrater.thruhere.net/

In my testing, the minified version behaved exactly the same using all of my test code.  If you're seeing otherwise, then perhaps I should remove the minified version.  All you did was swap files?

M.

Sep 9, 2009 at 11:25 PM
Edited Sep 9, 2009 at 11:25 PM

Originally I had uploaded the 0.2.8.min.js file and referenced it.  I verified that the reference did actually open the file.  I'm not sure what the minified file is supposed to look like, but when it did open it appeared as a single, long, line of variables and commands.

Using this file I kept getting the javascript error above, 'SPServices is Null or not an object'  After checking and rechecking the code for matching parentheses and what not, I figured what the heck, let me try the other file.  And voila!  It worked.  I think I should probably re-download the minified version and test using that.  It's possible the version I uploaded was corrupted or something like that.  I'll let you know when I get home and working on it later tonight.

What I do know is that the cascaded dropdown function is amazing, it is exactly what I've been looking for.  I also think I've come up with a method (albeit dirty) to filter by active 'items', I'll post it as soon as I've got it working.

 

Sam

Sep 10, 2009 at 2:57 AM

Just tested using a fresh copy of the minified version, does not work.  No javascript errors or anything, but the cascading dropdowns don't work either.  I wouldn't need to change anything other than the reference in my code for the minified version would I?

 

Sam

Coordinator
Sep 10, 2009 at 3:04 AM

Not sure what's going on there, but I just removed the minified version to avoid anyone else having the problems you've had.  Sorry to have put you through all that.

Tomorrow I may try a different minification method.  Let me know if you're game to test it for me.

M.

Sep 11, 2009 at 5:51 AM

I'm also having the a problem with 'SPServices' is null or not an object. 

I'm not a javascript expert, so I'm not comfortable with the details of the syntax, but should these references in my form work?  I have the call to fillDefaultValues in-line in the form code.

All the internal field names match the display names...I made sure I didn't put any spaces in the list that holds the data.

<script language="javascript" type="text/javascript" src="http://portal.awbikes.local/SiteDirectory/wf/JS/jquery.SPServices-0.2.8.js"></script>
<script language="javascript" type="text/javascript" src="http://portal.awbikes.local/SiteDirectory/wf/JS/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
//$(document).ready(function() {
_spBodyOnLoadFunctionNames.push("fillDefaultValues");
 function fillDefaultValues()
 {
     $().SPServices.SPCascadeDropdowns
     ({
     relationshipWebURL: "http://portal.awbikes.local/SiteDirectory/wf",
     relationshipList: "SubServiceTypes",
     relationshipListParentColumn: "Title",
     relationshipListChildColumn: "SubServiceCategory",
     parentColumn: "AM Sub Service 1",
     childColumn: "Sub Service Category"
  });
 };
</script>

Any help you could offer would be appreciated.

Coordinator
Sep 11, 2009 at 12:24 PM
Edited Sep 11, 2009 at 12:29 PM

rw5207:

I see that you have $(document).ready(function() in your code, but commented out.  With jQuery functions, I'd recomment that you use this to trigger your calls rather than _spBodyOnLoadFunctionNames.push.  However, I think that the problem with your code is the semi-colon after the final curly brace.

Try this and see if it works for you (assuming that the column names you are using are correct):

<script language="javascript" type="text/javascript" src="http://portal.awbikes.local/SiteDirectory/wf/JS/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http://portal.awbikes.local/SiteDirectory/wf/JS/jquery.SPServices-0.2.8.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
   $().SPServices.SPCascadeDropdowns({
     relationshipWebURL: "http://portal.awbikes.local/SiteDirectory/wf",
     relationshipList: "SubServiceTypes",
     relationshipListParentColumn: "Title",
     relationshipListChildColumn: "SubServiceCategory",
     parentColumn: "AM Sub Service 1",
     childColumn: "Sub Service Category"
   });
});
</script>

Note that you don't need to provide relationshipWebURL if the list is in the same site; the function will default to the current site. Also note that I've reversed the script references to the jQuery core and our library.  I'm not sure that this is necessary, but I would always list things in order of inheritance.

Hope this works, but definitely let me know if it doesn't.

M.

Sep 11, 2009 at 10:01 PM

Marc--

Here's a post with what I've done and my problem.

http://sharepointruss.wordpress.com/2009/09/11/cascading-drop-downs-in-a-sharepoint-custom-task-form/

My goal is to figure this out and then have a nice post others can refer to.

Russ 

Coordinator
Sep 12, 2009 at 1:27 AM

Sure thing.  Thanks for the great write up!

Did you try reversing the script references as I did above?  I don't think that's the problem, but it's worth trying.

Also, in the picture where you are showing the debug error in your post, I can't tell if the last character in the line:

    $(document).ready(function() {

is a parenthesis or a squiggly bracket; it needs to be the latter, as above.

M.

Sep 12, 2009 at 3:45 AM
Edited Sep 12, 2009 at 4:49 AM

Holy Crap!  It looks like the order of the script reference did the trick!  Un-frickin' believable...and totally cool!  I can finish my post.

When I'm done with my post, would you be willing to review it for technical accuracy?

Ooops...not too fast!  I'm trying to re-create from scratch and now I'm getting errors when I put the code in the page.  I need to find the correct place to put it.

Everything is OK.  I just forgot a closing </script> tag.

Thanks!

Russ

 

Coordinator
Sep 12, 2009 at 3:49 AM

Absolutely, Russ.  Glad you got it working!

M.

Sep 13, 2009 at 12:05 AM
Edited Sep 13, 2009 at 12:06 AM

Hey, so it's all working as planned and I managed to add a filter to my child column based on whether or not it was an active project.  Unfortunately I had to hard code it, but it would be really neat to see the values passed as variables.  I'm going to try to work the same sort of CAML magic on the parent column but I think I'll have to create a seperate function.  My modified code (from your jquery 0.2.8 file) is below: (now I reference jquery.SPServices-0.2.8.mine.js)

 

 

// Filter based on the currently selected parent column's value
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='" + opt.relationshipListParentColumn + "'/><Value Type='Text'>" + parentSelectedValue + "</Value></Eq><Eq><FieldRef Name='ActiveProject'/><Value Type='Number'>1</Value></Eq></And></Where></Query>",

 

// Filter based on the currently selected parent column's value and if project is active

CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='" + opt.relationshipListParentColumn + "'/><Value Type='Text'>" + parentSelectedValue + "</Value></Eq><Eq>

<FieldRef Name='ActiveProject'/><Value Type='Number'>1</Value></Eq></And></Where></Query>",

 

 

I created a yes no column in the reference table called ActiveProject. If the child drop down is supposed to be displayed the activeproject Yes/No box is checked (returns 1 if checked, 0 if not).

It is working out great for my project, and maybe it can help someone else.

 

Best,

 

Sam

 

 

 

 

Coordinator
Sep 14, 2009 at 2:24 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.