1

I want to keep it short.

Im trying to create a SharePoint template for WikiPages. In the EditMode the user or creator of a WikiPage should have the possibilities to fill out RichHTMLFields which are placed in a table. When he needs a new table row, he can click on a button to add one.

My idea is to define a table with 20 rows. 19 of them should get been hidden by a jQuery function when the user created a new WikiPage. Every time he clicks on a button, a new row shows up. I have to do it this way, because every PlaceHolder, in my case a RichHTMLField has a unique ID, which already has to be available after creating a new page.

I uploaded the jQuery library to /~SiteCollection/Scripts/jquery.js. Then I linked my library to the v4.master masterpage:

<SharePoint:ScriptLink runat="server" name="~Sitecollection/Scripts/jquery.js" language="javascript" />

I added this just above the PageHolderAdditionalPageHead part in the masterpage. Before that I've also tried linking the library to my template, with the code line:

<script src="~Sitecollection/Scripts/jquery.js" type="text/javascript"></script>

But none of both varieties work.

The code for my table looks like this:

<tr class='hideRows'>
    <td style="border-style:solid; border-width:2px; border-color:silver;">
        <div data-name="Page Field: Content 2">
                <!--CS: Start Page Field: Content 2 Snippet-->
                <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="9d213306-7486-4cd4-916c-0a95155a594a" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">Content 2</div><div id="ctl02__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">Content 2</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">Content 2 field value. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
                <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                <!--CE: End Page Field: Content 2 Snippet-->
        </div>
    </td>
</tr>

Followed by the jQuery function:

<script type="text/javascript">

    $(document).ready(function(){
        $('.hideRows').hide();
    });

</script>

after the end of the table </table>

I've tried putting this code above the PlaceHolderAdditionalPageHead as well. But it doesn't work either...

I hope someone can help me out here.

Thanks in advance!

Cheers

Stefan

Improve this question
9
  • I think you forgot the Style Library (or the location where you've uploaded the scripts folder) before the Scripts folder in your jQuery declaration. There's nothing called Scripts as such which exists within the site collection.
    – Akhoy
    Commented Sep 7, 2015 at 7:03
  • I can't comment on your answer, so I have to do it this way: @Akhoy: I created this folder in my root Directory of my SiteCollection. It doesn't exist in general, that's right. I've also tried to put it in /_catalogs/masterpage/jquery.js and linked it equally. But this didn't work either.
    – Stefan
    Commented Sep 7, 2015 at 7:13
  • Upload it to style library and check. You shouldn't be creating folders like these in the root (as a best practice anyway). Also, the ~Sitecollection won't work in script tag. You need to use it like : <script type="text/javascript" src= "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Script%20Library/jquery-1.4.2.min.js%>'/>"></script></span>
    – Akhoy
    Commented Sep 7, 2015 at 7:25
  • @Asad Refai & Patrick: I can't comment on my own post, it says I need 50 reputation to do so. @Akhoy: I put it in the Style Library folder and linked it equally, no success. When I used your provided <script>-link, I get an Something went wrong error. I corrected the path, of course. @Leopold: I've seen this folder _layouts/15/ before, in the preview window or the snippet page in the address bar but I can't locate it in the SP designer. I also tried using absolute paths now, tried with different locations and paths (varieties). Still doesn't work. @Patrick: I put my jQuery link at the bo
    – Stefan
    Commented Sep 7, 2015 at 9:05
  • Not sure what you are doing wrong, but CDN is also an option. Try using <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>. Also check this: sharepoint.stackexchange.com/questions/17308/…
    – Akhoy
    Commented Sep 7, 2015 at 10:05

3 Answers 3

Reset to default
1

my custom masterpage looks like that with the link to my jquery in the head tag:

enter image description here

Improve this answer
0

The ScriptLink control works only relative to the _layouts/15 Folder.

The ~-placeholder for URLs works only on defined places in SharePoint controls (unless you do the replacement by yourself in your control). That are are the reasons why your approaches don´t work.

So either place your jQuery-Files in the layouts-path of your SharePoint farm, or use a server relative or absolute path in the <script src="..."> Attribute.

Improve this answer
0

I found the solution. I read a lot of times and always put my <script src=...>-code line above the PlaceHolderAdditionalPageHead line in my page layout.

All the answers you provided me actually work. There is just a simple thing what doesn't work (for me).

I have to put the source-code line INTO the PlaceHolderAdditionalPageHead-section, not above it. Just tried it out and my test script said: jQuery library is loaded

Improve this answer

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