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 understand the freshness of the dashboard data without requiring the content owner to edit the dashboard page itself with every data change. The following code displays the file last updated date as well as the last modified by user name 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.

Step 1 – Add Content Editor Web Part

Add a Content Editor Web Part to the dashboard page.

SharePoint – Add Content Editor
SharePoint – Add Content Editor

Step 2 – Modify the Script

Change the fileRelativeUrl variable in getFileInfo() to the appropriate local file path. In other words, only include the subdirectory path and filename.

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

<script language='javascript'>
  var file = null;
  var user = null;

  function getFileInfo() {
    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var fileRelativeUrl = '/server/path/to/file.txt';

    this.file = web.getFileByServerRelativeUrl(fileRelativeUrl);

    this.user = this.file.get_modifiedBy();

      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)

  function onQuerySucceeded(sender, args) {
    $('#source_data_info').html("Data Last Updated: " + formatDate(this.file.get_timeLastModified()) + "<p> </p>" + "Data Modified By: " + user.get_title());

  function onQueryFailed(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");

Step 3 – Edit Content Editor Web Part Properties to Reference Script

Edit the Content Editor Web Part properties. Include a link to the below script by adding the code to a file in a document library on the SharePoint site.

SharePoint – Add Link to Script
SharePoint – Add Link to Script


When the code executes, it replaces the contents of the “source_data_info” container with the formatted last modified timestamp and the last modified by user name.

SharePoint – Final Result
SharePoint – Final Result

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 text area to enter the original data which may then be decoded or encoded in Base64 using the provided buttons. The copy button populates the “Data” text area with the current value of the “Result” text area. The tool below may be used as-is or the source code may be copied to a local text file and opened in a web browser. I created this utility to provide a local solution to decode/encode Base64 data instead of using one of the available online solutions since I didn’t know whether or not the submitted data was captured on those servers.

Live Test



Source Code

  <div><strong>Data:</strong> <textarea id="txt_data"></textarea></div>
  <input type="button" id="btn_decode" value="Decode">
  <input type="button" id="btn_encode" value="Encode">
  <input type="button" id="btn_copy" value="Copy Result to Data">
  <div><strong>Result:</strong> <textarea id="txt_result"></textarea></div>
<script language='javascript'>
  document.getElementById('btn_decode').onclick = function() {
    document.getElementById('txt_result').value = '';
    var strDataToDecode = document.getElementById('txt_data').value;
    var strDecodedData = escape(atob(strDataToDecode));
    document.getElementById('txt_result').value = strDecodedData;
  document.getElementById('btn_encode').onclick = function() {
    document.getElementById('txt_result').value = '';
    var strDataToEncode = document.getElementById('txt_data').value;
    var strEncodedData = btoa(unescape(strDataToEncode));
    document.getElementById('txt_result').value = strEncodedData;
  document.getElementById('btn_copy').onclick = function() {
    document.getElementById('txt_data').value = document.getElementById('txt_result').value;
    document.getElementById('txt_result').value = '';

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.


<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="https://code.jquery.com/jquery-latest.min.js"></script>
<script language='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;