Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

Tabs-Sections in sharepoint 2010 newform.aspx and editform.aspx

$
0
0

i have followed sympmarc blog and created a   form like the given below:

but i am not able to perform clicks in a normal  way :

can anyone help where to make changes so that it looks nice :

here is the code in my sp designer 2010  customnewform.aspx file,

 [ i took code  from here

http://sympmarc.com/2011/08/18/taming-long-sharepoint-list-forms-using-jquery-to-break-them-into-sections/

]

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

<script language="javascript" src="/project/EOVHYSZ1/EASAssetsLib/jquery-1.7.2.js" type="text/javascript"></script>

<script language="javascript" src="/project/EOVHYSZ1/EASAssetsLib/jquery.SPServices-0.6.2.min.js" type="text/javascript"> </script>

<script type="text/javascript" language="javascript">

  // This function from SPServices gets all of the Query String parameters

  var queryStringVals = $().SPServices.SPGetQueryString();

  // We can pass in a section name on the Query String to expand by default

  var expandSection = queryStringVals.section;


  $(document).ready(function() {

 

    // Set up each of the sections -

    // see the setupSection function below for an explanation of the parameters

                          
    setupSection("Section1", "This is Section One", "Title","Division","Request Received Date", "TeacherName", "NumberofStudents"); 

    setupSection("Section2", "This is Section Two", "TeacherName","StudentName","NumberofStudents");

    setupSection("Section3", "This is Section Three", "SchoolName", "SchoolAddress");

 

    // If no section on the Query String, expand the first section

    if(expandSection === undefined) {

      $("tr[section-name='Section1']").css("display", "block");

      $("tr#Section1").addClass("demo-collapse");

    }   });
 

  function setupSection(sectionShortName, sectionLongName, startColumn, endColumn) {

    /* Set up a form section

      Parameters:

        sectionShortName: This short name is used for element IDs and such. It cannot contain spaces or special characters.

        sectionLongName: This name is what is shown in the section header and can contain any text.

        startColumn: The first column in the section.

        endColumn: The last column in the section.

      The two column names should be the Display Name, e.g., "Product Name", not the InternalName, e.g., "Product_x0020_Name"

    */

 

    // Find the first and last row in the section and add the section header

    var sectionStartRow = findFormField(startColumn).closest("tr");

    var sectionEndRow = findFormField(endColumn).closest("tr");

    $(sectionStartRow)

      .before("<tr class='demo-section-header' id='" + sectionShortName + "'>" +

        "<td class='demo-section-header-cell' colspan=2>" + sectionLongName + "</td>" +

        "</tr>");

    var thisSection = $(sectionStartRow).nextUntil(sectionEndRow);

 

    // Give all of the rows in the section an attribute for the section name for easier manipulation later

    $(sectionStartRow).attr("section-name", sectionShortName);

    $(sectionStartRow).nextUntil(sectionEndRow).attr("section-name", sectionShortName);

    $(sectionEndRow).attr("section-name", sectionShortName);

    $(sectionEndRow).find("td").addClass("demo-section-last-row-cell");

 

    // Hide all of the rows in the section

    $("tr[section-name='" + sectionShortName + "']").css("display", "none");

 

    // Add the click behavior for the section header

    $("tr#" + sectionShortName).click(function() {

      var thisSectionRows = $("tr[section-name='" + sectionShortName + "']");

      if($(this).next("tr[section-name='" + sectionShortName + "']").css("display") == "block") {

        $(thisSectionRows).css("display", "none");

        $(this).removeClass("demo-collapse");

      } else {

        $(thisSectionRows).css("display", "block");

        $(this).addClass("demo-collapse");

      }

    });

 

    // Expand the section if there are any validation errors

    $("tr[section-name='" + sectionShortName + "'] .ms-formbody .ms-formvalidation").each(function() {

      if($(this).html().length > 0) {

        $("tr[section-name='" + sectionShortName + "']").css("display", "block");

        $("tr#" + sectionShortName).addClass("demo-collapse");

        // No need to look at any more rows

        return false;

      }

    });

 

    // Expand the section if it's been passed on the Query String

    if(sectionShortName == expandSection) {

      $("tr[section-name='" + sectionShortName + "']").css("display", "block");

      $("tr#" + sectionShortName).addClass("demo-collapse");

    }

 

  }

 

  // This function (borrowed from SPServices) finds a column's formBody in the page

  function findFormField(columnName) {

    var thisFormBody;

    // There's no easy way to find one of these columns; we'll look for the comment with the columnName

    var searchText = RegExp("FieldName=\"" + columnName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + "\"", "gi");

    // Loop through all of the ms-formbody table cells

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

      // Check for the right comment

      if(searchText.test($(this).html())) {

        thisFormBody = $(this);

        // Found it, so we're done

        return false;

      }

    });

    return thisFormBody;

  } // End of function findFormField

</script>



<SharePoint:UIVersionedContent UIVersion="4" runat="server">
<ContentTemplate>
<div style="padding->
</ContentTemplate>
</SharePoint:UIVersionedContent>
<table cellpadding="0" cellspacing="0" id="onetIDListForm" style="width:100%">
<tr>
 <td>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
<WebPartPages:ContentEditorWebPart runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{44C910BD-4AC1-46E0-A40C-C57449A254A7}" >
<WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2">  <Title>Content Editor</Title>
  <FrameType>Default</FrameType>  <Description>Allows authors to enter rich text content.</Description>  <IsIncluded>true</IsIncluded>  <PartOrder>2</PartOrder>  <FrameState>Normal</FrameState> <Height />  <Width />  <AllowRemove>true</AllowRemove>  <AllowZoneChange>true</AllowZoneChange>  <AllowMinimize>true</AllowMinimize>  <AllowConnect>true</AllowConnect> <AllowEdit>true</AllowEdit>  <AllowHide>true</AllowHide>
  <IsVisible>true</IsVisible>  <DetailLink />   <HelpLink />  <HelpMode>Modeless</HelpMode>
  <Dir>Default</Dir>  <PartImageSmall />  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>  <PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge>
  <IsIncludedFilter />  <ExportControlledProperties>true</ExportControlledProperties>
  <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID>
  <ID>g_44c910bd_4ac1_46e0_a40c_c57449a254a7</ID>
  <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />am i missing something?



Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>