JavaScript in the Sharepoint Environment

Use Datepicker von JQuery

       <asp:Content
           ID="PageHead"
           ContentPlaceHolderID="PlaceHolderAdditionalPageHead"
           runat="server">
               <script type="text/javascript">
                   $(document).ready(function () {
                       $('#ctl00_PlaceHolderMain_myDate').datepicker();
                   });
               </script>
       </asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <asp:TextBox ID="myDate" runat="server"></asp:TextBox>
</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
</asp:Content>
     

Note, that the ID name 'myDate' is turned into 'ctl00_PlaceHolderMain_myDate' by SharePoint.

Note, that it is not shown how to include the JQuery library. I guess this can be done like so:

       <asp:Content
	  ID="PageHead"
	  ContentPlaceHolderID="PlaceHolderAdditionalPageHead"
	  runat="server">
	     <SharePoint:ScriptLink
		OnDemand="False"
		Name="MyProject/Javascript/jquery-1.10.2.js"
		Localizable="false"
		runat="server">
	     </SharePoint:ScriptLink>
       </asp:Content>
     

Hello World

A simple 'Hello World' example goes like so. Please apologize that I will not go into details on how to deploy a self made aspx page into a sharepoint site collection.

In Visual Studio (VS) create 'TestPage.aspx'. You do not have to write any code in the code behind (code in 'TestPage.aspx.cs'). So, all you have to do is change the section below in file 'TestPage.aspx' from

        <asp:Content
	   ID="Main"
	   ContentPlaceHolderID="PlaceHolderMain"
	   runat="server">
	</asp:Content>
      
into
        <asp:Content
	   ID="Main"
	   ContentPlaceHolderID="PlaceHolderMain"
	   runat="server">
	     <input
		type="button"
		id="ClientSideBtn"
		value="Click ME"
		onclick="javascript:tellme()" />
	     <script type="text/javascript">
               function tellme() {alert('Hello World');}
	     </script>
	
      

Test this page by opening something like

	http://localhost/sites/mySiteCollection/_layouts/15/MyProject/TestPage.aspx