Display the File Last Updated Date Using jQuery in SharePoint

In this example, assume there is a dashboard page on a SharePoint site that displays a number of graphs and charts. This dashboard is based on data contained in a single file located in a document library on the same site. Whenever this file is updated, the last modified date of the file needs to be automatically reflected on the dashboard page. This allows the page viewer to know the freshness of the dashboard data without requiring the content owner to edit the dashboard page itself with every data change. The following code will display the file last updated date using jQuery, the SharePoint Client Object Model (sp.js), and a bit of HTML. The formatDate function is used to format the file last modified timestamp in dd-mon-yyyy format.

Add a Content Editor Web Part to the dashboard page and include the following script in the source (or as a reference to a script file).

Change the FileUrl variable in getFileInfo() to the appropriate file path. When the code executes, it will replace the contents of the “data_last_update_date” container with the formatted last modified timestamp.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
  function getFileInfo() {
    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var FileUrl = '/path/to/file.txt';
    var file = web.getFileByServerRelativeUrl(FileUrl);


      function() {
        $('#data_last_update_date').html("Data Last Updated: " + formatDate(file.get_timeLastModified()));
      function(sender, args) {
        console.log('Function getFileInfo() failed: ' + args.get_message());

  function formatDate(timestamp) {
    var month_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var pad = "00";

    if(timestamp) {
      var d = new Date(timestamp);

      return (pad + d.getDate()).slice(-pad.length) + "-" + month_names[d.getMonth()] + "-" + d.getFullYear();

  $(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(getFileInfo, "sp.js");

<p> </p>
<div id='data_last_update_date' style='text-align:center; width:100%;'></div>

Base64 Decoding and Encoding in JavaScript

Base64 decoding and encoding in JavaScript is handled through the atob() and btoa() functions respectively. The following script provides a few text boxes to play around with decoding and encoding strings in Base64. The code can be copied to a local text file and opened in a web browser for a simple encoder and decoder utility. I created this utility to provide a local solution to decode Base64 encoded data instead of using one of the available online solutions since I didn’t know whether or not the submitted data is captured on the server.

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <textarea id="original_encoded_text"></textarea>
      <input type="button" id="decoder_button" value="Decode">
      <textarea id="decoded_text"></textarea>
      <input type="button" id="encoder_button" value="Encode">
      <textarea id="new_encoded_text"></textarea>
    <script type="text/javascript">
      $("#decoder_button").click(function() {
        var strTextToDecode = $("#original_encoded_text").val();
        var strDecodedText = atob(strTextToDecode);

      $("#encoder_button").click(function() {
        var strTextToEncode = $("#decoded_text").val();
        var strEncodedText = btoa(strTextToEncode);

Submit Form With Enter Key Using jQuery

By default in most browsers, hitting the Enter key will trigger the browser to follow the the URL or button that currently has tab focus. Sometimes it seems as though the browser does whatever it wants after the user hits Enter because the focus isn’t readily apparent. In an interface with one or more forms, it is preferable to have the Enter key trigger the submission of the form so that the user isn’t forced to use his pointer to click the submit button. It’s also nice to include this feature to avoid data loss when the user inevitably hits Enter and the browser decides to go wherever it feels like it.

In this example, we add code that allows the user to submit a form with the enter key using jQuery.

Example HTML form:

<div id='form_1'>
  Field 1: <input type='text' name='field_1' id='field_1'>
  <p> </p>
  <button type='button' id='form_1_submit_button'>Submit</button>

jQuery Code:

In the following jQuery code, we have a self-executing anonymous function that binds a click event handler to #form_1_submit_button and an event handler for the Enter keypress inside #form_1. Whether the user specifically clicks the submit button or hits the Enter key anywhere inside the form, the ValidateForm() function is called.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  //submit form with enter key using jQuery
  $(function() {
    $("#form_1_submit_button").click(function() {

    $("#form_1").keypress(function(e) {
      if(e.which == 13) {

        return false;