title: How to manipulate DOM in Dynamics CRM using jQuery
body: <p>Trying to manipulate the DOM by updating a field value using jQuery's append method.</p>
  
  <p>Found that <a href="https://msdn.microsoft.com/en-us/library/hh771584.aspx#Anchor_4" rel="nofollow noreferrer">DOM manipulation is not allowed in Dynamics CRM using normal javascript or jQuery</a></p>
  
  <p>Hence tried to add an HTML Web resource with scripts in it's source tab:</p>
  
  <p>The function is added in the project form and configured to be called at the <code>OnLoad</code> event. However, it gets called before the form loads.</p>
  
  <p>The function works well when executed in the <code>console</code>, but when called by system, it doesn't works.</p>
  
  <pre><code>  setTimeout(ShowProjectAge, 3000);
  
    function ShowProjectAge() {
  
      var createdOn = Xrm.Page.getAttribute("createdon");
      var createdOnDt = new Date(createdOn.$2_2.$2T_2);
      var today = new Date();
      var DiffDays = GetDiffDays(createdOnDt, today);
  
      //var projectAge = $('#processDuration').html();
      //$('#HeaderTilesWrapperLayoutElement').html(projectAge);
      //$('#HeaderTilesWrapperLayoutElement').css('color','black');
  
      console.log('The Project Age is ' + DiffDays);
      var div = $('#HeaderTilesWrapperLayoutElement');
      div.text('The Project Age is ' + DiffDays + ' days');
      div.css('color', 'black');
      div.css('font-weight', 'bold');
    }
  
    function GetDiffDays(date1, date2) {
      var timeDiff = Math.abs(date2.getTime() - date1.getTime());
      return Math.round(timeDiff / (1000 * 3600 * 24));
    }
  </code></pre>
  
  <p><strong>On completely loaded DOM, <code>ShowProjectAge</code> works well</strong>. However, when called from the system, it doesn't gets loaded.</p>
  
  <p>Tried using <code>document.ready</code> already</p>