Jquery Tab Control doesn't Work in SharePoint Custom Form Template

Question

All

I have created a custom webpart for my list instance. This webpart is inserted within a RenderTemplate for the list. I have several Jquery Libraries loading within the webpart. For the most part it seems that it works but none of the tabs work they actually redirect to entire different page with the same contents. I am not sure if I am doing this correctly or what but below is my template and custom webpart.

Here is the web part

<SharePointWebControls:CssLink runat="server" DefaultUrl="/_layouts/css/jquery-ui-1.8.23.custom.css" />

$(function () { $("#accordion").accordion(); });

<div id="Accordion" style="font-size: x-small;">
<h3>
    <a href="#">Required Information</a></h3>
<div id="RequiredInformation">
    <b>Hello World</b>
</div>
<h3>
    <a href="#">Manager's Approval</a></h3>
<div id="ManagersApproval">
    <b>hello World</b>
</div>
<h3>
    <a href="#">IS Approval</a></h3>
<div id="ISApproval">
    <b>Hello World</b>
</div>

Here is the template

    <SharePoint:RenderingTemplate ID="CyberQueryRequestTemplate" runat="server">
<Template>
    <span id='part1'>
        <SharePoint:InformationBar ID="InformationBar1" runat="server" />
        <div id="listFormToolBarTop">
            <wssuc:ToolBar CssClass="ms-formtoolbar" ID="toolBarTbltop" RightButtonSeparator="&#160;"
                runat="server">
                <Template_RightButtons>
                    <SharePoint:NextPageButton runat="server" />
                    <SharePoint:SaveButton runat="server" />
                    <SharePoint:GoBackButton runat="server" />
                </Template_RightButtons>
            </wssuc:ToolBar>
        </div>
        <SharePoint:FormToolBar ID="FormToolBar1" runat="server" />
        <SharePoint:ItemValidationFailedMessage ID="ItemValidationFailedMessage1" runat="server" />
        <table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0"
            width="100%">
            <SharePoint:ChangeContentType ID="ChangeContentType1" runat="server" />
            <SharePoint:FolderFormFields ID="FolderFormFields1" runat="server" />
            <muc:CQRTDesign ID="EditForm1" runat="server" />
            <SharePoint:ApprovalStatus ID="ApprovalStatus1" runat="server" />
            <SharePoint:FormComponent ID="FormComponent1" TemplateName="AttachmentRows" runat="server" />
        </table>
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td class="ms-formline">
                    <img src="/_layouts/images/blank.gif" width='1' height='1' alt="" />
                </td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" width="100%" style="padding-top: 7px">
            <tr>
                <td width="100%">
                    <SharePoint:ItemHiddenVersion ID="ItemHiddenVersion1" runat="server" />
                    <SharePoint:ParentInformationField ID="ParentInformationField1" runat="server" />
                    <SharePoint:InitContentType ID="InitContentType1" runat="server" />
                    <wssuc:ToolBar CssClass="ms-formtoolbar" ID="toolBarTbl" RightButtonSeparator="&#160;"
                        runat="server">
                        <Template_Buttons>
                            <SharePoint:CreatedModifiedInfo runat="server" />
                        </Template_Buttons>
                        <Template_RightButtons>
                            <SharePoint:SaveButton runat="server" />
                            <SharePoint:GoBackButton runat="server" />
                        </Template_RightButtons>
                    </wssuc:ToolBar>
                </td>
            </tr>
        </table>
    </span>
    <SharePoint:AttachmentUpload ID="AttachmentUpload1" runat="server" />
    <div>
        My template</div>
</Template>

I would have formatted it better but this text editor is horrible. — Joseph D Surgeon
– Joseph D Surgeon, Commented Sep 28, 2012 at 21:37
Are you using jQueryUI? Some other plugin? It looks like you are using an accordion function, yet you also say tabs. Which do you want? — Marc D Anderson
– Marc D Anderson, Commented Sep 29, 2012 at 15:16
I am sorry to say this but I fixed the issue. I will post shortly how I did it. — Joseph D Surgeon
– Joseph D Surgeon, Commented Oct 1, 2012 at 13:07

Joseph D Surgeon · Accepted Answer · 2012-10-01 15:44:33Z

The reason for the error is that for some reason SharePoint does not like tables being used in the webpart hosted in the template. It seems that there is another function that looks at tables and restyles them.. So I used divs instead and everything works fine.

    <script type="text/javascript">
$(function () {
    $("#accordion").accordion();
});
</script>


<div id="accordion" style="font-size: x-small;">
<h3>
    <a href="#">Required Information</a></h3>
<div id="RequiredInformation">
    <div>
        <div style="float: left; margin-right: 10px;">
            <h3 class="ms-standardheader">
                Title<span class="ms-formvalidation"> *</span>
            </h3>
        </div>
        <div style="float: left;">
            <SharePoint:FormField runat="server" ID="field_Title"  ControlMode="New" FieldName="Title" />
            <SharePoint:FieldDescription runat="server"  ID="field_Title_Description" FieldName="Title"
                ControlMode="New" />
        </div>
    </div>
</div>
<h3>
    <a href="#">Manager's Approval</a></h3>
<div id="ManagersApproval">
    <b>hello World</b>
</div>
<h3>
    <a href="#">IS Approval</a></h3>
<div id="ISApproval">
    <b>Hello World</b>
</div>
</div>

Now I just need to know how to make this webpart go into edit/new/display automatically instead of setting the controlmode property. using that route I would have to create three different forms for three different modes. — Joseph D Surgeon
– Joseph D Surgeon, Commented Oct 1, 2012 at 15:45
Well seems this only works if you have one field under each section if you add another field the form gets screwed up. If anybody can help please help — Joseph D Surgeon
– Joseph D Surgeon, Commented Oct 2, 2012 at 14:11

Joshi · Accepted Answer · 2012-10-17 16:02:47Z

0

Joseph, Can you please tell me how you include JQuery in the custom web part that you created. I've been trying to include it to my web part but have not been successful in it. I would appreciate if you could let me know on how to include it. I've tried adding

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

but this did not work.

Thanks Joshi

answered Oct 17, 2012 at 16:02

Joshi

1

You need to place it in the PlaceHolderAdditionalHead ContentPlaceholder at the top. it will register in the page head then. I wouldn't recommend CDN either they are slow loading in SharePoint for some reason.

Joseph D Surgeon
– Joseph D Surgeon

2012-10-17 18:23:11 +00:00
Commented Oct 17, 2012 at 18:23

Add a comment |

Stack Exchange Network

Jquery Tab Control doesn't Work in SharePoint Custom Form Template

2 Answers 2

Your Answer

Hot Network Questions

Jquery Tab Control doesn't Work in SharePoint Custom Form Template

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions