Search code examples
dojodijit.calendar

Get Dijit from Parent HTML from embedded iframe

I have a dashboard built using dojo dijits. One of the dijit is dojo calendar widget. In this dashboard I am embedding an iframe to it. I want to change the value of the calendar widget from within the iframe. The issue is since it is not just about changing the text value in the input box of calendar dijit it is also about calling the on change event. So I am using the following

dijit.byId('dijit_form_DateTextBox_1').set('value', datFrom);

This way the value gets updated as well as the change event is fired.

Now since I want to do this from within the iframe I need to get reference to calendar dijit in parent HTML page. If this is a simple Javascript I would have used following to get to that DOM Element and change the value.

const targetNode = $('#'+divId, window.parent.document)[0];

But since this is dojo so I am unable to get this as a dijit object. Is there a way to get dijit from Parent page

Solution

  • Since the dataTextBox is inside iframe, it's in different scope, and looks like you are not using dojo in AMD pattern.

    What you could do is get the object from iFrame's contentWidow and call byID() like any other function, example

    var _dijit = document.getElementById("iframeId").contentWindow.dijit;
var dateTextBox = _dijit.byId('dijit_form_DateTextBox_1');
dateTextBox.set('value', datFrom);

    or better is, you just call a global reference your own function rather than taking reference of dijit.