Can't get SPArrangeChoices to work

Nov 19, 2011 at 11:17 AM

I really, really want this to work because there are other functions in the library I need to figure out how to use also! I know I'm probably making some beyond-new newbie mistake. :(

First, I have the code in my body tag, tried it in the header tag and it doesn't work there either. My SP 2007 aspx page does not have the asp:Content line. I tried typing it in, but got the error that asp:Content was not used with Internet 6.0? (even though I have Internet 7.0 installed)

Here's the first part of the code:

<script language="javascript" type="text/javascript" src="../../scripts/jquery.SPServices-0.6.2.js"></script>
<script language="javascript" type="text/javascript" src="../../scripts/jquery.SPServices-0.6.2.min.js"></script>
<script type="text/javascript">
     $(document).ready(function(){
          alert($().SPServices.SPGetCurrentSite());
          $().SPServices.SPArrangeChoices({
                 columnName: "Technical Ability",
                 perRow: 6,
                 randomize: false
             });
     });
</script>

I tested the links and Designer could find both files. However the $ are read as links also, but Designer can't find those. The alert isn't giving me a message so I don't think I've referenced SPServices correctly.

In Designer, I created a simple aspx page, added a data view, then inserted one of the choice fields from my list as a single item form. This form will eventually have 5 fields with 6 choices each, then after the choice fields, a comment multi-line text box. It is an edit item form (a workflow will insert the item, then the user will update it). I didn't want to add all the fields until I knew I could get this to work correctly.

The row that contains the choice field looks like this ...

     <tr>
      <td class="ms-formbody">
       <b>Technical Ability</b>
       <xsl:comment>FieldName="Technical Ability"</xsl:comment>
       <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Tecnhical_x0020_Ability" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Tecnhical_x0020_Ability')}" DisplayTemplateName=""/>
       <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Tecnhical_x0020_Ability" ControlMode="Edit"/>
      </td>
     </tr>

I read in the discussions about the xsl:comment tag and changing the ms-vb class to ms-formbody. But my page is still rendered looking like ...

Technical Ability
<input id="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl00" name="g_2784501c_3cce_46d3_9f31_db4526ccfda6$ff1_1$ctl00$RadioButtons" type="radio" value="ctl00" /><label for="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl00">Unsatisfactory</label>
<input id="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl01" name="g_2784501c_3cce_46d3_9f31_db4526ccfda6$ff1_1$ctl00$RadioButtons" type="radio" value="ctl01" /><label for="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl01">Average</label>
<input id="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl02" checked="checked" name="g_2784501c_3cce_46d3_9f31_db4526ccfda6$ff1_1$ctl00$RadioButtons" type="radio" value="ctl02" /><label for="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl02">Good</label>
<input id="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl03" name="g_2784501c_3cce_46d3_9f31_db4526ccfda6$ff1_1$ctl00$RadioButtons" type="radio" value="ctl03" /><label for="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl03">Excellent</label>
<input id="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl04" name="g_2784501c_3cce_46d3_9f31_db4526ccfda6$ff1_1$ctl00$RadioButtons" type="radio" value="ctl04" /><label for="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl04">Outstanding</label>
<input id="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl05" name="g_2784501c_3cce_46d3_9f31_db4526ccfda6$ff1_1$ctl00$RadioButtons" type="radio" value="ctl05" /><label for="g_2784501c_3cce_46d3_9f31_db4526ccfda6_ff1_1_ctl00_ctl05">N/A</label>
<input name="btnSave" type="button" value="Save" /> <input name="btnCancel" type="button" value="Cancel" />

What am I doing wrong? Help!

 

Coordinator
Nov 19, 2011 at 12:27 PM
I think the problem is that you are referencing the minified and non-minified versions of SPServices, but not jQuery itself. Look at the bottom of the first page of documentation for more info.

M.
Nov 19, 2011 at 10:09 PM

Yeppers. I knew I was doing something really dumb. That's what I get for staying up all night researching for a solution to this radio button issue and trying to implement without coffee! It works beautifully now. This is truly awesome. Thank you so much.

Coordinator
Nov 20, 2011 at 2:20 PM

Lots of people have issues when they start out with this stuff. It's not dumb, it's learning!

Glad you got it sorted out.

M.

Feb 27, 2012 at 8:20 PM

Hello,

I am also struggling with SPArrangeChoices within a CEWP.  Here is what I have so far:

On my list, I edited the page and added CEWP with the the following source code:

<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.SPServices-0.7.1a.min.js"></script>
<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $().SPServices.SPArrangeChoices({
      listName: "Proposal Input Sheets", 
      columnName: "01 - Proposal",
      perRow: 5
    });
  });
</script>

Back on my list, when I click New to add an item, nothing has changed; the check boxes are still vertical.

What I don't know is if I placed the CEWP in the right place.  I read that this needs to be done as part of NewForm.aspx but can't figure out how to get to it.  Also, I tried adding the code above via SP Designer but again there was no effect.

I appreciate any help you can provide.  Thanks in advance.

Feb 27, 2012 at 9:03 PM

What you could do is go to the New form, and then use View Source, and check that the script lines and the SPServices.SPArrangeChoices call are visible in the html source. If they are not, then you must not have them in the right place yet.

Feb 27, 2012 at 9:35 PM

I was able to view source and see the script lines. Still no change in the form though.

Feb 27, 2012 at 11:07 PM
Edited Feb 28, 2012 at 12:47 AM

Have you tried putting an alert call into the document.ready function, to check whether it is getting called?

Actually, I'd put one before the SPArrangeChoices call, and one after it, both, to see what gets called.

Feb 28, 2012 at 1:03 PM

Yes. But I know I’m missing something (or things). Attached are screenshots of what I did in SP Designer and the preview of that in IE9. I understand the code, but don’t know if I’m implementing it correctly.

SPDesigner-ScreenShot.PNG

NewForm-ScreenShot.PNG

Brett Barkman
Design Technologies Administrator
Jedson Engineering Inc.
5300 DuPont Circle
Milford, OH
45150
P: 513.965.7165

C: 513.225.6687
F: 513.965.5998
jedson.com

From: PerrySharePoint [email removed]
Sent: Monday, February 27, 2012 7:08 PM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: PerrySharePoint

Have you tried putting an alert call into the document.ready function, to check whether it is getting called?

Feb 28, 2012 at 1:07 PM

<<EDIT>>

Sorry about the broken images.  Hopefully these links will work.

http://dl.dropbox.com/u/16197114/SPDesigner-ScreenShot.PNG

http://dl.dropbox.com/u/16197114/NewForm-ScreenShot.PNG

Feb 28, 2012 at 3:27 PM
Edited Feb 28, 2012 at 3:28 PM

I don't understand your code in the screenshot -- the alert call is in the middle of the method call.

What about this:

<script type="text/javascript">
  $(document).ready(function() {
    alert('document.ready fired');
    $().SPServices.SPArrangeChoices({
      columnName: "01 - Proposal",
      perRow: 2
    });
    alert('SPServices.SPArrangeChoices completed');
  });
</script>

Feb 28, 2012 at 6:03 PM

I’m curious about the columnName variable. You said it’s not initialized. I’m at a loss. That’s the name of the field. Is there a “true” field name with mine being just a display name?

From: PerrySharePoint [email removed]
Sent: Tuesday, February 28, 2012 11:28 AM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: PerrySharePoint

I don't understand your code in the screenshot -- the alert call and the apparently uninitialized columnName variable don't make sense to me.

What about this:

<script type="text/javascript">
$(document).ready(function() {
alert('document.ready fired');
$().SPServices.SPArrangeChoices({
columnName: "01 - Proposal",
perRow: 2
});
alert('SPServices.SPArrangeChoices completed');
});
</script>

Feb 28, 2012 at 6:08 PM
Edited Feb 28, 2012 at 6:09 PM

No, read my updated comment above yours -- you quoted an obsolete version, which I edited a while ago -- look at the post above yours to see it. Consider trying that code snippet I posted?

Feb 29, 2012 at 8:34 PM

Thanks.  That snippet works.  Next I'd like to make the labels for each choice vertical and set them above their respective checkbox.  That may be another post.

Feb 29, 2012 at 8:37 PM

Glad to hear you have it working.

Feb 29, 2012 at 8:55 PM

Thanks. One more question about formatting; I’d like to place 5 checkboxs per row. The labels are getting wrapped to the next line. Is there a way to have the box and the whole label on the same line?

http://dl.dropbox.com/u/16197114/sparrange-ScreenShot.PNG

From: PerrySharePoint [email removed]
Sent: Wednesday, February 29, 2012 4:37 PM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: PerrySharePoint

Glad to hear you have it working.

Coordinator
Feb 29, 2012 at 9:19 PM

That's really more of a CSS thing. Since SPArrangeChoices has no idea what CSS you have in place (at least I haven't built that into it), you should add your own CSS to, for example, turn off wrapping.

M.

Mar 1, 2012 at 12:31 PM

Thanks. Do you know of a good resource for this? I’m new to CSS.

From: sympmarc [email removed]
Sent: Wednesday, February 29, 2012 5:20 PM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: sympmarc

That's really more of a CSS thing. Since SPArrangeChoices has no idea what CSS you have in place (at least I haven't built that into it), you should add your own CSS to, for example, turn off wrapping.

M.

Coordinator
Mar 1, 2012 at 4:15 PM

It may be as simple as setting white-space:nowrap;

M.

Mar 2, 2012 at 2:34 PM

Sounds simple enough. Where do I do that?

From: sympmarc [email removed]
Sent: Thursday, March 01, 2012 12:16 PM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: sympmarc

It may be as simple as setting white-space:nowrap;

M.

Coordinator
Mar 4, 2012 at 5:51 AM

Brett:

You can set the CSS attribute either in your custom CSS, inline in the page, or in your script. In this case, in the script may make the most sense.

M.

Mar 13, 2012 at 3:30 PM

Thanks for the tip but when I added “white-space:nowrap;”, the checkboxes went back to vertical alignment. Here’s what the script looks like now:

<script type="text/javascript">

$(document).ready(function() {

$().SPServices.SPArrangeChoices({

columnName: "1000 Process",

perRow: 7

white-space:nowrap;

});

});

</script>

From: sympmarc [email removed]
Sent: Sunday, March 04, 2012 1:51 AM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: sympmarc

Brett:

You can set the CSS attribute either in your custom CSS, inline in the page, or in your script. In this case, in the script may make the most sense.

M.

Coordinator
Mar 13, 2012 at 3:59 PM

You've added CSS in the middle of the function call, so you've broken it. That's why it's reverted to the old format; the function is throwing an error.

Something like this *may* work, but it's hard to say, since I don't have access to your form.

$(document).ready(function() {
  $().SPServices.SPArrangeChoices({ 
    columnName: "1000 Process",
    perRow: 7
  });
$(".ms-RadioText").css("white-space", "nowrap"); });

M.

Mar 13, 2012 at 6:03 PM

Sympmarc,

Adding the “.ms-RadioText” line worked great. Thank you for your help!

From: sympmarc [email removed]
Sent: Tuesday, March 13, 2012 12:00 PM
To: Brett Barkman
Subject: Re: Can't get SPArrangeChoices to work [SPServices:280088]

From: sympmarc

You've added CSS in the middle of the function call, so you've broken it. That's why it's reverted to the old format; the function is throwing an error.

Something like this *may* work, but it's hard to say, since I don't have access to your form.

$(document).ready(function() {
  $().SPServices.SPArrangeChoices({ 
    columnName: "1000 Process",
    perRow: 7
  });
$(".ms-RadioText").css("white-space", "nowrap");
});

M.

Coordinator
Mar 13, 2012 at 8:02 PM

Sure thing!

M.

Aug 1, 2012 at 6:51 PM

Hello again Marc,

This technique is working but I discovered a side effect.  When someone edits an item and the boxes are rearranged, any box that was previously checked gets cleared.  Is there a way to prevent that?

Here is one of the snippets in my EditForm.aspx:

<script>
 $(document).ready(function() {
    $().SPServices.SPArrangeChoices({
      columnName: "1000 Process",
      perRow: 15
   });
   $(".ms-RadioText").css("white-space", "nowrap");
});
</script>

I'm thinking that I can establish a variable to store any checked boxes before they get rearranged.

Thanks in advance.

Brett

Coordinator
Aug 1, 2012 at 7:01 PM

That shouldn't be the case. The function simply rearranges the ellements in the DOM; it doesn't change their values. I also haven't had any other reports of this, and I know a *lot* of people use it.

M.

Aug 1, 2012 at 7:06 PM

Understood.  That's what I thought too.  It doesn't make sense but it is happening and the cause is a mystery so far.

Coordinator
Aug 1, 2012 at 7:35 PM

Can you tell me anything about the types of values, how many there are, etc? If you can share the data, I could drop it into my environment to test it.

M.

Aug 1, 2012 at 7:47 PM

Sure.  Here's the first one:

Field Name: 1000 Process
Type: Choice
Choices: "01" thru "10"
Display Choices Using: Checkboxes (allow multiple selections)
Not requred
No default value.
It is a site column.

There are a total of 20 fields like this.  Also, I can send you the list template but don't seem to be able to attach.

Aug 2, 2012 at 2:34 PM

M,

Here is a zip file with the list template, aspx file for the edit form, and accompanying files.  Hope this is enough to test.

https://dl.dropbox.com/u/16197114/CheckBoxTest.zip

Thanks again for you input!

B.