Newbie - trying to use SParrangechoices in a CEWP on a custom edit form

Oct 5, 2012 at 4:04 PM

Hi,

I'm really not that technical but stumbled across SPservices from a google search and seeing as it provides the functionality that i'm looking for to display radio buttons horizontally instead of vertically decided to have a go.

I've downloaded the jquery files and the SPservices files and stored them in the site assets folder on my SP site.  I've then created a customer edit form in SPD 2010 and I attempted to insert the necessary code into this form but in code view I'm unable to insert anything directly after

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

as there's a yellow section which extends from the top of the code to a few lines below this which is not editable.

I've tried inserting it at various points in the code with no luck so I turned to a CEWP instead.

I've inserted the following code in the CEWP:

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


  $(document).ready(function() {
    $().SPServices.SPArrangeChoices({
      listName: "",
      columnName: "RearrangeMe",
      perRow: 5,
      randomize: false
    });
  });</script>

And I've inserted the following in the code for the form field as I'm using a custom form in 2010

<td width="400px" valign="top" class="ms-formbody">
       <xsl:comment>fieldName="RearrangeMe"</xsl:comment>
       <SharePoint:FormField runat="server" id="ff10{$Pos}" ControlMode="Edit" FieldName="Businesses_x0020_and_x0020_locat" __designer:bind="{ddwrt:DataBind('u',concat('ff10',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Businesses_x0020_and_x0020_locat')}"/>
       <SharePoint:FieldDescription runat="server" id="ff10description{$Pos}" FieldName="Businesses_x0020_and_x0020_locat" ControlMode="Edit"/>
      </td>

The radio buttons have not changed for this field, where am I going wrong please?

Coordinator
Oct 5, 2012 at 4:38 PM

Everything you're doing looks right.

Try adding an alert into the $(document).ready() to make sure that jQuery is loading properly.

M.

Oct 5, 2012 at 4:46 PM

I changed the code to

<script type="text/javascript">

  $(document).ready(function() {
    alert("it worked!");
    $().SPServices.SPArrangeChoices({
      listName: "",
      columnName: "RearrangeMe",
      perRow: 5,
      randomize: false
    });
  });</script>

When I load the form no message appears, does that mean jQuery isn't loading properly?  If so, what could be the cause?

Many thanks

Coordinator
Oct 5, 2012 at 4:59 PM

Yes, that little test lets you know if jQuery is loaded correctly. If jQuery isn't loaded, the $(document).ready() function is undefined, therefore you don't see the alert.

Check to make sure that these paths are correct:

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

M.

Oct 8, 2012 at 10:51 AM

Hi,

I've found the problem in the references, I was missing a couple of sections in the URLs.

Many thanks

Helen

Oct 7, 2013 at 6:09 PM
M.

We are super newbies to SharePoint 2010 Foundation. We have been trying the above code for a couple of days. We can't make this work. Here is what we are doing

This is a custom List:

This is in our Designer:

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader"> <nobr>TestThis1</nobr> </H3> </td>
<td width="400px" valign="top" class="ms-formbody">
<xsl:comment>FieldName="TestThis1"</xsl:comment>
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="TestThis1" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@TestThis1')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="TestThis1" ControlMode="New"/>
</td>
</tr>

This is in a CEWP:

<script language="javascript" src="/jQueryScript/jquery-1.8.2.min.js" type="text/javascript"></script><script language="javascript" src="/%20jQueryScript/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() { alert("it worked!"); $().SPServices.SPArrangeChoices({ listName: "AuditList", columnName: "TestThis1", perRow: 4, randomize: false }); $(document).ready(function() { alert("it worked!"); $().SPServices.SPArrangeChoices({ listName: "AuditList", columnName: "TestThis2", perRow: 4, randomize: false }); });</script> We really need to make this work for a project we are building. Can you tell us what we are doing wrong.

Thanks so much,
Marsha
Coordinator
Oct 7, 2013 at 6:29 PM
Edited Oct 7, 2013 at 6:30 PM
Marsha:

You haven't said what's happening, but if I had to guess, I'd say that you are probably getting errors because your reference to SPServices isn't correct.

If you look at what I've bolded below from your code above, you'll see that you have an encoded space before the folder name in the SPServices reference. I'm guessing that's not right.

<script language="javascript" src="/jQueryScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/%20jQueryScript/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>

I'd suggest you switch to SPServices v2013.01, which is the current version.

M.
Oct 7, 2013 at 6:36 PM
M.

I fixed what you are talking about but I'm still not getting what I need:

<script language="javascript" src="/jQueryScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/jQueryScript/jquery.SPServices-0.7.2.min.js" type="text/javascript">

Marsha
Coordinator
Oct 7, 2013 at 7:32 PM
Marsha:

So what's happening? An error in the browser, no visible difference, what?

Cleaning up your code above, I get this:
$(document).ready(function() {

  alert("it worked!");
  $().SPServices.SPArrangeChoices({
    listName: "AuditList",
    columnName: "TestThis1",
    perRow: 4,
    randomize: false
  });

  $(document).ready(function() {
    alert("it worked!"); 
    $().SPServices.SPArrangeChoices({ 
      listName: "AuditList",
      columnName: "TestThis2",
      perRow: 4,
      randomize: false 
    }); 
  });
You've got a $(document).ready() inside a $(document).ready(), and you're not closing the outer brackets.
M.
Oct 8, 2013 at 11:18 AM

M.

I’m getting nothing. No alerts, no change in the form, nothing. I’m sorry I’m not getting this. Javascript always messes me up.

This is what I’m trying to change:

cid:image001.png@01CEC3EB.33783590

Path to the jQuery:

http://wss.inside.ups.com/sites/SCSBT/CustomsBrokerageCompliance/JQueryScript/jquery.SPServices-0.7.2.min

http://wss.inside.ups.com/sites/SCSBT/CustomsBrokerageCompliance/JQueryScript/jquery.-1.8.2.min


cid:image002.png@01CEC3E8.1220C6D0

Code in Designer:

<xsl:comment>FieldName="TestThis1"</xsl:comment>

<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="TestThis1" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@TestThis1')}"/>

<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="TestThis1" ControlMode="New"/>

TestThis2

<xsl:comment>FieldName="TestThis2"</xsl:comment>

<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="TestThis2" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@TestThis2')}"/>

<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="TestThis2" ControlMode="New"/>

Code in the CEWP:

<script language="javascript" src="/jQueryScript/jquery.SPServices-0.7.2.min.js" type="text/javascript">

<script type="text/javascript">

$(document).ready(function() {

alert("it worked!");

$().SPServices.SPArrangeChoices({

listName: "AuditList",

columnName: "TestThis1",

perRow: 4,

randomize: false

});

$(document).ready(function() {

alert("it worked!");

$().SPServices.SPArrangeChoices({

listName: "AuditList",

columnName: "TestThis2",

perRow: 4,

randomize: false

});

});</script>

Coordinator
Oct 8, 2013 at 1:12 PM
Edited Oct 8, 2013 at 1:13 PM
You're still not closing the outer $(document).ready() and you need to remove the inner one. Try this:
$(document).ready(function() {

  alert("it worked!");

  $().SPServices.SPArrangeChoices({
    listName: "AuditList",
    columnName: "TestThis1",
    perRow: 4
  });
 
  $().SPServices.SPArrangeChoices({ 
    listName: "AuditList",
    columnName: "TestThis2",
    perRow: 4
  });

});
The alert will fire if your reference to jQuery is correct.

M.
Oct 8, 2013 at 1:57 PM

M.

We did not get an alert so you must be right and the path to the jQuery is not correct. We’ll try to figure that out and let you know. Thanks so much for all your help getting us this far.

Coordinator
Oct 8, 2013 at 2:02 PM
In SharePoint Designer, if you Ctrl-Click the link to the .js file(s), they should open. If they aren't found, your reference isn't right.

If you're going to be doing much with JavaScript/jQuery/SPServices, you'll want to get familiar with the browser debugging tools, where you can also see what files are loading, the Net traffic, etc.

M.
Oct 8, 2013 at 5:45 PM

M.

We finally figured out what was wrong with the code. Actually there were 2 issues. You were correct. URL was not correct referencing the jQuery. But the second we accidentally found. The URL’s exceeded the limited. Once we fixed both of these issues we hit pay dirt!

Thanks for all your help!

Marsha

Coordinator
Oct 8, 2013 at 7:37 PM
Excellent! Glad you got it working.

M.
Oct 14, 2013 at 3:58 AM
Edited Oct 14, 2013 at 3:59 AM
Just out of curiousity how many chars is the limit for URL's in SPD?

People here have been kinda generous on the naming of folders and subfolders :(.

Luckily lists and forms exists somewhere close to the root of the server.
Coordinator
Oct 15, 2013 at 4:24 PM
SPD doesn't have any limits; it'll be the browser that has issues. You'll know when you hit the limits because you'll get errors, but it's a big number.

M.
Oct 25, 2013 at 6:53 AM
Edited Oct 25, 2013 at 6:54 AM
Thanks M,

This site has been a great help to me in both my job and intellectual pursuit.

I'm tempted to buy a hat, just so I can tip it, in admiration for the great job you guys are doing. :)

Francis.
Coordinator
Oct 25, 2013 at 1:02 PM
You're very welcome!

M.