$().SPServices.SPArrangeChoices in CEWP

Feb 10, 2012 at 12:23 PM

I want to utilize $().SPServices.SPArrangeChoices.  I've read the documentation and discussions as well as I could, but I am not a developer so I do not completely understand the majority of it.  I want to just use it in a content editor webpart because it will be good enough for what I need to do.  This is what I have in the CEWP right now that is not working, any help is greatly appreciated:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" language="javascript" src="/Shared%20Documents/Jquery%20Code/jquery-1.7.0.min.js"></script>
<script type="text/javascript" language="javascript" src="/Shared%20Documents/Jquery%20Code/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

$().SPServices.SPArrangeChoices({
listName: "",
columnName: "Affected Groups",
perRow: 10,
randomize: true
}); 
    });
</script>

Coordinator
Feb 10, 2012 at 6:31 PM

coopsemail10:

I'm assuming that you've pasted exactly what's in the CEWP? If so, you should remove the first line. That is the line below which you would add the script directly into the page, but it will break things if it is in your CEWP.

Also be sure that the references to the two .js files are correct.

M.

Feb 13, 2012 at 11:12 AM

Sorry, I noticed that after I posted my message. I removed that and made sure the reference to the two js files are correct by going directly to the src url’s successfully, but still no luck. Any other advice?



<script type="text/javascript">
$(document).ready(function() {

$().SPServices.SPArrangeChoices({
listName: "",
columnName: "Affected Groups",
perRow: 5,
randomize: false
});
});
</script>

Screen shot of the page as it is now.



Tim Cooper

Kentucky Department of Education

Office of Administration and Support

Division of District Support

502-564-4403 ext 4425

From: sympmarc [email removed]
Sent: Friday, February 10, 2012 2:32 PM
To: Cooper, Timothy - Division of District Support
Subject: Re: $().SPServices.SPArrangeChoices in CEWP [SPServices:303165]

From: sympmarc

coopsemail10:

I'm assuming that you've pasted exactly what's in the CEWP? If so, you should remove the first line. That is the line below which you would add the script directly into the page, but it will break things if it is in your CEWP.

Also be sure that the references to the two .js files are correct.

M.

Coordinator
Feb 13, 2012 at 12:50 PM

Try just adding an alert to see if jQuery is actually loaded:
http://sympmarc.com/2011/05/03/adding-jquery-to-a-sharepoint-page-step-one-always/

M.

Feb 13, 2012 at 12:57 PM

Yep, I read that and tried that as well this morning before I sent this to you J. I also noticed in a discussion that there may need to be more than the two files that are referenced? Here is the discussion:

  1. Description: http://0.gravatar.com/avatar/cdbc76cc926666d5a8c166aa031dc282?s=40&d=identicon

jim

January 19, 2012 at 5:05 pm (UTC -5)

Reply

@Marc: Thanks for the super quick response. i was missing the http://jquery.com/ …. 1.7.1.js. I assumed that the only files that needed to be ref was the 2 .js files from your download. Apologies for the bother. cheers.

    1. Description: http://1.gravatar.com/avatar/152629bd7ea49737f9a5efea442619b5?s=40&d=identicon

Marc

January 19, 2012 at 5:06 pm (UTC -5)

Reply

Sure thing. I always prefer to keep a local copy of the files, usually in a Document Library, but you can also use the CDNs, as you are.

M.

Tim Cooper

Kentucky Department of Education

Office of Administration and Support

Division of District Support

502-564-4403 ext 4425

From: sympmarc [email removed]
Sent: Monday, February 13, 2012 8:51 AM
To: Cooper, Timothy - Division of District Support
Subject: Re: $().SPServices.SPArrangeChoices in CEWP [SPServices:303165]

From: sympmarc

Try just adding an alert to see if jQuery is actually loaded:
http://sympmarc.com/2011/05/03/adding-jquery-to-a-sharepoint-page-step-one-always/

M.

Coordinator
Feb 13, 2012 at 1:10 PM

Tim:

I'm not seeing whatever images you're posting for some reason. You need ot reference the jQuery library and SPServices, like you were in your first post.

M.

Feb 13, 2012 at 3:52 PM

I’m not even getting the alert when I try to check the reference to the jquery library and spservices. I give up, thanks for helping.

Tim Cooper

Kentucky Department of Education

Office of Administration and Support

Division of District Support

502-564-4403 ext 4425

From: sympmarc [email removed]
Sent: Monday, February 13, 2012 9:10 AM
To: Cooper, Timothy - Division of District Support
Subject: Re: $().SPServices.SPArrangeChoices in CEWP [SPServices:303165]

From: sympmarc

Tim:

I'm not seeing whatever images you're posting for some reason. You need ot reference the jQuery library and SPServices, like you were in your first post.

M.

Coordinator
Feb 13, 2012 at 6:55 PM

Don't give up!

It's got to be an issue with the path to the .js files.

At first you had this:

<script type="text/javascript" language="javascript" src="/Shared%20Documents/Jquery%20Code/jquery-1.7.0.min.js"></script>
<script type="text/javascript" language="javascript" src="/Shared%20Documents/Jquery%20Code/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() { 
    $().SPServices.SPArrangeChoices({
      listName: "",
      columnName: "Affected Groups",
      perRow: 10,
      randomize: true
    }); 
  });
</script>

If your .js files are stored in a Document library in the root site on the server, meaning http://servername/Shared Documents then it should work. Your path also shows that you have a folder in the Shared Documents library called Jquery Code, where you've stored your .js files.

M.

Feb 13, 2012 at 8:48 PM

I’ve cleaned it up, let me see if I can ask better questions now J.

Question 1: Exactly what files do I need? I have four files in the root folder of a document library. I have the two files that are part of the jquery.SPServices-0.7.1.zip and I have the two jquery library files from http://docs.jquery.com/Downloading_jQuery#Current_Release.

Question 2: Once I have the correct files from Question1, if I can get to them via the url (src=” https://intranet.education.ky.gov/offices/OAS/DDS/Scripts/jquery-1.7.1.min.js”) what else could be wrong?

I created a library just for Scripts in my site (I don’t manage the root site). Here is the current entry in the CEWP on the top of the page of the list I am working with:

<script type="text/javascript">

$(document).ready(function() {

$().SPServices.SPArrangeChoices({

listName: "",

columnName: "Affected Groups",

perRow: 10,

randomize: true

});

});

</script>

Tim Cooper

Kentucky Department of Education

Office of Administration and Support

Division of District Support

502-564-4403 ext 4425

From: sympmarc [email removed]
Sent: Monday, February 13, 2012 2:56 PM
To: Cooper, Timothy - Division of District Support
Subject: Re: $().SPServices.SPArrangeChoices in CEWP [SPServices:303165]

From: sympmarc

Don't give up!

It's got to be an issue with the path to the .js files.

At first you had this:

<script type="text/javascript">
  $(document).ready(function() { 
    $().SPServices.SPArrangeChoices({
      listName: "",
      columnName: "Affected Groups",
      perRow: 10,
      randomize: true
    }); 
  });
</script>

If your .js files are stored in a Document library in the root site on the server, meaning http://servername/Shared Documents then it should work. Your path also shows that you have a folder in the Shared Documents library called Jquery Code, where you've stored your .js files.

M.

Coordinator
Feb 14, 2012 at 12:59 PM

You only need one of "each". Since you're unlikely to be debugging either library, you should use the minified version of each. You bascially had that right when you used this:

<script type="text/javascript" language="javascript" src="/Shared%20Documents/Jquery%20Code/jquery-1.7.0.min.js"></script>
<script type="text/javascript" language="javascript" src="/Shared%20Documents/Jquery%20Code/jquery.SPServices-0.7.0.min.js"></script>

The "min" in the filename is the indicator that the fiels are the minified versions. Note that there are instructions at the bottom of the first documentation page that cover all this. If those docs aren't clear, please let me know how I can make them better.

In your second question, I notice that the protocol is https. If the current page doesn't also use https, then you may have a problem.

M.

Feb 14, 2012 at 2:09 PM

Jackpot!! I had to stop trying to use the CEWP, nothing I did would work. I don’t have access to SP Designer (nor the skillset) so incorporated the references/spservices into the newform.aspx instead just by browsing to the directory via windows explorer and modified in notepad. Now when it loads it works as expected. I had to add the same into the editform.aspx as well. So far so good.

Again, you are fantastic!!

Tim Cooper

Kentucky Department of Education

Office of Administration and Support

Division of District Support

502-564-4403 ext 4425

From: sympmarc [email removed]
Sent: Tuesday, February 14, 2012 9:00 AM
To: Cooper, Timothy - Division of District Support
Subject: Re: $().SPServices.SPArrangeChoices in CEWP [SPServices:303165]

From: sympmarc

You only need one of "each". Since you're unlikely to be debugging either library, you should use the minified version of each. You bascially had that right when you used this:


The "min" in the filename is the indicator that the fiels are the minified versions. Note that there are instructions at the bottom of the first documentation page that cover all this. If those docs aren't clear, please let me know how I can make them better.

In your second question, I notice that the protocol is https. If the current page doesn't also use https, then you may have a problem.

M.

Coordinator
Feb 14, 2012 at 3:06 PM

Great!

See, you didn't need to give up.

M.