Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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>

share|improve this question
    
I would have formatted it better but this text editor is horrible. –  Joseph D Surgeon Sep 28 '12 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 Sep 29 '12 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 Oct 1 '12 at 13:07

2 Answers 2

up vote 0 down vote accepted

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>
share|improve this answer
    
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 Oct 1 '12 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 Oct 2 '12 at 14:11

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

share|improve this answer
    
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 Oct 17 '12 at 18:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.