SPArrangeChoices and custom forms

Nov 4, 2011 at 11:29 PM

Hello,

I've been trying to use SPArrangeChoices with my checkboxes and noticed that it doesn't work for a custom form.

I've tried adding <xsl:comment>FieldName="testcolumn"</xsl:comment> just above the SharePoint:FormField and it seems to make no difference

The JS code looks like this:

<script type="text/javascript" src="../../jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="../../jquery/jquery.SPServices-0.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPArrangeChoices({
 columnName: "testcolumn",
 perRow: 2
});
});

The code works with the out of the box webpart but once I add a Dataform web part on the page it doesn't work there.

upon further review, the class for the TD that have the checkboxes are "ms-RadioText".

This is in a SharePoint 2010 environment and i've tried with both SPServices 0.6.2 and 0.6.3.

Coordinator
Nov 6, 2011 at 3:44 AM

crzyblue:

Adding the comment into the custom form ought to work. Could you try this with an earlier jQuery version? I haven't tested SPArrangeChoices specifically with jQuery 1.6.4 in a customized form. Try something like 1.5.1, and if that works, then I may have a bug with jQuery 1.6.4.

M,.

Nov 7, 2011 at 2:15 PM

Just tried with 1.5.1 and it doesn't work either...

//this is right under placeholdermain

<script type="text/javascript" src="../../jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../jquery/jquery.SPServices-0.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$().SPServices.SPArrangeChoices({
columnName: "testcolumn",
perRow: 2
});
});

</script>

//end right under placeholdermain

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

As a note from the original post it does work with the Out of the box webpart so I know it's executing the Javascript.

Nov 22, 2011 at 2:29 PM

Seems that this is getting kinda left in the dark?

Coordinator
Nov 22, 2011 at 2:42 PM

Have you renewed your support contract? (Yes, that's sarcasm.)

Did you remove the default LFWP from the page? If you haven't, then the script will match on the LFWP rather than the DFWP.

M.

Nov 23, 2011 at 8:46 PM

Yes I had... That web part was the only web part on the page :(

Coordinator
Nov 23, 2011 at 9:43 PM
Can you send me the source for your page? Marc dot Anderson [at] sympraxisconsulting dot com.

M.
Nov 23, 2011 at 9:44 PM

Can you post the markup of these radio buttons?  You can either use View Source or your browser's developer tools to find what is rendered.

Nov 29, 2011 at 7:21 PM

<td id="MSOZoneCell_WebPartWPQ2" valign="top" class="s4-wpcell-plain"><table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr>
    <td valign="top"><div WebPartID="72b6530d-2a13-4ba0-8883-00bf5945c8ed" HasPers="false" id="WebPartWPQ2" width="100%" class="noindex" allowDelete="false" style="" ><table border="0" width="100%" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"><tr><td><table border="0" cellspacing="0" width="100%"><tr><td width="25%" class="ms-vb"><b>Title:</b></td><td width="75%" class="ms-vb"><span dir="none">
  <input name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff1_new$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff1_new_ctl00_ctl00_TextField" title="Title" class="ms-long ms-spellcheck-true" /><br />
 </span></td></tr><tr><td width="25%" class="ms-vb"><b>testcolumn</b></td><td width="75%" class="ms-vb"><!--FieldName="testcolumn"--><span dir="none"><table cellpadding="0" cellspacing="1">
     <tr>
      <td><span class="ms-RadioText" title="Enter Choice #1"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl00" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl00" checked="checked" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl00">Enter Choice #1</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="Enter Choice #2"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl01" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl01" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl01">Enter Choice #2</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="Enter Choice #3"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl02" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl02" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl02">Enter Choice #3</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="4"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl03" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl03" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl03">4</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="5"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl04" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl04" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl04">5</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="6"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl05" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl05" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl05">6</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="7"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl06" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl06" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl06">7</label></span></td>
     </tr><tr>
      <td><span class="ms-RadioText" title="8"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl07" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl07" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl07">8</label></span></td>
     </tr>
    </table></span></td></tr></table></td>

Coordinator
Nov 30, 2011 at 2:26 AM

Here's the issue. SPServices is looking for table details cells with class of .ms-formbody or .ms-formbodysurvey.

$("td.ms-formbody, td.ms-formbodysurvey").each(function() {

So, while you've added the comment, you don't have either of those classes applied to the cell, so it isn't found.

As you can imagine, it's impossible for me to imagine all of the possible customizations someone might make in their forms. SPServices is built to work in the vast majority of cases, but it can't always work.

You should look at the SPArrangeChoices function if you'd like to use it to see if you need to alter your markup further. On the other hand, since you are customizing your form, why not just change the markup manually to rearrange the radio buttons?

M.

Coordinator
Nov 30, 2011 at 2:43 AM

Also, your comment:

<!--FieldName="testcolumn"-->

isn't that same as what I show in the docs:

<xsl:comment>FieldName="Display Name"</xsl:comment>

M.

Dec 14, 2011 at 8:24 PM

That's the way is shows on the view source.

 

I sent you a copy of the page to your e-mail haven't heard back. I haven't customized it in anyway actually. I just added it and added the <xsl:comment> and it transformed it to <!--

Coordinator
Dec 18, 2011 at 4:49 AM

Above I made the suggestion that you just rearrange the markup manually since you are customizing the form anyway. That's probably the easiest solution.

M.

Jan 19, 2012 at 4:38 AM
Edited Jan 20, 2012 at 2:56 AM

I dont know if this was resolved. I just wanted to add that  this is not required :-$(document).ready(function()

Also to overcome SPServices code from not reading the Listform webpart but the DVWP we can push the Listform webpart below the DVWP and hide it. I know some people question as to why it should stay on the page once we start to customise. But I found out for instance

 <SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>



stopped working on my customised newform page if i removed the LWP. I dont know if its because its a server side control and the webpart has not been modified to an XSLT.I would appreciate if someone can shed some light into this. Sorry if this is in the wrong place.

 

Jan 20, 2012 at 2:41 AM

I've been unable to get this to work either.  Using a web-browser built-in DOM viewer, the td in which my checkboxes are rendered is indeed using class "ms-formbody". I can't figure out how to make this work.

I'm wondering how to "rearrange the markup manually", as suggested above (a couple of times).

I assume that means use something else instead of SharePoint:FieldDescription, but what do you use? Something that can dynamically enumerate the choice values?

Thanks for any suggestions.

Coordinator
Jan 20, 2012 at 2:29 PM
Edited Jan 20, 2012 at 2:30 PM

What I mean is to just change the HTML structure which contains the fields. That's what the function does in the live DOM.

For instance, you could change from this:

<tr>
  <td>
<span class="ms-RadioText" title="Enter Choice #1"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl00" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl00" checked="checked" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl00">Enter Choice #1</label></span>
</td> </tr> <tr> <td>
<span class="ms-RadioText" title="Enter Choice #2"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl01" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl01" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl01">Enter Choice #2</label></span> </td> </tr>

to

<tr>
  <td>
<span class="ms-RadioText" title="Enter Choice #1"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl00" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl00" checked="checked" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl00">Enter Choice #1</label></span>
</td> <td>
<span class="ms-RadioText" title="Enter Choice #2"><input id="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl01" type="checkbox" name="ctl00$m$g_72b6530d_2a13_4ba0_8883_00bf5945c8ed$ff3_new$ctl00$ctl01" /><label for="ctl00_m_g_72b6530d_2a13_4ba0_8883_00bf5945c8ed_ff3_new_ctl00_ctl01">Enter Choice #2</label></span>
</td> </tr>

M.