How to manipulate DOM in Dynamics CRM using jQuery

Question

Trying to manipulate the DOM by updating a field value using jQuery's append method.

Found that DOM manipulation is not allowed in Dynamics CRM using normal javascript or jQuery

Hence tried to add an HTML Web resource with scripts in it's source tab:

The function is added in the project form and configured to be called at the OnLoad event. However, it gets called before the form loads.

The function works well when executed in the console, but when called by system, it doesn't works.

  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));
  }

On completely loaded DOM, ShowProjectAge works well. However, when called from the system, it doesn't gets loaded.

Tried using document.ready already

Answer 1

Based on my understanding on Dynamics CRM DOM, all javascripts are in a separate empty iframe.

The form elements are inside another empty iframe.

Notice that both of them are in the same window, hence change the line from this:

var div = $('#HeaderTilesWrapperLayoutElement');

to this:

var div = $('#HeaderTilesWrapperLayoutElement', window.parent.document);